AFFINGER6を使っていると、「あれ？この記事、affinger6の目次が表示されない…」なんてこと、ありませんか？せっかく便利なテーマなのに、基本的な部分でつまずくと、ちょっとがっかりしちゃいますよね。
実は、いくつかのポイントさえ押さえれば、誰でもかんたんに解決できるんですよ。
この記事では、AFFINGER6の目次機能でよくある悩みと、その解決策をまるっと解説していきます。
- 目次が表示されない時の「原因」と「解決策」
- 初心者でも安心の「基本的な設定方法」
- 自分好みに変える「デザインのカスタマイズ」
この記事を読み終わるころには、AFFINGER6の目次設定はすっかりマスターできていますね。さあ、悩みをスッキリ解決しにいきましょう！
この記事のポイント
- 目次が表示されない原因
- 目次の基本的な設定と直し方
- 目次のデザインの変え方
- 特定ページで目次を非表示にする方法
affinger6の目次が出ない？原因と直し方
表示されない時に考えられる原因
AFFINGER6で目次が表示されない時、多くの人は「何かの設定を間違えたかな？」と不安になりますが、その原因はいくつかのパターンに絞られます。
理由としては、目次は記事の中にある「見出し」を自動で集めてリストにする機能なので、その「見出し」の数や種類、そして目次を作るためのプラグイン（機能を増やす追加プログラムのこと）の設定が一つでも条件に合わないと、うまく動かなくなってしまうからです。
具体的に、よくある原因をテーブルで見てみましょう。
| 原因の種類 | 具体的な内容 |
|---|---|
| 設定のミス |
|
| プラグインの問題 |
|
| AFFINGER6の仕様 |
|
このように、原因は一つだけではありません。まずは自分の状況がどれに当てはまるかを確認することが、解決への第一歩となるでしょう。
これで解決！かんたんな対処法
目次が表示されない原因がわかれば、解決は意外と難しくありません。
これから紹介する方法を上から順番に試していけば、ほとんどの問題は直るはずです。
難しいコードを触る必要はないので、安心して進めてくださいね。
まず最初に、基本的な設定が正しくできているかを確認しましょう。
WordPressの管理画面から目次プラグインの設定ページを開きます。
例えば「すごいもくじ」なら「目次」、「TOC+」なら「設定」→「TOC+」にあります。
そこで、以下の2点を確認してください。
- 表示条件の見出し数
「〇個以上の見出しがあるとき」という設定が、記事に実際にある見出しの数より多くなっていませんか？例えば、設定が「4」なのに記事の見出しが3つしかなければ、表示されません。記事の見出しを増やすか、設定の数字を小さくしてみましょう。
- 表示するページの種類
「以下の投稿タイプに自動挿入」という項目で、「post」（投稿記事のこと）にチェックが入っているか確認してください。ここにチェックがないと、いくら記事を書いても見出しは表示されません。
設定を変更したら、必ず「変更を保存」ボタンを押すのを忘れないようにしましょう。
次に、プラグイン自体を見直します。
もし「Table of Contents Plus」や「Easy Table of Contents」といった外部のプラグインを使っていて問題が起きているなら、一番のおすすめは、AFFINGER6の購入特典で無料でもらえる「すごいもくじ LITE」に乗り換えることです。
これはAFFINGER6専用に作られているため、相性が良く、不具合が起きにくいという大きなメリットがあります。
多くの解説サイトでも、この公式プラグインが推奨されています。
それでも解決しない場合、一度、目次以外のプラグインを一つずつ「無効化」して、原因となっているプラグインがないか探してみてください。
最後に、AFFINGER6ならではの仕様を確認します。
もし、記事の編集画面で手動で「目次ブロック」を挿入している場合は、そのブロックを記事の導入文のすぐ下、つまり最初の見出しの上に移動させてください。
目次ブロックは、それより下にある見出ししか認識しないため、この位置が最適です。
これらの対処法を試せば、あなたのサイトでもきっと綺麗に目次が表示されるようになるはずです。
焦らず、一つひとつチェックしてみてください。
affinger6の目次をおしゃれに設定する方法
まずは基本の表示設定から始めよう
前のステップで目次が表示されない原因と解決法がわかったので、今度はAFFINGER6で目次を正しく表示させるための、最初の設定から始めていきましょう。
それでは、AFFINGER6ユーザーに一番おすすめされている公式プラグイン「すごいもくじ」を例に、具体的な設定を見ていきましょう。WordPressの管理画面の左側にある「目次」メニューから設定できますね。
| 設定項目 | 内容とおすすめの設定 |
|---|---|
| 表示条件 | 「見出しが〇つ以上ある時に表示」という設定です。見出しが少ない短い記事に目次があっても邪魔なので、「4」つ以上に設定するのが一般的です。 |
| 以下の投稿タイプに自動挿入 | どの種類のページに目次を自動で出すかの設定です。普通のブログ記事に表示したいので、「post」には必ずチェックを入れましょう。「page」（固定ページ）は、会社概要やお問い合わせページなど、目次が不要な場合も多いので、お好みでチェックを外しても大丈夫です。 |
| 最初は目次を非表示 | この項目にチェックを入れると、読者がページを開いた時に目次が閉じた状態になります。しかし、読者は記事に何が書いてあるか一目で知りたいもの。そのため、このチェックは外して、最初から目次が開いている状態にしておくことをおすすめします。 |
| 階層（入れ子） | 見出し2の下にある見出し3を、少し右にずらして親子関係がわかるように表示する設定です。これはチェックを入れておくと、記事の構造がとても分かりやすくなります。 |
これらの設定をして「変更を保存」ボタンを押せば、基本的な準備は完了です。これだけで、あなたが記事を見出しを使って書くたびに、AFFINGER6が自動でかっこいい目次を作ってくれるようになります。
デザインを変えてもっと見やすく
基本的な設定が終わったら、次は目次のデザインをあなたのブログに合わせて、もっと見やすく、もっとおしゃれに変えていきましょう。
結論から言うと、AFFINGER6では色や形をかんたんにカスタマイズでき、ブログの個性を出すことができます。
なぜデザインを変えるかというと、読者がパッと見たときに「見やすいな」「おしゃれだな」と感じると、記事をじっくり読んでくれる可能性が高まるからです。
初期設定のままでも十分機能しますが、少し手を加えるだけで、読者にとっての親切さが大きく変わってきます。
デザインの変更は、WordPressの管理画面から「外観」→「カスタマイズ」と進み、「オプション(その他)」→「目次プラグイン(すごいもくじ)」の項目で行えます。
| カスタマイズ項目 | 具体的にできること |
|---|---|
| デザインスタイル | ここでは目全体のデザインの型紙を選べます。
「デフォルト」の他にも、線と丸で工程を示すような「タイムライン」や、各項目の頭にチェックマークが付く「チェック」など、ユニークなデザインが用意されています。 あなたのブログの雰囲気に合わせて選んでみてください。 |
| カラー設定 | 目次の背景色、枠線の色、文字色などを自由に変更できます。
あなたのブログのテーマカラーと合わせると、サイト全体に統一感が出て非常におしゃれに見えます。
|
| アイコン・数字 | 各項目の先頭に付く数字や、タイトルの横にあるアイコンの色や種類も変えられます。
細かい部分ですが、こういった箇所を調整することで、よりオリジナリティあふれる目次が完成するでしょう。 |
ただし、一つ注意点があります。
デザインにこだわりすぎて、文字が読みにくい色になったり、飾り付けが派手すぎたりすると、逆に見づらくなってしまいます。
あくまで「読者の見やすさ」を一番に考えて、シンプルで分かりやすいデザインを心がけることが大切です。
特定のページで非表示にするやり方
ブログを運営していると、すべてのページに目次が必要なわけではありませんよね。
例えば、短いお知らせや、お問い合わせフォームだけのページに目次はいりません。
結論として、AFFINGER6では、特定のページだけ目次を表示しないようにする設定がかんたんにできます。
その理由は、記事ごとに目次の表示・非表示をコントロールできる機能が備わっているからです。
全体の設定はそのままに、例外を作ることができるので非常に便利です。
やり方は主に2つありますが、初心者の方には特に簡単な最初の方法がおすすめです。
- 投稿の編集画面でオフにする（一番かんたんな方法）
これが一番シンプルで分かりやすい方法です。
目次を非表示にしたい記事の「投稿編集画面」を開きます。
画面の右側、もしくは下の方にスクロールすると、プラグインごとの設定項目があります。
「すごいもくじ」を使っている場合、そこに「この投稿で目次を表示しない」といった趣旨のチェックボックスが存在します。
ここにチェックを入れて更新するだけで、その記事から目次がスッキリ消えます。
これなら、難しい操作は一切必要ありませんね。
- 特定の「見出し」を目次から除外する
これは少し応用的な使い方で、主に有料版の「すごいもくじなどで使える機能です。
「ページ全体の目次は表示したいけど、この見出しだけは目次に入れたくない」という時に使います。
例えば、記事の最後に置いた「まとめ」や「関連記事」といった見出しは、目次に含めなくても良い場合があります。
その場合、見出しブロックを選択した時に表示される設定欄の「目次での表示名」を空欄にすることで、目次からその項目だけを消すことができます。
まずはかんたんな方法1を覚えておけば十分でしょう。
必要なページにだけ目次をスマートに表示させることで、読者にとってさらに分かりやすいサイト作りができます。
【解決】AFFINGER6の目次が出ない！原因と設定方法を4つのQ&Aでズバリ解説：まとめ
Q&Aでまとめますね。
質問（Q）；目次が表示されない一番の原因は何？
回答（A）；設定ミスやプラグインの不具合、ブロックの配置間違いがほとんどです。
質問（Q）；どうすればかんたんに直せるの？
回答（A）；設定を見直すか、テーマ公式の無料プラグインに乗り換えるのが確実です。
質問（Q）；基本設定で大事なポイントって何？
回答（A）；「見出しがいくつあったら表示するか」と「どのページに出すか」を決めることです。
質問（Q）；目次の見た目をおしゃれに変えられる？
回答（A）；はい、管理画面の「カスタマイズ」から色やデザインを自由に変更できますよ。
質問（Q）；特定のページだけ目次を消すことはできる？
回答（A）；はい、記事の編集画面にあるチェックボックス一つで、かんたんに非表示にできます。
この記事では、AFFINGERの便利なナビゲーション機能に関する設定やトラブル解決法をご紹介しました。これでもう、表示のことで悩むことはなくなったでしょう。見やすい案内を設置することは、記事を読んでくれる人にとっても親切ですよね。ちょっとした設定で、あなたのブログがもっと魅力的になりますよ。ぜひ、今回の内容を活かしてみてくださいね。最後まで読んでいただき、ありがとうございました。