株式会社シスアナコム

情報システムに関することなら、どんなことでも適切に助言いたします!

この投稿は1年以上前に公開されました。
現在では状況や内容が変わっている可能性があります。
ご注意下さい。m(_ _)m

STINGER5のサイドバーとスタイルシートをカスタマイズ

      2014/11/25

シスアナコム社長の杉山です。

STINGER5のカスタマイズも、残るはサイドバーとスタイルシートのカスタマイズだけです。

カスタマイズ中のサイトはこちら

サイドバーのカスタマイズ

サイドバーは画面右側に表示されている領域。

ここをカスタマイズします。

STINGER3の記事はこちら

NEW POSTの表示を変更

STINGER5になって「NEW ENTRY」から「NEW POST」に名称が変更された部分。

STINGER3のサイドバー(sidebar.php)とは作りが少し変更になって、ファイルが細分化されています。

サイドバーの「NEW POST」の表示を行うのは、「newpost.php」というファイルで、「sidebar.php」から呼び出されます。

さくらインターネットのファイルマネージャーを使い、STINGER5のフォルダから「newpost.php」を子テーマのフォルダにコピーします。

ここの投稿文書の冒頭要約文を削除して、投稿日を表示するように変更します。

      <div class="smanone">
        <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
      </div>

この3行を削除して、以下のように変更します。

        <p><br>投稿日: <?php echo get_post_time('Y/m/d'); ?></p>

これでタイトルから1行空けて投稿日が表示されます。

あと、個人的な好みだと思いますが、サムネイル画像の表示を変更します。

STINGER3のサムネイル画像は画像の一部を切り取ったように表示されていました。

STINGER5のサムネイル画像は全体が表示されるように変更されています。

トップ画面に表示される画像領域は大きめなので、サムネイル画像は全体が表示される方が良いと思います。

しかし、サイドバーは表示領域が小さいので、画像によっては小さて見にくく感じます。

なので、サイドバーに表示するサムネイル画像は以前のように変更します。

「newpost.php」のこの部分を

      <?php the_post_thumbnail( 'thumb150' ); ?>

このように変更します。

      <?php the_post_thumbnail( 'thumbnail' ); ?>

WordPress Popular Postsの設定

ワードプレスの管理メニューから外観のウィジェットを表示。

サイドバーウィジェットの中に「Wordpress Popular Posts」を表示しているウィジェットを開きます。

STINGER3の設定がそのまま残っているはずなので、少し修正。

カスタムHTMLマークアップの設定を以下のように変更します。

Before / after title:(変更なし)

<h4 class="menu_underh2">
</h4>

Before / after Popular Posts:

<div id="kanren">
</div>

Post HTML Markup:

<dl class="clearfix">
  <dt>{thumb}</dt>
  <dd>
    <h5>{title}</h5>
    <p>{stats}</p>
  </dd>
</dl>

これで保存します。

サイドバーの「NEW POST」の部分とWordPress Popular Postsで表示している人気記事の部分が同じような感じで表示されていれば成功です。

スタイルシートをカスタマイズ

まずはサイドバーのスタイルから。

ワードプレスの管理メニューから外観→テーマ編集で「style.css」を編集します。

サイドバーの「NEW POST」と「Wordpress Popular Posts」の表示を変更します。

#kanren dl {
  padding: 10px;
  background: white;
  height: 100px;
  border: 1px solid royalblue !important;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

これで影付きの青色の枠に囲まれて表示されます。

さらに、タイトルの文字が大きいので少し小さくします。

#kanren dd h5 {
  font-size: 14px;
}

次にトップページの装飾を少し。

ブログ情報の上、タイトルの下に点線を入れます。

.blog_info {
  border-top: 1px dotted royalblue;
}

記事間の線を点線から実線に変更して色を変更します。

#topnews dl {
  border-bottom: 1px solid royalblue;
}

最後に余白を調整。

記事内にリスト要素を入れたときの上部の余白を削除。

.post ul {
  padding-top: 0;
}

トップページ上部のサイト説明とメニューの間の余白を削除。

header .descr {
  padding-bottom: 0;
}

サイドバーの「NEW POST」と「Wordpress Popular Posts」の表示で、リストの最後の要素だけ余白が大きいので修正。

#kanren dl:last-child {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

これで完了。

STINGER3の時は、好みのスタイルにするために、スタイルシートを色々と修正しましたが、STINGER5になって修正点がかなり少なくなったと感じました。

最後に、「style.css」全体を掲載しておきます。

@charset "UTF-8";

/*
Theme Name:  Stinger 5 Child Theme
Template:  stinger5ver20141011
*/

@import url('../stinger5ver20141011/style.css');

/* PCメニューをドロップダウンリストのように階層化 */
.smanone li {
  width: 162px;
  height: 40px;
  padding: 0;
}

.smanone li a {
  text-align: center;
  display: block;
  padding: 10px 0;
  width: 100%;
  background: royalblue;
  color: white !important;
}
 
.smanone li:hover > a {
  background: darkblue;
}

.smanone li ul li {
  overflow: hidden;
  height: 0;
  padding: 0;
}
 
.smanone li ul li a {
  background: darkblue;
  padding: 10px 0;
}
 
.smanone li:hover ul li {
  overflow: visible;
  height: 40px;
  z-index: 1;
}

/* スマホメニュー */
.pcnone li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.pcnone li a {
  display: block;
  padding: 10px;
  width: 100%;
  background: royalblue;
  color: white !important;
  border: 1px solid darkblue;
}

.pcnone li:hover > a {
  background: darkblue;
}

.pcnone li ul li a {
  padding-left: 30px;
}

.pcnone li ul li {
  padding: 0;
  margin: 0;
}

/* ロゴ画像の最大サイズ */
.sitename img {
  max-width: 100%;
}

/* フッターの背景色を変更 */
#footer {
  background: royalblue;
}

/* フッターのh3とh4リンクの文字色を変更 */
#footer,
#footer .copy {
  color: white !important;
}

/* サイドバーの表示を変更 */
#kanren dl {
  padding: 10px;
  background: white;
  height: 100px;
  border: 1px solid royalblue !important;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

#kanren dd h5 {
  font-size: 14px;
}

/* トップページの装飾 */
.blog_info {
  border-top: 1px dotted royalblue;
}

#topnews dl {
  border-bottom: 1px solid royalblue;
}

/* 余白の調整 */
.post ul {
  padding-top: 0;
}

header .descr {
  padding-bottom: 0;
}

#kanren dl:last-child {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

/* PC画面余白の調整 */
@media only screen and (min-width: 780px) {
#wrapper {
	padding: 0 20px;
}
}

/* 表の罫線 */
.post table {
	border: 1px #ddd solid;
}

2014年11月25日:追記

スマホでのメニュー表示も考慮した改良版の記事を書きましたので、更新しました。

今後について

とりあえずこれで完成です。

しばらくしたら、本サイトもSTINGER3からSTINGER5に変更する予定。

修正中は表示が乱れたりする可能性もありますので、ご了承下さい。

本サイトもSTINGER5に移行しました。(2014/08/25)

さらなる修正が発生した場合は、また報告します。

では。

 - ひとこと, ひとこと(ワードプレス)

↓ブログランキングに参加しています!


ネット・PC(全般) ブログランキングへ
にほんブログ村 IT技術ブログ ITコンサルティングへ
にほんブログ村

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です