【Stinger5】サイドバーのNEW POSTの変更
06.082015
この記事は3分で読めます
サイドバーのNEW POSTの表示を変更する
Stinger5ではサイドバーに「NEW POST」として、 新規投稿5件が表示されるようになっています。
(このサイトでは「NEW POST」自体を削除しています。)
通常の表示ではサイドバーには背景色が設定されていないので、 全体の背景色が反映されます。
たとえば背景に画像を敷きたい時や、背景色を暗色にした時に、 文字が見辛いということがあります。
そこで、サイドバーのNEW POSTに背景色を設定して、 カード状に表示するようにしてみました。
(注※これはNEW POSTを削除していない別なサイトの画像です。)
また、カードの角を丸くして、影をつけてプレート風にしてみました。
コードはこちら
CSSには下記のコードを記入しました。
/* サイドバーの表示を変更 */ #kanren dl { padding: 10px; background: white; height: 100px; border: none; border-radius: 7px; box-shadow: 4px 4px 4px rgba(1,0,0,0.5); } #kanren dt{ width:100px; } #kanren dd h5 { font-size: 14px; }
Stinger5のNEW POSTには「kanren」というIDが当てられています。 その「kanren」のスタイルを変更します。
「kanren」は3つの部分にわかれています。
#kanren dl { padding: 10px; ← 内側の余白 background: white; ← 背景色 height: 100px; ← 高さ border: none; ← 枠線(これは「なし」表示する場合は◯pxで指定) border-radius: 7px; ← 角の丸み。描く円の半径。数字が大きいとゆるやかなカーブになる。 box-shadow: 4px 4px 4px rgba(1,0,0,0.5); ← 影の方向、伸びのサイズ、rgbaは色の指定 } |
参考:CSS3リファレンス/rgba() …… RGBAカラーモデルで色を指定する
#kanren dt{ width:100px; ← 幅 サムネイルの幅も考慮 } |
#kanren dd h5 { ← h5は記事タイトル font-size: 14px; ← 記事タイトルの文字の大きさ } |
参考にさせていただいたのは、こちらのサイト様。
【STINGER5】NEW POSTの一つ一つの背景色を変更する方法/きんちゃんねる
ありがとうございました^^
こちらの記事にも書きましたが、 本体ファイルから記述場所を探すのが面倒wだとか 直に本体ファイルに書くのがちょっと・・・ という時は、JetpackのカスタムCSSを利用するとすごく楽です。
「CSS編集」に変更したい場所だけ書き込めば、 本体ファイルを上書きして反映してくれるので便利です。
削除する場合もその箇所だけ削除すればいいので、 間違いや失敗も軽減されます。
というわけで
NEW POSTの表示、いろいろ試してみてくださいね^^
おまけ:NEW POSTの削除のしかた
このサイトではNEW POSTはサイドバーからはずしました。
理由は、TOPページの記事一覧がNEW POSTとかぶるからです。
同じサムネイルがズラズラ並んでいるのも、 ちょっとうっとおしいかな~と感じたので、 バッサリと削除することにしました。
そのかわりに、スクロール広告用ウィジェットに、 人気記事を追尾させるようにしています。
これもできたら人気記事よりは、 読んでほしいなと思うものを表示させたいなと思っていますが、 WordPress Popular Postsではそういう設定ができないみたいなので、 なにかいいプラグインはないかと探しています。
ご存知のかた、いらっしゃいましたら教えてください^^;
NEW POSTを表示させたくない時は、 外観 → エディター(テーマ編集) →サイドバー (sidebar.php) から
<!-- 最近のエントリ --> <h4 class="menu_underh2"> NEW POST</h4> <?php get_template_part('newpost');?> <!-- /最近のエントリ -->
を削除します。 またここに書かれている検索窓やRSSボタンも、 順序を入れ替えると表示位置を変更することができます。
わからないことがあったら、サポート依頼フォームから質問してくださいね。