Cocoonカスタマイズその2(目次、サイドバー、FontAwesome)コピペOKです

スポンサーリンク
スポンサーリンク

カスタマイズ第二弾です

今回も、WordPressのテーマであるCocoonのカスタマイズ第二弾です。

目次やFontAwesomeを追加するといったことをしています。これで一旦カスタマイズは最後にしようと思います。

グローバルナビにFontAwesomeを入れる

これはとても簡単でした。

daimaclog_menu_fa

管理画面の外観→メニューで、各メニューのウィジェットのナビゲーションラベルに、iタグで囲まれているFontAwesomeのタグを入力すると、表示されます。

ただ一点気をつけないといけないのが、FontAwesomenoのタグの中に、という箇所のfasはfaと書き換えるということです。

ここを書き変えるとキチン表示されます。

目次のバックを色変える(桜)

目次の背景色を変えても特に違和感がなさそうでしたので、変えてみました。変えた色は桜(#FEDFE1)にしています。

具体的なソースコードは、Githubのgistに表示しています。

AMPではgistのembedでは表示されませんので、こちらのリンクからソースを参照してください。

目次クリック後の表示位置

Cocoonには、目次が設定される機能を持っています。仕組みとしてはhタグで定義された文字列が目次として表示され、それをクリックすると、hタグが定義されている場所に移動するというものです。

この機能、とても便利で使わせていただいていますが、ちょっとだけ気になるところがあります。

それが目次から移動する際に見出しが完全に表示されないところです。

せっかくの見出しが見えないのはちょっとかなしいというかがっかりなんで、ちょっとCSSで弄くりました。

具体的なソースですが、こちらのサイトからそのまま拝借させていただきました。ありがとうございます。

https://bibabosi-rizumu.com/cocoon-toc-padding-top/

AMPではgistのembedでは表示されませんので、こちらのリンクからソースを参照してください。

ただ、このCSSを書いた結果、h3タグの文字の部分が下ずれしてしまいました。

僕のh3タグは、文字列と左右に線が入るものなんですが、その文字の部分が先程定義した分だけ下がってしまいました。

仕方ないので、左右の線は個別にCSSで下げました。使用したのはmargin-topです。

サイドバーのウィジェットのアイコン

サイドバーにウィジェットのアイコンを表示させるCSSです。

こちらも拝借させていただきました。管理者様本当にありがとうございます。

https://s41t0h.jp/cocoon-fa-icon-sidebar/

このCSSサイドバーに表示できるウィジェットを網羅されているのですが、アーカイブがなかったので、アーカイブについては自分で作成をしました。と言っても、大したことはしておらず、.widget_archiveというクラスを作って、そのクラスのh3タグにFont Awesomeのアイコンをくっつけるという処理をしただけです。

AMPではgistのembedでは表示されませんので、こちらのリンクからソースを参照してください。

今後(サイトイメージ、プロフィール)

機能的な追加はこのあたりにしておこうと思います。あとはデザインです。配色のことについてはちょっと色々としてみたいので、その辺を勉強しつつ、ブログのイメージを固めていこうと思います。

あと、作っている途中のプロフィールも上げていこうと思っています。今のブログは情報量はある程度溜まっているのですが、あまり作者の顔が見えないというか。なんかとても無機質な感じがします。僕が無機質な文章を書くので、どうしてもテイストが無機質になります。なので、プロフィールを作ってブログを生きた感じにしたいと思います。

コメント

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