2020年12月13日(日)
1級2次試験対策!!!

色彩検定関連記事まとめ

cocoonのサイドバーの記事毎に区切り線を入れるカスタマイズ

スポンサーリンク
cocoonのサイドバー記事毎に区切り線を追加cocoon

こんにちは。
いたみけいこ(‎@keiko_itami)です。
このブログは2020年2月現在Wordpressの人気テーマ、cocoonを使っています。
今日はまたひとつカスタマイズを行なったのでご紹介します。

スポンサーリンク

今回のカスタマイズ内容

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要素の両方に適応されています。

cocoonサイドバーに区切り線追加
こんな感じになりました。
色はマウスを乗せたときに着く背景色と合わせました。
さりげないカスタマイズでした。

コメント

タイトルとURLをコピーしました