[cocoon]サイドバーがシンプル過ぎる！という方のためのカスタマイズの方法

サイドバーをいじりましょう

cocoonのサイドバーのデフォルトはシンプルなため、

もうちょっとエフェクトが欲しい！と思う方も

いるかもしれません。

カスタマイズありきで作られているのでしょう。

ブログカードと同じエフェクトにします

こちらの記事をご参照ください。

[cocoon]インデックスカードをスタイリッシュにカスタマイズ

box-shadow プロパティでスタイリッシュにインデックスカードをカスタマイズしていきましょう。box-shadow プロパティを使っていきます。box-shadowとは？影をつけるプロパティです。...

www.take-note.net

2020.05.08

サイトの統一感を図るため、ブログカードと

同じくbox-shadow で、マウスオーバー後に影を付ける

ようにしたいと思います。背景色も変えましょう。

「最近の投稿」のリンクをカスタマイズ

サイドバーに何を表示させるか、人それぞれだと

思いますが、この記事では「最近の投稿」を

例にしたいと思います。

↓　マウスオーバー前

↓　マウスオーバー後

Googleのデベロッパーツールを使って検証

Googleのデベロッパ―ツールを使えば、

カスタマイズしたい部分のセレクタを見つけることができます。

調べたいページで右クリック→「検証」です。

この矢印カーソル、最強です。

この矢印をクリック後、画面上から要素や

セレクタを確認できます。

サイドバーのセレクタ

調べると、サイドバーの「最近の投稿」の部分は

.widget_recent_entries ul li a ですね。

この部分をコピーし、「追加CSS」に張り付けて

上書きしていけば良いのです。

私の場合は、マウスオーバー前の

リストに下線を付けたかったので、

このCSSを追加しました。

.widget_recent_entries ul li ｛
border-bottom: solid 1px #d2d5d9 ;
｝

マウスオーバー後のセレクタはどのように調べる？

簡単です。:hovボタンをクリック後、

:hover にチェックを入れるだけ。

マウスオーバー後のCSSが表示されます。

これもコピーして、「追加CSS」に

貼り付けて編集。

.widget_recent_entries ul li a:hover{

background-color:#f2f2f2;
box-shadow: 0px 2px 7px rgba(0,0,0,.15), 0 5px 6px rgba(0,0,0,.15);
    transition: all 0.5s ease-in-out;
    color: #333;
}

こんな感じにしました。

背景色を変えて、影を付けて、taransitionプロパティで、

ゆっくり変化させるよにしました。

最後に