【Cocoon】サイドバー編集。ホバー時のアニメーション。

サイドバーの見た目を弄りたくて仕方なかったので、弄りました。

「プラスプラス」というサイトで「ぷるぷる」さんがコードを公開してくれていたので
https://plu-plu.net/cocoon-sidecar/
こちらを参考に進めました。
上記のサイトのコードをスタイルシートにコピペすることで、
「プラスプラス」のサイドバーと同じサイドバーが手に入ります。

コードについて書くとまずいことになりそうだったので、
「ぷるぷる」さんのコードと違うことをした点を書いていこうと思います。

「外観」→「テーマエディター」→「スタイルシート（style.css）」
で、スタイルシートの左の書き込めるところにコードを書き込んでいきます。

現在あるものの1番下のところから書き込んだので大丈夫です。

サイドバーの見出し装飾変更

「文字のサイズ」とアンダーバーの色ですね。

フォントのサイズをpxに変更しました。
僕がpxに慣れている為ですね。

下線の色を変更しました。
「border-bottom:2px solid #808080;」
ここはグレーにしたかったからです。

アイコンの変化

「.widget_popular_entries h3:before」が該当部分です。
「Fontawesome」というサイトのアイコンを使用しているので
「font-familiy:Fontawesome」こちらの入力が必要です。

使用するアイコンが「Fontawesome」上で「\f11e」だったので
「content:”\f11e”」となっています。
「color:#808080;」でこちらもグレーにしました。

カテゴリータイトルの変更は
「.widget_categories h3:before」
こちらも色を「#808080」に

アーカイブの変更は
「.widget_archive h3:before」
こちらも色を「#808080」にしました。

アーカイブのことに関してはこちらで{}の中を同様に変化させればOKです。

カテゴリーのアイコン

「.widget_categories ul li a:before,.widget_archive ul li a:before」こちらが親カテゴリ、アーカイブについてです。
「.widget_categories ul .children li a」こちらが子カテゴリーについてです。

親カテゴリー、アーカイブのアイコンを変更しました。

ホバーのアクションが戻る時一瞬で「ヒュッ」って戻るのが
好みではなかったので、「ぬらっ」って戻るように「transition」を追加しました。
上のコードだと0.5秒で戻るようになります。

そしてこんな感じになりました。

カーソルを乗せた時のアクションの変化
ここは自分で付け加えた分です。
「.widget-entry-card」が新着記事の部分でしたね。
こっちは「ヒュッ」と戻るようにしています。

こんな感じで変更を加えました。

「プラスプラス」さんのサイトに助けられました。
一括でコピーできるようになっているので、是非遊びに行ってみてください。