【Cocoon】目次のカスタマイズ方法【サイドバー追従も簡単です】

Cocoonで目次をカスタマイズする方法ブログ

こんにちは!
てつごろう(@Te256g)です。

記事の文章を読んだのに「結局、自分の知りたい情報がなかった!」となって、がっかりしたことはありませんか?

ページに書かれている内容を最初に判断できるために目次を設置することは大切です。

特にブログのようにページ長が長いサイトの場合、目次の存在はより重要になります。

WordPressのテーマ「Cocoon」では、プラグインを使うことなく目次を作ることができるので、とても便利。

そこでこの記事ではCocoonで目次を表示する方法と各種設定、サイドバーで追従させる方法をご紹介します。

目次を簡単に表示する方法と、カスタマイズする方法を学んでいきましょう!

※目次のデザインをカスタマイズする方法を知りたい方は、下記の記事をご覧ください。

てつごろう
てつごろう

Cocoonなら目次を一瞬で作成できるんだよ。

※ここではWordPressのブロックエディター(グーテンベルク)での操作方法を解説します。


 筆者について

僕は元Webディレクターで、現在は個人でWebサイト制作を請け負っています。
Web業界は5年、ブログ運営は1年半ほど。

てつごろう|@Te256g


スポンサーリンク

1. 【Cocoon】目次のカスタマイズ方法

記事の内容
  • Cocoonで目次を表示する方法
  • 目次の設定やデザインを変更する方法
  • サイドバーで追従させる方法

Cocoonではサイドバーで追従(ページのスクロールに合わせて目次も追いかけてくる)させるのも簡単です。

基本的な設定の解説と合わせて、追従させる方法もご紹介しますね。

てつごろう
てつごろう

追従が1クリックでできちゃうんだよ。

2. Cocoonで目次を表示する方法

まずはCocoonで目次を表示する方法です。

Cocoonでは目次作成プラグインをインストールしなくても、自動的に目次を作ってくれます。

見出しを作る方法は簡単です。

見出しにしたいブロックを選択(①)して、ツールバー(②)から見出しを選択(③)するだけ。

見出しを作る方法
見出しを作る方法

Cocoonで目次を表示させる方法はこれだけです!

ただし以下の条件があります。

Cocoonで目次が作られる条件
  • 本文内にH2〜H6の見出しが使われていること
  • 見出しが2つ以上存在すること
    ※H2が一つ以上存存在しないと目次が作られないようです。
  • Cocoonの目次設定で「目次の表示」にチェックが入っていること
てつごろう
てつごろう

普通に記事を書いていけばそんなに意識する必要もないんだよ。

スポンサーリンク

3. 目次の設定やデザインを変更する方法

Cocoonでは、目次の見せ方や条件などの細かい設定をすることができます。

一つずつ解説していきます!

また、目次のデザインをカスタマイズする方法を別の記事でまとめているので、そちらもご紹介します。

3-1. 目次の設定

目次の設定方法を解説していきます。

まずはWordPressのダッシュボードからCocoon設定→目次タブを開いてください。

目次設定画面を元に、一つずつみていきましょう。

目次設定
目次設定

① 目次の表示

目次の表示・非表示を切り替えることができます。

ここにチェックを入れると、各記事に目次が表示されます。

ちなみにショートコード(toc)を使えば、ページの途中でも目次を表示することができるので便利ですね。

   <div class="toc tnt-none border-element"><div class="toc-title">目次</div>     <div class="toc-content">     <ul class="toc-list open"><li><a href="#toc1" tabindex="0">1. 【Cocoon】目次のカスタマイズ方法</a></li><li><a href="#toc2" tabindex="0">2. Cocoonで目次を表示する方法</a></li><li><a href="#toc3" tabindex="0">3. 目次の設定やデザインを変更する方法</a><ul><li><a href="#toc4" tabindex="0">3-1. 目次の設定</a></li><li><a href="#toc5" tabindex="0">3-2. 目次のデザインをカスタマイズ</a></li></ul></li><li><a href="#toc6" tabindex="0">4. サイドバーで追従させる方法</a></li><li><a href="#toc7" tabindex="0">5. まとめ</a></li></ul>     </div>   </div>ショートコードでページの途中にも目次を表示
ショートコードでページの途中にも目次を表示

② 表示ページ

ページのタイプ毎に、目次の表示・非表示を選択できます。

目次を必要としないページは、チェックを外しておくことがユーザーにとってメリットになる場合もあります。

③ 目次タイトル

目次の上に表示するタイトルを変えることもできます。

④ 目次切り替え

チェックを入れると、目次を閉じたり開いたりする機能を付けることができます。

最初から目次を開いた状態にすることも可能。

目次の開閉機能
目次の開閉機能

⑤ 表示条件

目次を表示するかどうかを見出しの数で決めることができます。

見出しが1つしかない場合、目次は表示されません。

見出しが1つしかないと目次は表示されない
見出しが1つしかないと目次は表示されない

⑥ 目次表示の深さ

デフォルトでは、すべての見出し(H6まで)が目次に表示されますが、ページのコンテンツによっては冗長になる場合もあるので、表示する見出しのレベルを指定することができます。

例えば「H4見出しまで」にした場合、このようにH4のレベルまでの見出しが目次に表示されます。

⑦ 目次ナンバーの表示

目次の前に数字を自動で表示する機能です。

「数字詳細」を選ぶと「1.1.1」のように見出しのレベルによって数字の表記が変わります。

なお、「1. 見出し」のように見出しに直接数字を入れた状態で「目次ナンバーの表示」を有効にすると、このように数字が重複してしまいます。

見出しに数字を入れてしまうと、目次の数字が重複
見出しに数字を入れてしまうと、目次の数字が重複

⑧ 目次の中央表示

目次をページの中央に寄せることができます。

ページの中央に寄せることができる
ページの中央に寄せることができる
てつごろう
てつごろう

ちなみに僕はCSSで幅を100%にしているので、この設定は関係ないんだよ。

⑨ 目次の表示順

広告を表示している時、目次との順番を入れ替える機能です。

※僕の環境ではなぜかこの機能が利用できませんでした。原因が分かったらお知らせします。

⑩ 見出し内タグ

見出しの中に入れたHTMLタグを有効にすることができます。

通常は見出しのスタイルがCSSで定義されていますが、エディター上で見出しの色を赤に変更すると、このように反映させることができます。

見出しの色を直接変えることも可能
見出しの色を直接変えることも可能

3-2. 目次のデザインをカスタマイズ

Cocoon目次カスタマイズ

目次の色や背景など、デザインをカスタマイズするにはCSSの編集が必要です。

デザインをカスタマイズする方法は、他のブロクでたくさん紹介されています。

実現したいデザインから探しやすくするために、下記の記事でまとめましたので、目次をかっこよくしたい方はこちらをご覧ください。

【まとめ】Cocoonで目次カスタマイズ方法を紹介しているサイト

4. サイドバーで追従させる方法

目次をサイドバーに表示して、ページをスクロールした時に追従(スクロールに合わせて目次が追ってくる)させることが可能です。

目次をサイドバーに表示してスクロールした時に追従させる
目次をサイドバーに表示してスクロールした時に追従させる

WordPressのダッシュボードから「外観」→「カスタマイズ」をクリック。

外観からカスタマイズを開く
外観からカスタマイズを開く

続いてウィジェット→サイドバースクロール追従の順にクリックしてください。

ウィジェット
ウィジェット
サイドバースクロール追従
サイドバースクロール追従

「ウィジェットを追加」ボタンをクリックしたら「[c]目次」を選択。

「目次」ウィジェットを追加
「目次」ウィジェットを追加

これだけで目次がサイドバーに表示されて、スクロールに合わせて追従させることができます!

5. まとめ

今回はCocoonで目次を表示する方法、各種設定、サイドバーで追従させる方法を解説してきました。

Cocoonはブログ運営に役立つ機能が豊富で、通常ならプラグインを必要とする機能を簡単に実現することができます。

今後もCocoonの便利な機能を随時ご紹介していきますので、ご期待ください!

コメント

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