Word PressテーマCocoonで目次を表示する方法とシンプルなカスタマイズ

・Word PressテーマCocoonでブログを始めたけど目次ってどう表示するの？

・シンプルでいいから目次をカスタマイズする方法はない？

そのようなお悩みをお持ちの方のために、この記事ではWord PressテーマCocoonでの目次の表示方法とシンプルなカスタマイズ方法を紹介します。

記事を読み終えることで、ちょっとおしゃれな目次を初心者の方でも作ることができます。

Cocoonの目次の表示方法

Cocoonではビジュアルエディタの見出しボタンで。見出しを設定することで自動的に目次が作成されます。見出しはh1から始まりますが、h1は記事のタイトルになりますので、ブログを書く際はh2から設定を行っていきます。各見出しと記事構成の関係は本記事だと以下のような感じです。

例えばh2見出しを作成する場合、左上の見出し設定ボタンを選択し、プルダウンから『見出し2』を選択します。

選択するとh2見出しの設定バーが出てきますので、バーの中に見出し名を入力します。

同様にh3見出しも設定していきます。

見出しの設定が完了したら、プレビューボタンから記事のプレビューを表示すると目次が自動で出来ていることが確認できます。

上の目次はCocoonの標準設定です。もちろんこのままでOKですが、少し物足りないと感じる方や、シンプルでいいから目次をカスタマイズしたいという方のために、目次のシンプルなカスタマイズ方法を紹介します。

目次のシンプルなカスタマイズ

ここでは目次のシンプルなカスタマイズ方法を1STEPづつ説明します。

最終的には以下の目次が完成するようにしていきます。

目次全体のカスタマイズ

始めに目次全体のカスタマイズを行う方法を説明します。

まずは管理画面から『Cocoonの設定』を選択しましょう。

Cocoonの設定を選択すると、各設定の変更画面が出てきますので『目次』を選択します。

目次を選択すると以下のようなページが出てきますので、各設定を行っていきます。

続けて設定をしていきます。

最後に「保存」ボタンを押せば設定完了です。

目次タイトルのカスタマイズ

次に目次タイトルを編集していきます。

目次タイトルを編集するには「テーマエディター」から「スタイルシート」を編集していきます。

よくわからなくても基本的にコピペすればOKですので、真似してみて下さい。

まずは管理画面から『外観』⇒ 『テーマエディタ』を選択します。

選択するとCocoon Childのスタイルシート (style.css)が出てきますので、

/* 必要ならばここにコードを書く */　と書いてある下にCSSコードを書いていきます。

CSSとはホームページの見た目を整えるためのプログラミング言語です。特にわからなくてもコピペしていけばいいので問題ありません。進んでいきましょう。

目次タイトルを編集するには　

.toc-title

を編集していきます。以下のCSSをコピペしてstyle.cssに張り付けてください。

目次文字大きさのカスタマイズ

次に目次の文字大きさをカスタマイズしましょう。

目次の文字大きさを変更するには、

.toc

を編集します。以下のCSSをコピペしてstyle.cssに張り付けてください。

目次背景色と枠線のカスタマイズ

最後に目次背景色と枠線をカスタマイズしましょう。

目次背景色と枠線についても、

.toc

を編集します。先ほど編集した.tocに以下を追加しましょう。

『ファイル更新ボタン』を押すとちょっとおしゃれな目次が完成します。

まとめ

この記事ではWord PressテーマCocoonでの目次の表示方法とシンプルなカスタマイズ方法を紹介しました。

目次自体は見出しを設定することで自動的に作成されます。

目次カスタマイズは、Cocoon設定で大まかな設定を行った後に、スタイルシートで細かな編集ができます。参考に本記事で紹介したスタイルシートの全体を張りつけます。ちょっとおしゃれな目次にしたい方は是非コピペするなどして活用してください。