WordPressのCocoonというテーマでブログを作り始めたけど
- 目次の作り方（設定方法）がわからない
- 設定したのにうまく表示されない
- いろんなところに目次を表示したい
- 特定のページだけ非表示にしたい
- 目次をカスタマイズしてみたい
僕も最初はワードプレスもコクーンも全然使い方がわかんなくて、目次ってどうやるんだろ？っていろいろ調べました。
Cocoonが勝手に目次を作ってくれるなんて思ってもいなかったです。目次作成プラグインなんていらないんだね
本記事では、冒頭に書いたようなことでお悩みの方にはとても役立つこと間違いなしです。
目次機能が搭載されているコクーンの設定からカスタマイズまでそのすべてをわかりやすく画像を付けて解説していきます。
目次はとても重要な要素ですので、しっかり理解してあなたのブログに活かしてくださいね
目次の基本設定
そしたらまずは目次の基本的な設定方法から解説していきます。この記事を見ながらあなたも実際にやってみてください。
Cocoon設定の「目次」
ワードプレスの編集画面（ダッシュボード）からCocoon設定→目次と進んでみましょう。
この目次のページの上から順番にその設定項目にどんな意味があるのか説明していきます。
目次の表示
目次を表示するにチェックしていれば、目次が表示されるようになります。だから目次を使いたい人は絶対チェックしないといけません！
表示ページ
目次をどういうページに表示させるか決められます。タグページは目次いらねって思ったらそこだけチェック外しましょう。
投稿ページの1記事目だけ目次を非表示にしたい！
こういう要望についても対応できます。あとで説明がありますので、そこまでお待ちください。
目次タイトル
目次はバックジョイのレビュー記事から引用
目次タイトルに入力した言葉が実際に目次の一番上に表示されます。
僕はシンプルに「目次」だけど「タップできる目次」とかにしてアピールする人もいるよね
目次の開く/閉じる
まず「目次の表示切替機能を有効にする」にチェックをいれると目次タイトルの横に表示切替用の言葉が出てきます。その言葉は自由に決めましょう。
その文字をタップ/クリックすると、目次が開いたり閉じたりと切り替わるようになってます。
そして「最初から目次内容を表示する」にチェックを入れると目次の中身が見えてる状態で表示されます。
チェックを入れなければ中身は見えず「タイトル」と「開く」だけ見えている状態になっています。
表示条件
目次を表示する条件を決めます。見出しの数がいくつ以上なら目次を作りますか？という質問ですね。
2つ以上でいいと僕は思います
「見出しって何」っていうあなたは後で説明しますのでお待ちください。画像だけおいときますね。
目次表示の深さ
どの大きさ（深さ）の見出しまで目次に表示させますか？という質問です。
あんまり深いとこまで全部表示させるとめっちゃ長い目次になるので、H2かH3くらいにしといた方がいいです。
目次ナンバーの表示
目次の項目の頭に数字のせますかどうしますか？という質問です。
目次の表示位置（左端か中央か）
目次をメインカラム（本文が表示される部分）の真ん中に表示するか、左はしに表示するかを決めるためのチェックです。
目次の表示順
目次と広告（グーグルアドセンス）の表示する順番どうしますか？という話です。広告のクリック率に影響が少なからずあると思います。
見出し内タグ
見出しで改行（<br>タグ）とかしてるときに目次でも改行するなら有効。別に必要ないならチェックしないでOK
まず見出し内にタグをめったに入れないだろうからチェックしなくていいと思います
以上でCocoon設定は終了です！これで普通に記事を書けば目次は表示されるはず‼一度試してみてください。
それでも目次が表示されない場合は次の項目をチェックしましょう。
設定しても目次が表示されないとき
Cocoon設定で目次を設定しても記事内で目次が表示されないときは、下の2つが原因のことが多いです。当てはまることがあったら、修正してみてください
プラグインが悪さをしている
「Table of Contents Plus」などの目次を自動で生成するプラグインを有効化している場合、目次が表示されないことがあります。
Cocoonに目次のプラグインは不要なので、無効にしてみてください
逆に、プラグインの機能を使って目次を表示したいときはCocoon設定で目次を表示しないようにチェックを外し、プラグインを有効化しましょう。
見出しを使っていない
Cocoonの目次機能は、H見出しをもとに作成されます。記事の中でH見出しを使っていない場合は目次は表示されません！
H見出しは下の画像のように投稿画面で追加できます。
H見出しはH1～H6まであり、数が小さいほど重要度が高いです。
- H1:タイトル
- H2:大項目
- H3:中項目
- H4:小項目
- H5,H6ほぼ使わない
H見出しは単なる装飾ではなく、記事構造的にとても重要なものです。キーワードを入れ込んだり、項目数や項目の大きさをよく考えて使う必要があります。
見出しについての詳細は下に外部リンクを貼っておきますので、そちらをご覧ください。
外部リンク見出しタグの使い方と絶対に知っておくべき注意点
1記事ずつ個別に目次の表示/非表示を設定する
Cocoonには、Cocoon設定の目次で設定したこと以外に1記事ずつ個別に目次の表示/非表示を設定する機能があります。
投稿ページ/固定ページ共通
やり方は簡単で、投稿ページも固定ページでも一緒です。
- 記事の編集画面を開く
- 右側のサイドバーに注目する
- サイドバーが出てないときは右上の歯車⚙ボタンを押す
- 文書のタブにする
- 真ん中くらいまでスクロールする
- ページ設定の項目を確認
- □目次を表示しないにチェックしたりしなかったりする
画像で詳細を見てみましょう
基本的に全部の記事で目次を表示するけど、特定のページで目次を表示したくないときはこの機能を使いましょう。
逆に、基本的には全部の記事で目次を表示しないけど、特定のページで目次を表示したいときは？
その時は、Cocoon設定の「目次を表示する」チェックを外し、特定のページだけショートコードで表示すればOKです。
ショートコードは次の項目で説明しますね。
ショートコードを使って本文の好きな場所に目次を表示する
ショートコード機能を使って目次を表示することもできます。
やり方は超簡単！
[toc]
この文字を目次を入れたいところに打ち込むだけです。試しにやってみた画像を下にはります。
このショートコードのオプション機能として、見出しの深さをどのくらいにするか？を指定することができます。
[toc depth=2]
みたいに書くと、H2見出しまでの目次ができます。数字は2か3がいいと個人的には思います。
あなたがもっと表示したいのであれば、4とか5とかもっと大きい数字を入れてみましょう。
その代わり、記事構造がちゃんとｈ４、ｈ５等を使ってきれいになっていないとだめですよ
サイドバーに目次を表示する
僕はサイドバーに目次を表示する機能を使っています。PCで見ているあなたは実際に見えていますよね。
やり方は結構簡単です。ウィジェットのサイドバー追従のところに目次を突っ込むだけ。
詳細については別記事に書いていますので、やってみたい方はそちらを見ながら設定してみてください。
関連記事【Cocoon】サイドバーで目次を追従させる方法【初心者向け】
デザインをCSSでカスタマイズする
僕の目次デザインはCSSでカスタマイズして自分の好きなようにしています。
この目次、僕がいいなと思うところは
- H2とH3見出しの文字の濃さが異なるので見やすい
- 見出しが改行されたときにきっちりそろう
- 自分のブログの色に合わせることができる
- 地味に点線の仕切りが見やすさに貢献している
詳細については別記事を書いていますので、カスタマイズしてみたい方はご覧ください
関連記事【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
Cocoonの目次を使いこなそう
本記事では、【Cocoon】目次が表示されない⁉作り方完全解説ということで
- 目次の設定方法
- 目次がうまく表示されないときの対処方法
- いろんなところに目次を表示する方法
- 特定のページだけ非表示にするやり方
- 目次のカスタマイズ
について解説してきました。この記事を読み込めばCocoonの目次機能は網羅できていると思います。
ぜひあなたのブログでもCocoonの目次機能を使いこなして、ユーザーにやさしいブログを心がけてください！
ありがとうございました
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント