どーも、ユメソバです。
WordPressテーマ「SANGO」には人気記事ブロックがデフォルトでついており、サイドバーなどに表示することができます。
便利なのですが、CSSのカスタマイズ無しで表示すると見た目が少しダサいので、いい感じにカスタマイズします。
具体的には、1位〜3位までの背景色を変更します。色を変更するだけならCSSに数行追加するだけなので簡単にできます。
「人気記事」のカスタマイズ方法に興味がある方は参考にしてみてください。
目次 非表示
はじめに
人気記事の順位の背景色が1〜3位がすべて同じ色(デフォルトではアクセントカラーになる)というのが、イマイチだなとずっと思っていました。
色を変更するだけなら簡単だろうと思い、CSSをいじってみました。
1位〜3位までの背景色を変更する
1位から3位のbackgroundを変更するだけでは、1位から3位がすべて同じ色になっていしまいます。
今回は順位ごとに色を変えたいので、CSSでカスタマイズします。
CSSは[外観]⇒[カスタマイズ]⇒[追加CSS]で変更できます。
li要素をnth-child(数字)で指定することにより、任意のli要素を指定することができるので、順位の背景色を変更することができます。
li:nth-child(1) .accent-bc{ background: #D0A900; // 金
}
li:nth-child(2) .accent-bc{ background: #C0C0C0; // 銀
}
li:nth-child(3) .accent-bc{ background: #C47222; // 銅
}ちなみに4位と5位は同じ色を指定しています。好きな文字色と背景色を指定してください。
.show_num li:nth-child(n+4) .rank { background: #444444; color: #ffffff;
}グラデーションをつける
単色で金色、銀色を指定しても、あまり金色、銀色という感じがありません。
グラデーションをつけると見た目がぐっと良くなるのでグラデーションをつけます。
li:nth-child(1) .accent-bc{ background: linear-gradient(to bottom right, #D0A900, #FFF9E6);
}単色よりは金色っぽいですね。
おわりに
人気記事ウィジェットの背景色を変更することにより、見た目がよくなったと思います。
CSSを少し追加するだけなので、人気記事をカスタマイズしたい人は試してみてください。
