WordPress Cocoon

【Cocoon】目次のデザインをカスタマイズしてアニメーションも追加してみた

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCocoonに標準で備わっている「目次」のデザインをカスタマイズしていきたいと思います。

開閉させる時にうぃーんとアニメーションさせてみました。完成するとこのようになります↓

アニメーションなしのシンプルタイプから紹介していきますので、お好きな部分を参考にしていただければと思います。

ではいってみましょう!

アニメーションなしのシンプルカスタマイズ

まずはアニメーションなしのバージョンです。目次を開いたままで開閉させない方はこちらをお使いください。

以下のCSSを追加するだけです。

上記のCSSでこのようになります↓

この記事の目次」というタイトル部分は「Cocoon設定 > 目次 > 目次タイトル」で設定した内容が反映されます。

またアイコンはFontAwesomeで表示していますが、必要ない方は以下の部分のコードを全て削除してください。

他のアイコンにしたい方はFontAwesomeのサイトで好きなアイコンを選べます。

中央寄せにしたい場合

幅いっぱいに広げずに中央寄せにしたい場合は、先ほどのコードの最初の部分をこのように変更します。

変更点は「display: block;」を「display: table;」に戻したのと、「margin-left: auto;」、「margin-right: auto;」を追加しています。

margin-bottom: 1em;」もあるので、全部まとめて「margin: 0 auto 1em auto;」と書くこともできます。まとめる場合は左側から「上(0)、右(auto)、下(1em)、左(auto)」の指定になります。

するとこんな感じで幅は中身によって変わり、中央に配置されます。

中身のデザインをカスタマイズ

次に目次の各見出しのデザインを少しいじってみましょう。先ほどのCSSの下にこのコードを追加します↓

上記CSSが反映されるとこうなります↓

各見出しにボーダーを引いたり、h2の見出しだけ「font-weight:bold;」で太字にしたりしています。色などお好みで変えてくださいね。

アニメーションを入れてみる

次は開閉をアニメーションさせるバージョンです。Cocoonで設定できる「目次切り替え」は使いませんので、チェックは外した状態にしておいてください↓

最初はCSSだけでアニメーションさせようとしたんですが、Cocoonのコードと相性が悪いのか上手く動かなかったので今回はjQueryで動かします。

jQueryのコードを追加する

と言ってもCSSと同じようにコードをコピペするだけなので簡単です。子テーマで「テーマの編集」画面を開いたらスタイルシートではなく「javascript.js」を開きます↓

開けたらこちらのコードを追加します↓

ちなみに前後に「<script></script>」などは必要ないので、上記コードをそのままコピペしてもらって大丈夫です。

4行目の後半「slideToggle(200)」の数字を変えるとアニメーションのスピードを変えることができ、数字が大きくなるほど遅くなります。

CSSを追加する

最後にCSSで「開く」「隠す」などを表示します。追加するCSSはこちらです↓

最初の「.toc-content」は先ほどのアニメーションなしのCSSでも使っていますが、「display: none;」を追加して最初は目次を非表示にしています。

「content: ‘[開く]‘;」「content: ‘[隠す]‘;」の赤字部分は好きな文字に変更できるのでお好みでどうぞ。

上記はページ読み込み時に目次が閉じている状態になりますが、最初から開いている状態にする場合はこうなります↓

最初に隠す必要がないので「.toc-content」の「display: none;」は必要ありません。

それと「開く」「隠す」の場所を入れ替えます。クリックした時に「.active」のclassが付与されるので、そのclassを使って「隠す」から「開く」に変えるという処理になっています。

ということで今回は目次のカスタマイズでした!誰かの参考になれば幸いです。
ではまた〜♪

コメント