ブログ

【Cocoon/カスタマイズ】目次がついてくる!目次追従の設定

この記事は約4分で読めます。

こんにちは、まちゃりさです。

今回は、Cocoonカスタマイズ「目次追従」の設定について解説していきます。

「目次追従」は、このように記事を読んでいるときに、右側(サイドバー)に目次が追いかけてくる機能のことです。

私は最初設定がわからず苦戦しましたが、簡単に設定できます。

気になる方はぜひやってみてください。

まちゃりさ
まちゃりさ

目次が右にあると記事が読みやすいですね!

それでは、どうぞ!

スポンサーリンク

目次の表示確認

最初に、「目次設定」ができているか確認しておきましょう。

ワードプレス管理画面の[Cocoon設定]→[目次]タブを選択します。

目次を表示する」にチェック☑が入っていれば、目次表示されているのでOKです。

他にも目次表示設定を見直したい場合は、まずここで変更しておきます。

私の目次設定はこんな感じです。

・表示ページ:すべてに☑
・目次タイトル:目次
・目次切り替え:すべてに☑
・表示条件:「2」つ以上目次があるとき
・目次表示の深さ:H6まで
・目次ナンバーの表示:黒四角
・目次の中央表示:☑あり

あとから変更するかもですが、今のところこんな感じで設定しています。

目次表示イメージを決める

サイドバーに目次を設定していきますが、表示したい目次イメージを次の2つから選んでおきましょう。

左側が「目次を閉じれる」タイプ、右側が「目次を閉じれない」タイプです。

この後で説明する設定方法が少し異なります。

ウィジットの設定

次に、サイドバースクロール追従を設定していきます。

[外観]→[ウィジット]を選択します。

ここから、先ほど決めたイメージにあわせ、設定を変更していきます。

まずは、「目次を閉じれる」タイプの設定からです。

「テキスト」を選択し、[サイドバースクロール追従]を選択、[ウィジット]を追加します。

続いて、右側の「目次を閉じれない」タイプを選ぶ場合です。

「目次」を選択し、[サイドバースクロール追従]を選択、[ウィジット]を追加します。

[サイドバースクロール追従]に「テキスト」または「目次」が追加されます。

「テキスト」を追加した場合は、広いスペースに[toc]と入力して[save](保存)します。

「目次」を追加した場合は、「タイトル」と「目次表示の深さ」を決めて、[save](保存)します。

まちゃりさ
まちゃりさ

これで終了です!

実際に投稿した記事を見て、目次追従されているか確認してみてください。

ちなみに私は、「目次が閉じれる」タイプを設定しています。お好みで設定してみてください。

目次の見栄えを変えるCSS

上の手順のとおり設定すると、このように黒字で目次が表示されると思います。

私は、目次の見栄えを少しカスタマイズしています。

どなたかの記事を参考に、設定しました。(参考記事を忘れてしまいました・・)

私と同様にさらに見た目を設定したい方は、次の手順を参考に設定してみてください。

まず、[外観]→[カスタマイズ]を選択します。

[追加CSS]を開き、一番下に次のコードを貼り付けて、公開します。

追加CSSは先にバックアップを取っておくのがおすすめです。

/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #0693cd;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}

余白や太さや色などは、後から自由に変えることができます。

詳しくは、ikuzoさんの記事が参考になります。

【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ
WordPressのテーマ「Cocoon」は、記事に見出しを入れると自動的に目次が作成されます。目次を作るためのプラグインは必要ありません。その見出しを作るには、見出しにしたい文をドラッグして「段落▼」から見出し2~6を選びます。基本的に「

まとめ

いかがでしたか?

今回は、Cocoon設定のうち、目次が右側に追いかけてくる目次追従の設定方法をご紹介しました。

ただ、これ試してみるとわかると思いますが、記事を読んでいるときに右側にサイドバーが表示されるのはPCだけなんですよね。

スマホの場合は、「サイドバー」を押さないと目次が見えませんでした。

ただし、自分で記事の最終確認などするときに使えたり、何かと便利です。設定しておいて損はないと思います。

Cocoonは、知らないだけで結構色々とカスタマイズ設定ができるので、Cocoonを使っている方は、ぜひたくさん試してみてください。

それでは、今回はこれで終わります。

最後までお読みいただき、ありがとうございました。

おわり。

コメント

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