こんにちは、まちゃりさです。
今回は、Cocoonのカスタマイズでできる「目次追従」の設定について解説していきます。
「目次追従」は、下のように記事を読んでいるときに、右側（サイドバー）に目次が追いかけてくる機能のことです。
私は最初設定がわからず苦戦しましたが、簡単に設定できます。
気になる方はぜひやってみてください。
目次が右にあると記事が読みやすいですね！
それでは、どうぞ！
目次の表示確認
最初に、「目次設定」ができているか確認しておきましょう。
ワードプレス管理画面の[Cocoon設定]→[目次]タブを選択します。
「目次を表示する」にチェックが入っていれば、目次表示されているのでOKです。
他にも目次表示設定を見直したい場合は、まずここで変更しておきます。
私の「目次設定」はこんな感じです。
- 表示ページ：すべてに☑
- 目次タイトル：目次
- 目次切り替え：すべてに☑
- 表示条件：「2」つ以上目次があるとき
- 目次表示の深さ：H6まで
- 目次ナンバーの表示：黒四角
- 目次の中央表示：☑あり
あとから変更するかもしれませんが、今のところこんな感じで設定しています。
目次表示イメージを決める
サイドバーに目次を設定していきますが、表示したい目次イメージを次の2つから選んでおきましょう。
左側が「目次を閉じれる」タイプ、右側が「目次を閉じれない」タイプです。
この後で説明する設定方法が少し異なります。
ウィジットの設定
次に、「サイドバースクロール追従」を設定していきます。
[外観]→[ウィジット]を選択します。
ここから、先ほど決めたイメージにあわせ、設定を変更していきます。
まずは、「目次を閉じれる」タイプの設定からです。
「テキスト」を選択し、[サイドバースクロール追従]を選択します。
最後に、[ウィジットを追加]をクリックします。
続いて、右側の「目次を閉じれない」タイプを選ぶ場合です。
「目次」を選択し、[サイドバースクロール追従]を選択します。
最後に[ウィジットを追加]をクリックします。
[サイドバースクロール追従]に以下のどちらかが追加されます。
- 「テキスト」←目次を閉じれるタイプ
- 「目次」←目次を閉じれないタイプ
「テキスト」を追加した場合は、広いスペースに[toc]と入力して、[save]（保存）します。
「目次」を追加した場合は、「タイトル」と「目次表示の深さ」を入力し、[save]（保存）します。
これで終了です！
実際に投稿した記事を見て、目次追従されているか確認してみてください。
ちなみに私は、「目次が閉じれる」タイプを設定しています。
お好みで設定してみてください。
目次の見栄えを変えるCSS
上の手順のとおり設定すると、このように黒字で目次が表示されると思います。
私は、目次の見栄えを少しカスタマイズしています。
どなたかの記事を参考に、設定しました。（参考記事を忘れてしまいました・・）
私と同様にさらに見た目を設定したい方は、次の手順を参考に設定してみてください。
まず、[外観]→[カスタマイズ]を選択します。
[追加CSS]を開き、一番下に次のコードを貼り付けて、公開します。
/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #0693cd;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}
余白や太さや色などは、後から自由に変えることができます。
詳しくは、ikuzoさんの記事が参考になります。
まとめ：Cocoon・目次追従の設定は簡単にできる
いかがでしたか？
今回は、Cocoon設定のうち、目次が右側に追いかけてくる「目次追従の設定方法」をご紹介しました。
ただ、記事を読んでいるときに右側にサイドバーが表示されるのはPCだけです。
スマホの場合は、「サイドバー」を押さないと目次が見えませんでした。
自分の作成した記事の最終確認にも使えたり、何かと便利です。
設定しておいて損はないと思います。
Cocoonは、知らないだけで結構色々とカスタマイズ設定ができるので、Cocoonを使っている方は、ぜひたくさん試してみてください。
「Cocoon」のカスタマイズについての別記事です。
それでは、今回はこれで終わります。
最後までお読みいただき、ありがとうございました。
おわり。
コメント