lightningブログに目次を入れるなら？プラグインとVK Blocksの使い分け

長い記事を書いているのに、lightningに変えたら目次が出なくなって困っていませんか。

lightningでは「目次プラグイン」か「VK Blocks Pro」を使えば、ほとんどのケースでかんたんに目次を設置できます。

読み終わるころには、自分のブログに合った「lightningでの目次の作り方」がイメージできて、そのまま設定に取りかかれるはずです。

lightningで目次を入れる前に知っておきたいこと

lightningテーマの種類と目次機能の違い

まずは、よくある構成パターンをざっくり表にしてみます。

構成例	費用	目次機能の特徴	こんな人向け
無料版lightning＋無料目次プラグイン	無料	定番プラグインで柔軟に目次を作れる	まずはお金をかけずに試したい人
lightning G3 Pro Unit＋VK Blocks Pro	有料	ブロックエディタ内で完結、デザイン調整もしやすい	企業サイトや本気のブログ運営
別テーマ＋標準の目次機能	テーマによる	一部テーマでは目次機能を標準搭載	すでに他テーマを使っていて不満がない人

lightningで目次を作る方法は、ざっくり分けると次の3つです。

• 目次プラグインを入れる（Table of Contents Plus、Easy Table of Contentsなど）
• VK Blocks Proの「目次」ブロックを使う
• HTMLアンカーを使って、自作リンクで目次を作る

趣味のブログなら、まずは無料の目次プラグインで十分です。一方、クライアントワークや企業サイトなど「デザインの統一感」「運用のしやすさ」が重要な場合は、VK Blocks Pro側の目次ブロックを使ったほうが管理しやすいと私は感じています。

目次があると読者とSEOにどう役立つか

「とりあえずみんな入れているから」ではなく、目次の役割も一度整理しておきます。

効果	説明	具体的なイメージ
記事全体が一目で分かる	見出しの一覧で内容をざっと確認できる	ネットショップの商品一覧のように、全体を俯瞰できる
読者が迷子にならない	興味のある場所にジャンプして読める	長いマニュアルでも、必要な章だけすぐ開ける
検索エンジンにも親切	見出し構造がはっきりして、ページの内容を理解しやすくなる	クローラーが記事の構造を正しく読み取りやすい

特にlightningは、会社サイトやサービス紹介サイトでもよく使われています。サービス紹介ページや料金ページなどは情報量が多くなりがちなので、目次があるだけで読みやすさがぐっと変わります。

読者にとっても検索エンジンにとってもメリットがあるので、「長めの記事＝目次はほぼ必須」くらいの感覚でいて大丈夫です。

lightningで目次を表示する3つの基本パターン

パターン1：無料プラグインでlightningに目次を設置する

いちばん手軽なのが、無料の目次プラグインを入れる方法です。代表的なものを表で整理しておきます。

プラグイン名	特徴	難易度	向いているサイト
Table of Contents Plus	歴史が長く、情報が多く安心感がある	ふつう	ブログ全般
Easy Table of Contents	ブロックエディタ対応で見た目も整えやすい	やさしい	初心者向けブログ
Rich Table of Contents	デザインがきれいで日本語の解説も多い	ふつう	見た目も重視したいブログ

基本的な流れはどのプラグインでもほぼ同じです。

• WordPress管理画面の「プラグイン ＞ 新規追加」を開く
• プラグイン名で検索して「今すぐインストール」→「有効化」
• 各プラグインの設定画面で「どの投稿タイプに自動挿入するか」「何個以上見出しがあるときに目次を出すか」を決める

lightning側で特別な設定が必要なことは少なく、テーマはそのままでOKなケースがほとんどです。ブログ運営がメインなら、このパターンがいちばん現実的だと思います。

パターン2：VK Blocks Proの「目次」ブロックを使う

lightningを本格的に使い込みたい人は、VK Blocks Proの目次ブロックもかなり便利です。

ざっくり特徴をまとめると、こんなイメージです。

「会社サイトもブログも全部lightningでそろえたい」「プラグインを増やしすぎたくない」という場合は、目次もVK Blocks側に寄せてしまうと管理がシンプルになります。特に複数人で更新するサイトでは、「このブロックを入れると目次が出ます」と伝えるだけで済むのが大きなメリットです。

パターン3：シンプルに自作リンクで目次を作る

実は、プラグインもブロックも使わずに、シンプルな目次を自作する方法もあります。やり方はとても単純です。

• 各見出しに「HTMLアンカー」や「id属性」を付ける
• 記事の冒頭に箇条書きでリンクリストを作る

見た目は質素ですが、次のようなメリットがあります。

• 表示が重くなりにくい
• 余計な機能を増やさずに済む
• テキストだけのシンプルなデザインが好きな人にも合う

私は長期運用する企業サイトで、「どうしてもプラグインを増やしたくない」というケースのときにこの方法を使うことがあります。丁寧に作れば、手作りの目次でも十分実用的です。

lightning×目次プラグインの具体的な設定手順

Table of Contents Plusの基本設定とおすすめ値

まずはよく迷いやすい項目を、表で整理しておきます。

設定項目	おすすめの考え方	目安の設定値
自動挿入するコンテンツタイプ	ブログなら「投稿」にチェックする	投稿のみにチェック
目次を表示する位置	本文の流れが途切れにくい位置を選ぶ	「最初の見出しの前」
見出しとして使うタグ	基本はh2〜h3にしぼる	h2とh3（慣れたらh4追加）
目次を表示する条件	厳しくしすぎない	見出しが3つ以上

設定画面でつまずきやすいポイントは、だいたい次の3つです。

• 「投稿」「固定ページ」のどちらに目次を出すか決めていない
• 「見出しレベル」のチェックを全部外してしまう
• 「◯個以上見出しがあるときだけ目次を表示」の数を大きくしすぎる

ひとまず上の表どおりに設定しておけば、lightningでも違和感なく目次が表示されるはずです。慣れてきたら、自分のブログの傾向に合わせて少しずつ調整していくイメージでOKです。

見出しの書き方と階層の作り方

どんなにいいプラグインを入れても、見出しの付け方がごちゃごちゃだと目次も読みにくくなります。lightningのすっきりしたデザインを活かすためにも、見出しの階層はシンプルにそろえておきましょう。

よくある失敗は、いきなりh3から使い始めてしまうパターンです。この場合、目次プラグインの設定が「h2とh3を拾う」になっていると、「h2がないから変な目次になる」という状態になりがちです。

私も最初のころはよく混乱していたので、「まずh2を決めてから、必要に応じてh3を増やす」と意識するだけでだいぶスッキリしました。見出しが整理されれば、結果的にlightningで作る目次も自然と読みやすくなります。

lightningで目次が表示されないときのチェックリスト

プラグイン側でよくある原因

まずは目次プラグインの設定を見直します。代表的なトラブルを表にまとめました。

症状	主な原因	すぐできる対処
目次自体が出てこない	見出しの数が条件に足りない、自動挿入する投稿タイプがオフ	見出しを3つ以上に増やす／投稿にチェックを入れる
不思議な場所に目次が出る	テーマのテンプレートとの相性、位置設定が微妙	「最初の見出しの前」に変更してみる
一部の見出しだけ目次に入らない	見出しタグではなく、pタグ＋太字になっている	かならず「見出しブロック」でh2/h3を指定する
目次の文字化け・崩れ	CSSや別プラグインによる装飾の競合	いったんプラグインのデザイン設定をデフォルトに戻す

特に多いのが、「本文中は見出しっぽい太字なのに、実際は見出しタグではない」というケースです。ブロックエディタなら、見出しにしたいところは必ず「見出しブロック」を使ってください。そうしないと、どれだけ設定してもlightningの目次には反映されません。

テーマ側で起きやすい落とし穴

プラグイン側に問題が見当たらないときは、テーマ側も軽くチェックします。

• 子テーマを使っている場合、単一記事テンプレートをカスタマイズしていないか
• 広告コードやアフィリエイト用のコードを、本文のかなり上に入れていないか
• 別のプラグインが、見出しや本文の構造を大きく書き換えていないか

特に広告コードを本文の先頭付近に入れていると、目次プラグインが「ここに目次を挿し込むのは危なそう」と判断して、位置をずらすことがあります。

私のサイトでも同じようなことがあり、そのときは次のような調整で落ち着きました。

• 広告は少し下に移動する
• 目次の表示位置を「最初の見出しの前」に変える

これだけで、lightningでも違和感なく目次が表示されるようになったので、心当たりがある方は試してみてください。

デザイン調整でlightningの目次をもっと見やすくする

色・枠線・余白を整えて読みやすくする

まずは、見た目の基本を整えましょう。

調整ポイント	ねらい	具体例
背景色	本文とのメリハリをつける	ごく薄いグレーや薄い青で囲う
枠線	目次のエリアをはっきりさせる	1pxのシンプルな罫線をつける
余白（パディング）	文字がぎゅうぎゅうに見えるのを防ぐ	上下左右に少し広めの余白をとる
見出しの文字サイズ	本文とのバランスをとる	目次の文字は本文より少し小さめにする

プラグインでもVK Blocks Proでも、CSSを少し追加するだけで印象がかなり変わります。「がっつりデザイン調整するのは苦手」という人でも、次の2つだけ意識すれば十分です。

• 背景色を付けて、目次のエリアを分かりやすくする
• 余白を増やして、窮屈に見えないようにする

この2点を整えるだけで、lightningのシンプルさを保ちながら、目次がぐっと読みやすくなります。

スマホで邪魔にならない目次配置のコツ

多くの読者はスマホで記事を読みます。スマホでのlightningの目次は、次のポイントを意識するとストレスが減ります。

• 記事の一番上ではなく、「リード文のあと」に目次を置く
• 目次が長くなるときは、最初からたたんでおけるタイプのプラグインを選ぶ
• 見出しの階層はh2とh3までにして、極端に段差をつけない

私の体感では、目次がいきなり画面いっぱいに広がると、それだけで「読むのが大変そう」と感じる人が多いです。lightningは余白がきれいなテーマなので、目次もコンパクトにまとめてあげると、全体の雰囲気が崩れません。

lightning×VK Blocks Proで目次を作るときのポイント

目次ブロックの設定をざっくり理解する

VK Blocks Proの目次ブロックには、だいたい次のような設定があります。

設定項目	内容	ポイント
対象見出しレベル	どのレベルの見出しを目次に含めるか	h2〜h3を基本に、必要に応じてh4
表示スタイル	番号やアイコン、インデントなどの見た目	サイト全体のデザインに合わせて選ぶ
タイトル	「目次」「Contents」などのラベル	日本語か英語か、サイトのトーンで決める
開閉設定	最初から開くか、たたんでおくか	スマホ表示を意識して決める

ブロック単位で設定できるので、次のような使い分けも簡単です。

• 長文の解説記事ではしっかりした目次を表示
• 軽いコラムでは、シンプルな目次にして主張を弱める

lightningのパターンライブラリから、目次付きのセクションを呼び出して少しカスタマイズする、というやり方もおすすめです。ゼロから作るより、かなり時短になります。

複数人で更新するサイトならVK Blocks Proが楽

企業サイトやメディアサイトでは、複数の担当者が記事を更新することが多いですよね。その場合、次の理由でVK Blocks Pro側に目次を寄せてしまったほうが運用が楽になります。

私が関わったチームでも、最初は目次プラグインとVK Blocksが混在していて、「このページの目次はどこで設定するんだっけ？」という質問がよく来ていました。あとから少しずつVK Blocks側の目次に統一していったところ、そうした問い合わせがかなり減ったので、チーム運用には特におすすめです。

よくある質問

Q1. lightningだけでは目次は作れませんか？

A. テーマ単体では、いわゆる自動生成タイプの目次機能は用意されていません。目次プラグインを入れるか、VK Blocks Proの目次ブロックを使うのが現実的です。

どうしても追加の機能を入れたくない場合は、HTMLアンカーを使ったシンプルな自作目次という選択肢もあります。ただし、記事数が増えるほど手作業が大変になるので、長期的にはプラグインかVK Blocks Proを使ったほうが楽だと思います。

Q2. lightningで目次を入れると、SEO的に有利になりますか？

A. 「目次を入れただけで順位が上がる」というような直接的な効果はありません。ただ、読者が記事を読みやすくなるぶん、結果的に滞在時間が延びたり、離脱率が下がったりすることはあります。

lightningはもともと構造がきれいなテーマなので、しっかり見出しを設計して目次で整理してあげると、記事全体の評価を高める手助けにはなります。あくまで「読みやすさアップのための一手」と考えると良いです。

Q3. どのプラグインを選べば、lightningとの相性がいいですか？

A. 迷ったら、まずはEasy Table of ContentsかTable of Contents Plusから試してみるのがおすすめです。どちらも利用者が多く、lightningとの組み合わせで困ったときに、検索すれば日本語情報がたくさん出てきます。

デザインを細かく調整したい場合や、企業サイトで統一感を出したい場合は、目次プラグインよりもVK Blocks Proの目次ブロックのほうが、ブロックエディタ上で完結するぶん扱いやすいと感じる人も多いです。

まとめ

この記事のポイントを整理します

今日からできる最初の一歩として、まずは自分のサイトで1つ、長めの記事を選んでみてください。その記事に、この記事で紹介したどれか1つの方法でlightningに目次を入れてみましょう。

一度やり方がつかめれば、あとは他の記事にもコピペやテンプレート化でどんどん広げていけます。小さく試して、しっくりくる目次の作り方を一緒に育てていきましょう。