こんにちは。
いたみけいこ（@keiko_itami）です。
このブログは2020年2月現在Wordpressの人気テーマ、cocoonを使っています。
今日はまたひとつカスタマイズを行なったのでご紹介します。
今回のカスタマイズ内容
スキンなしで使っていたんですが、デフォルトの状態だとサイドバーの区切り線とかもありません。マウスを乗せると薄い背景色がつきます。
この記事と記事の間に薄いラインを入れたいなと思いました。
はじめはカテゴリー名の背景色が付いていたのですが、
・シンプルにさせたかったことと
・アイコン色のピンクに合わせたかったので、
そうしたらボヤっとしてしまったんですね。
同様のカスタマイズをされたい方は、ご参考にされてください。
いつもの通り、カスタマイズを行う際はバックアップを行なった後自己責任でお願いします。
カスタマイズ方法
以下を追加cssか子テーマのstyle.cssに記入。
/* サイドバーウィジェット下線追加 */
.widget-entry-card-link,
.popular-entry-card-link,
.widget-sidebar li{
margin-top: -4px/*隙間調整*/;
border-bottom: solid 2px/*線の太さ*/ #f5f8fa/*線の色*/;
}
/* サイドバーウィジェット一番上の要素にだけ上線追加 */
.widget-entry-card-link:first-child,
.popular-entry-card-link:first-child,
.widget-sidebar li:first-child{
border-top: solid 2px/*線の太さ*/ #f5f8fa/*線の色*/;
}:first-childをいれると一番上の要素にだけ指定されます。
「最近の投稿」と「カテゴリー（一覧）」はliだったので、
.widget-sidebar liで、サイドバーウィジェット内li要素の両方に適応されています。
こんな感じになりました。
色はマウスを乗せたときに着く背景色と合わせました。
さりげないカスタマイズでした。
コメント