CocoonからAFFINGERへ移行した時、H2・H3見出しが白くなって見えなくなるという事件があった。
そこを直して、「よし、これで記事は元通りだな」と思った。
今度は、目次がない。
Cocoonを使っていた頃は普通に表示されていたので、もはや目次の存在自体を意識していなかった。
あるのが当たり前。
くらいの感じだった。
テーマをAFFINGERへ変更したら、それが消えた。
結論から言うと、現在このブログではSUGOI MOKUJI（すごいもくじ）LITEを使って目次を表示している。
俺が最初に設定したのはAFFINGER6 EX時代。
現在はAFFINGER7 EX＋子テーマまでアップデートしているけど、SUGOI MOKUJI LITEは今もそのまま使っている。
この記事では、CocoonからAFFINGERへ移行して目次が消れた時、俺が実際にどう設定したのかをまとめる。
なお、現在販売されているAFFINGER7にもSUGOI MOKUJI LITEは専用プラグインとして付属している。公式では価格外の無料特典という扱いで、LITE版自体はサポート対象外になっている。
CocoonからAFFINGERへ変えたら目次が消えた
まず、AFFINGERへ変えたから過去記事の見出しが消えたという話ではない。
H2やH3そのものは残っている。
ただ、Cocoonで使っていた目次機能が、そのままAFFINGER側へ引き継がれるわけではなかった。
Cocoon時代は、記事を書く。
H2、H3を入れる。
勝手に目次が出る。
という状態だったので、「目次って自分で設定するものだったんだ」くらいの感覚だった。
AFFINGERへ移行したあと記事を見て、「あれ？」となった。
テーマを変えるというのは、見た目だけ着せ替える話ではない。
テーマ側で担当していた機能も変わる。
これ、実際に移行してかなり実感した。
AFFINGERではSUGOI MOKUJI LITEを使うことにした
AFFINGER環境で目次をどうするか調べて、使うことにしたのが、
SUGOI MOKUJI LITE。
俺がAFFINGERを導入した環境にはプラグインが入っていたものの、最初は有効化されていなかった。
そこでWordPressのプラグイン画面から有効化。
有効化すると、目次用の設定項目が使えるようになった。
現在のAFFINGER7でも、SUGOI MOKUJI LITEはAFFINGER7に付属する専用プラグインの一つとして案内されている。
PRO版も存在するけど、俺は今のところLITE版を使っている。
SUGOI MOKUJI LITEはどのAFFINGERを買えば付いてくる？
ここ、俺自身も最初は分かりにくかった。
名前に「SUGOI MOKUJI」と付いているので、
別売りプラグインを買わないと使えないのか？
と思うかもしれない。
現在販売されているAFFINGER7では、通常版AFFINGER7を購入するとSUGOI MOKUJI LITEが特典として付いてくる。
2026年9月現在の主な商品を整理するとこんな感じ。
| 商品 | 価格 | SUGOI MOKUJI |
|---|---|---|
| AFFINGER7通常版 | 14,800円 | LITE付属 |
| STRATEGY PACK3（AFFINGER7 EX） | 39,800円 | LITE付属 |
| AFFINGER7 EX環境セット | 49,800円 | LITE付属 |
| SUGOI MOKUJI PRO | 5,980円 | PRO単体 |
通常版AFFINGER7にも、目次を自動生成するSUGOI MOKUJI LITEが現在特典として同梱されている。STRATEGY PACK3やEX環境セットにもLITE版が含まれている。
つまり、
目次を使いたいからEXを買う必要はない。
ここは結構大事。
俺自身は現在AFFINGER7 EXを使っているけど、目次目的だけなら通常版でいい。
AFFINGER7通常版にはSUGOI MOKUJI LITE以外にも、
- AFFINGERブロック
- AFFINGERタグ管理マネージャー4 LITE
- PVモニター2 LITE
などの専用プラグインも現在付属している。
ただし、公式ではLITE版について無料特典扱いで、予告なく配布終了する可能性があるとも案内されている。
なので、この記事を読む時期によって内容が変わっている可能性はある。
これからAFFINGER7を購入する場合は、販売ページの「専用プラグイン」の項目を一度確認してほしい。
俺が実際に設定したSUGOI MOKUJI LITEの内容
AFFINGER6 EXへ移行した当時、俺はこんな感じに設定した。
| 項目 | 俺の設定 |
|---|---|
| 表示位置 | 最初の見出しの前 |
| 表示条件 | 見出しが2個以上 |
| 自動挿入 | 投稿に表示 |
| 階層表示 | ON |
| 対象 | H2・H3 |
| 挿入方法 | 基本は自動挿入 |
現在のバージョンでは設定画面の文言や配置が変わっている可能性があるけど、考え方自体は今もほぼ同じ。
記事を開いたら、最初のH2へ行く前に目次がある。
これが俺には一番自然だった。
見出しが一つしかない短い記事なら、そもそも目次はいらない。
逆にH4、H5まで全部表示すると、記事によっては目次だけでかなり長くなる。
なので俺は、基本的にH2・H3まで。
これで十分だと思っている。
SUGOI MOKUJI LITEは現在も、管理画面で表示条件などを設定できるほか、目次表示箇所より下に設定数以上の対象見出しがある場合に表示される仕様になっている。
自動挿入なら毎記事「目次ブロック」を置かなくていい
最初、ちょっと分かりにくかったところ。
SUGOI MOKUJI LITEにはGutenberg用の目次ブロックもある。
だから、「これ全部の記事に一個ずつ入れるの？」と思った。
そんなことはなかった。
管理画面で自動表示を設定しておけば、自動で目次を出せる。
公式の簡略マニュアルでも、一度目次管理画面で設定すれば自動表示でき、Gutenbergの専用ブロックは好きな場所へ挿入したい場合に使えると案内されている。
なので俺は基本、自動挿入。
特定の記事だけ目次位置を変えたい時なんかは、ブロックを使う。
毎回手作業で置く必要がないのは楽。
記事増えるからね。
今この記事を書いているブログですら、昔の俺が思っていたよりだいぶ記事が増えた。
毎回やってられん。
目次は復活した。でも今度はデザインが気になった
設定した。
目次が出た。
よし。
とはならなかった。
最初に見た時、
地味だな。
と思った。
Cocoon時代の目次に慣れていたこともあって、SUGOI MOKUJI LITEの初期状態は俺にはかなりシンプルに見えた。
記事本文の文字と目次が、「俺たち同じ文章ですけど？」みたいな顔をして並んでいる。
もう少し、ここ目次ですよ。
と分かってほしかった。
当時はそこでCSSを使って、
- 背景を薄くする
- 内側の余白を増やす
- 目次タイトルを少し目立たせる
- 本文とは別のボックスに見えるようにする
といった調整をした。
今ならCSSを書く前にカスタマイザーを確認する
ただ、ここは今振り返ると一つ注意がある。
H2の時にも同じことをやったんだけど、
昔の俺は、
気に入らない
→ CSS
が早すぎた。
SUGOI MOKUJI LITEは、現在のAFFINGERではカスタマイザーから色を変更できる。
公式マニュアルでは、カスタマイザー → その他 → 目次プラグイン
からカラー変更が可能と案内されている。文字色、リスト数字・アイコン色、下線など、一部のデザインもカスタマイザーと連動する。
なので今なら、
① 標準設定でどこまでできるか確認
② それでも足りない部分だけCSS
の順番にする。
これ、本当に大事。
CSSを積み上げると数か月後、
/* なんか必要だった気がする */みたいなコードが増えていく。
いやコメントくらい書け。
昔の俺。
現在の俺ならSUGOI MOKUJI LITEをこう設定する
SUGOI MOKUJI LITEはどこからインストールする？
AFFINGER7を有効化しただけで、SUGOI MOKUJI LITEまで勝手に有効になるわけではない。
現在の公式マニュアルでは、購入した商品フォルダの特典フォルダに入っているSUGOI MOKUJI LITEのZIPファイルを、
WordPress管理画面
→ プラグイン
→ 新規プラグインを追加
→ プラグインのアップロード
からインストールし、有効化する流れになっている。購入ユーザー限定ページからダウンロードできる場合もある。
俺がCocoonからAFFINGERへ移行した時も、
プラグインはあるのに有効化していなかった。
だから目次が出ない。
当たり前である。
AFFINGERへ移行したのに目次が表示されない人は、設定をいじる前にまず、
SUGOI MOKUJI LITE自体がインストール・有効化されているか
を確認した方がいい。
SUGOI MOKUJI LITEの基本設定はどこでする？
プラグインを有効化すると、目次の基本設定ができるようになる。
ここでは、
- 何個以上の見出しがあれば表示するか
- 階層表示するか
- スムーズスクロールを使うか
- どの見出しレベルを表示するか
- 自動挿入するか
などを設定できる。公式マニュアルでも基本設定から表示条件や見出しレベルを変更できると案内されている。
俺の場合は、
| 設定 | 俺の使い方 |
|---|---|
| 表示位置 | 最初のH2前 |
| 表示条件 | 見出し2個以上 |
| 対象 | H2・H3 |
| 階層表示 | ON |
| 投稿 | 自動挿入 |
| H4以下 | 基本表示しない |
という状態。
なぜH2とH3だけにしているのか
これは完全に俺の好み。
H4まで目次へ入れると、記事によっては、
目次を読むための目次が欲しい。
くらい長くなる。
特にこのブログは、映画レビューや長めのコラムで見出し数が増えることがある。
だから、
H2＝大きな話題
H3＝その中身
まで分かれば十分。
H4以下は本文を読んでくれ。
という考え。
短い記事についても、見出しが1個しかないのに、
目次
- 本文
みたいなのはさすがにいらない。
なので「見出し2個以上」で表示するようにしている。
目次のデザインはどこで変更した？
ここも最初かなり分かりにくかった。
SUGOI MOKUJI LITEの色や基本的なデザインは、現在、
外観
→ カスタマイズ
→ その他
→ 目次プラグイン
から変更できる。
ここでは主に、
- 文字色
- リストの数字・アイコン色
- 下線
- 一部の目次デザイン
などを調整できる。
さらに、目次内で使われる一部アイコンの色については、
カスタマイザー
→ オプション（その他）
→ 記事内のWebアイコン
の設定が反映される。
第一階層の下線などは、オプションカラー → 目次プラグイン（すごいもくじ）側の設定が関係する場合もある。
これ、初見ではまず分からん。
目次なんだから目次設定だけで全部終わらせてくれ。
とはちょっと思う。
最初はCSSで目次を調整していた
俺がAFFINGERへ移行した当時は、SUGOI MOKUJI LITEを表示したあと、「思ったより地味だな」と感じた。
そこで、
- 背景色を付ける
- 余白を広げる
- 目次タイトルを強調する
- 本文とは別の箱っぽくする
ために追加CSSを使った。
ただ、H2・H3の文字色でやらかした時と同じで、今ならまずAFFINGERの標準設定を確認する。
標準設定でできるところまで作る。
↓
足りない部分だけCSS。
この順番。
CSSから入ると、そのうち追加CSS欄が、
遺跡。
になる。
SUGOI MOKUJI LITEが表示されない時に確認すること
AFFINGERへ移行して、
「設定したのに目次が出ない」
となった場合、今ならこの順番で確認する。
- SUGOI MOKUJI LITEがインストールされているか
- プラグインが有効化されているか
- 投稿が自動挿入対象になっているか
- 記事内に設定数以上の見出しがあるか
- H2・H3など対象見出しが正しく指定されているか
- キャッシュが残っていないか
- JavaScript系プラグインや高速化設定と競合していないか
公式でも、目次表示箇所より下に設定数以上の対象見出しが必要で、JavaScriptを使うためプラグインやカスタマイズとの干渉が起こる場合があると案内されている。
また、読み込みに少し時間がかかる場合は「JSをヘッダーで読み込む」という設定でタイムラグを軽減できる。ただし公式では計測が不安定になる可能性についても注意書きがある。
なので、
表示が0.5秒遅い！とりあえず全部ON！
みたいなのはやらない方がいい。
俺なら問題がなければそのまま使う。
LITE版とPRO版の違いは？
SUGOI MOKUJIにはPRO版もある。
ただ、俺は現在LITE版。
普通に、記事の見出しから目次を作って、自動表示する。くらいなら、今の俺はLITEで困っていない。
SUGOI MOKUJI PROは現在5,980円（税込・買い切り）で単体販売もされている。
LITEとの大きな違いは、
| 機能 | LITE | PRO |
|---|---|---|
| 目次自動生成 | ○ | ○ |
| H2・H3などの表示設定 | ○ | ○ |
| 基本デザイン変更 | ○ | ○ |
| 記事ごとの細かい設定 | △ | ○ |
| 目次クリック計測 | × | ○ |
| 目次用に見出し名を変更 | × | ○ |
| サイドバー追尾目次 | × | ○ |
PROの特徴として公式が特に押し出しているのが、「どの目次が何回クリックされたか分かる」こと。
これはブログ改善には面白い。
例えば、「iPhone 12 Proを今買う価値」というH2ばかり押されていたら、
そこを読みに来てる人が多いんだなと分かる。
ただ俺自身は現状、そこまで目次を分析していない。
なのでLITE版を使っている。
普通に、
「記事に目次を表示したい」
「H2・H3へ飛べればいい」
なら、少なくとも俺の使い方ではLITEで困っていない。
逆に今後、Search ConsoleやGA4だけでなく、
記事の中でどこを読者が見たがっているのか
まで分析したくなったらPROは面白そう。
SUGOI MOKUJI LITEで気をつけたいこと
俺の環境では普通に使えているけど、公式を見るといくつか注意点もある。
SUGOI MOKUJI LITEはJavaScriptを使用し、環境によって読み込みにタイムラグが出ることがある。
また、投稿・固定記事向けで、トップページへの目次表示はPRO版の対応範囲。
ほかのプラグインやJavaScript系カスタマイズと干渉する可能性も公式に案内されている。
なので、設定したのに目次が出ない。
という場合は、
対象見出し数。
自動挿入設定。
JavaScript。
キャッシュ。
他プラグインとの干渉。
あたりも確認候補になる。
ただ俺の場合はもっと単純。
有効化してなかった。
そりゃ出ない。
CocoonからAFFINGERへ変えると「当たり前だった機能」を再確認することになる
目次で一番感じたのはこれ。
Cocoonを使っていると、いろんな機能が最初から揃っている。
だから、どこまでがWordPressで、どこからがCocoonなのか
初心者の頃はあまり意識していなかった。
AFFINGERへ変えて、
見出し。
目次。
スマホメニュー。
トップページ。
一つずつ設定し直したことで、「あ、これテーマ側の機能だったのか」と知った。
面倒ではあった。
でも逆に、一度理解すると自分で触れるようになる。
現在このブログはAFFINGER7 EX＋子テーマで運用しているけど、Cocoon時代よりかなり細かく自分好みにしている。
AFFINGERへ移行した時に何をやったかについては、こっちの記事でまとめている。
ちなみにAFFINGER移行時には、目次だけじゃなくH2・H3の文字が白くなって見えなくなるということもあった。
そちらは別記事。
まとめ｜SUGOI MOKUJI LITEで十分だった
CocoonからAFFINGERへ移行して、目次消えたな。
から始まったSUGOI MOKUJI LITE。
俺の場合は、
有効化。
自動挿入。
H2・H3を対象。
見出し数を指定。
デザインを少し調整。
これで現在まで使っている。
AFFINGER7では現在、SUGOI MOKUJI LITEが専用プラグインとして付属しており、自動表示だけでなく目次ブロックを使った任意位置への表示にも対応している。
PRO版もあるけど、普通に目次を出したい。
という今の俺にはLITE版でも足りている。
CocoonからAFFINGERへ移行して、「目次どこいった？」となった人は、一度確認してみてほしい。
テーマ変えたら消えた。
というより、AFFINGER側で改めて目次を作ればいい。
という話だった。
AFFINGERをこれから使う人へ
ここまで読む人は、すでにAFFINGERを使っている可能性の方が高いと思う。
なのでAFFINGER自体を強く勧める記事ではない。
ただ、俺自身はCocoonからAFFINGERへ移行し、現在はAFFINGER7 EX＋子テーマを使ってこのブログを運営している。
設定項目が多くて最初は普通に苦戦した。
一方で、ブログを続けて
AdSense。
Amazon・楽天。
アフィリエイト。
CTA。
アクセス解析。
みたいなところまで触るようになってからは、自分にはAFFINGERの方が合っている。
現在販売されているAFFINGER7には、SUGOI MOKUJI LITEのほか、AFFINGERブロック、タグ管理マネージャー4 LITE、PVモニター2 LITEなどの専用プラグインも付属している。価格は14,800円。
これから導入を考えている人はこちら。
【PR｜AFFINGER7通常版の詳細を見る】
※俺自身はACTION PACK3（AFFINGER6 EX対応）を購入し、アップデートして現在AFFINGER7 EXを使用しています。
