STINGER6のサイドバーの関連記事や人気記事をカスタマイズ！
こんにちは。モカ（@mocakun_tw）です。
当Blogでも利用しているテーマ「STINGER6」凄い使い易いですよね？でも、ちょっと見た目が寂しいのも事実です(笑)。そこでサイドバーのカスタマイズし関連記事や人気記事の背景色を白色に変更しましたので、忘却メモも兼ねて記事にしておきますね。
尚、CSSを修正する事になりますので、子テーマの導入を推奨！
子テーマの導入方法はこちらの記事を参考にどうぞ
STINGER6子テーマの設定｜作者ENJIさんの気づかいが凄い！｜モカどっとこむ
関連記事をCSSで修正する場合のidを確認
前提としてですが、STINGERを利用してる方はサイドバーに新着記事「NEWPOST」が、トップページの内容と被る為に非表示にしている場合は多いですよね？
なので、今回は「NEWPOST」の修正だけではなく、プラグイン「WordPress Popular Posts」などを利用して「人気記事」を表示している場合も含めた修正方法をご紹介します。尚、プラグインの導入方法はGoogle先生に聞いて貰えたら沢山ヒットするかと思いますので割愛します。
関連記事の「id」
- 「NEWPOST」などの関連記事のid
STINGER6では新着記事などを含めた関連記事のidの構成は「#kanren」 - プラグイン「WordPress Popular Posts」を利用している場合
ウィジェット「HTML Markup settings」で指定している筈です。 他の方の記事を参考にプラグインを導入している場合、多くの方は「div id = "kanren"」と記載していると思いますので確認してみて下さい。皆さんが指定しているidを使用しましょう。
CSSのカスタマイズ
では早速カスタマイズしていきましょう！子テーマのCSSに以下を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 |
aside #kanren dl { margin-bottom: 10px; /* 下余白 */ padding: 10px; /* サムネイルと枠の間の余白 */ border-bottom-style: none; /* 下点線のスタイル無し */ background-color: #ffffff; /* 背景色指定 */ } aside #kanren dl:last-child { margin-bottom: 20px; /* 最終記事下の余白 */ padding-bottom: 10px; /* サムネイルと枠の間の余白 */ border-style: none; /* 下点線のスタイル無し */ } |
NEWPOSTは非表示にして、プラグインで人気記事を表示している場合が多いかと思いますので、その際は『id「#kanren」』を『id「#kanren1」』などにしてCSSに追記して下さい。
「#kanren」にすると、記事下の部分のボーダーラインが消えてしまうので注意が必要です！
まとめ
今回は基本形としてのカスタマイズ方法をご紹介しました。この辺りが理解できると当Blogのサイドバーの様にh4見出しに「FontAwesome」を使用した装飾や、マウスポインタを置いた時にボーダーラインの色を変えたりも出来る様になりますよ！