せいかつブログ

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

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

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

今回は、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」は、記事に見出しを入れると自動的に目次が作成されます。 目次を作るためのプラグインは必要ありません。 記事に見出しを入れるには、見出しにしたい行にカーソルを合わせて(もしくは文をドラッグ)、 「段落

↑目次に戻る

まとめ:Cocoon・目次追従の設定は簡単にできる

いかがでしたか?

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

ただ、記事を読んでいるときに右側にサイドバーが表示されるのはPCだけです。

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

 

自分の作成した記事の最終確認にも使えたり、何かと便利です。

設定しておいて損はないと思います。

 

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

 

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

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

おわり。

コメント

SNS

最近の投稿

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