SWELLの目次設定は、初期設定のままでも使えます。
ただ、記事を書いていくうちに、
- 「h3まで表示したほうがいいのか？」
- 「どのデザインが読みやすいのか？」
- 「目次広告は入れたほうがいいのか？」
と迷う方は多いです。
結論から言うと、初心者の方はまず「シンプルで読みやすい目次」にしておけば大丈夫です。
目次を派手にしたり、情報を詰め込みすぎたりすると、かえって読者が迷います。
この記事では、SWELLでブログを始めたばかりの方に向けて、失敗しにくい目次のおすすめ設定をまとめました。
- 設定画面の場所、
- h2・h3の表示、
- デザイン、
- 目次広告を入れるべきか
まで、最初に整えておきたいポイントに絞って解説します。
SWELLの目次は読者を迷わせないための機能です
SWELLには、記事内の見出しをもとに目次を自動表示する機能があります。
目次用のプラグインを追加しなくても使えるので、初心者でも設定しやすいです。
ただし、目次はただの装飾ではありません。
読者が記事全体を見渡し、自分が知りたい場所に移動するための案内板です。
ブログ記事は、上から順番にすべて読まれるとは限りません。
読者はまず目次を見て、「この記事に自分の知りたいことがあるか」を判断します。
だからこそ、目次設定では「おしゃれさ」よりも「わかりやすさ」を優先しましょう。
初心者におすすめのSWELL目次設定
SWELLの目次設定で迷ったら、まずは次の形で始めるのがおすすめです。
この設定なら、見た目がごちゃつきにくく、読者も迷いにくいです。
まずは読みやすい状態を作り、記事が増えてから少しずつ調整していきましょう。
目次タイトルは「目次」でOK
目次タイトルは、基本的に「目次」のままで問題ありません。
- 「この記事でわかること」
- 「読みたい場所へ移動」
といった表現に変えることもできますが、初心者のうちは無理に変えなくて大丈夫です。
読者にとって大事なのは、目次だとすぐにわかることです。
アッフィー迷ったら、シンプルに「目次」としておきましょう。
目次デザインはシンプルかボックスがおすすめ
SWELLでは、目次のデザインを選べます。
初心者におすすめなのは、「シンプル」または「ボックス」です。
シンプルは、記事全体の見た目を邪魔しにくいです。
ボックスは、目次の場所がわかりやすく、読者が見つけやすいです。
どちらを選んでも問題ありません。
大事なのは、サイト全体の雰囲気に合っていて、読者が見やすいことです。
派手なデザインを選ぶより、本文を読みやすくすることを優先しましょう。
リストタグは「olタグ」がおすすめ
リストタグは、順序付きで表示できる「olタグ」がおすすめです。
番号付きで整理されているほうが階層構造を把握しやすくなるからです。
特に、手順解説やノウハウ記事では、見出しに番号が付くので読者が現在地を理解しやすくなります。
記事全体の流れをスムーズに伝えるため、リストタグは「olタグ」を選ぶようにしましょう。
表示する見出しはh3までで十分です
目次に表示する見出しは、h3までで十分です。
h2だけだと、記事の大まかな流れしか見えません。
一方で、h4やh5まで表示すると、目次が長くなりすぎます。
特にスマホでは、長すぎる目次は読みにくくなります。
初心者の方は、まずh3まで表示しておけば大丈夫です。
記事構成も自然に整理しやすくなります。
見出し2個以上で目次を表示する設定にしましょう
目次は、見出しが少ない記事には必要ない場合があります。
短い記事に目次が出ると、かえって違和感が出ることもあります。
初心者の方は、「見出し2個以上」で目次を表示する設定にしておきましょう。
長文記事では目次が出て、短い記事では目次が出にくくなります。
読者にとって自然な見え方になります。
目次広告は最初は入れなくてよい
目次広告は、最初は入れなくてOKです。
ブログ初心者がいきなり広告配置を細かく調整しても、収益への影響は小さいからです。
それよりも、記事の質を上げること、内部リンクを整えること、読者が次に読む記事を用意することのほうが大事です。
目次広告を入れるのは、アクセスが増えてからで問題ありません。
迷ったら「読みやすさ」を優先する
SWELLの目次設定で迷ったら、デザイン性よりも読みやすさを優先しましょう。
目次は、読者に記事の全体像を伝えるためのものです。
設定を凝りすぎるより、シンプルでわかりやすい状態にすることが大切です。
SWELLで目次を設定する手順
SWELLで目次を作る手順は次のとおりです。
順番に見ていきましょう。
①目次の表示設定
まずは、目次を表示する設定を行いましょう。
WordPress管理画面から「外観」⇒「カスタマイズ」とクリックしてください。
続いて、「投稿・固定ページ」⇒「目次」の順に進みましょう。
「投稿ページに目次を表示」にチェックを入れると、投稿記事に目次が表示されます。
固定ページには基本的に目次は不要なので、チェックを外したままで問題ありません。
ちなみに固定ページとは、「サイト全体で共通して使いたい情報」を載せるページで、次のようなページが該当します。
- お問い合わせページ
- プライバシーポリシー
- 免責事項
- プロフィール
- サイトマップ
②見出しの作成
目次を表示するためには、記事内に見出しを作成する必要があります。
編集画面で「+」ボタンをクリックし、「見出し」ブロックを選択してください。
ブロックツールバーの「H2」をクリックして見出しの階層を表示させ、階層（H2〜Ｈ６）を決めましょう。
見出しの階層は、基本的にH2とH3を使えばOKです。
見出しの中にテキストを入力してください。
見出しは最低2個以上作成しましょう。
というのも、SWELLでは見出しが2個未満の場合、目次が表示されない設定になっているからです。
目次が出ない場合は、まずH2見出しが2つ以上あるか確認してください。
なお、SWELLの見出しについては以下の記事で詳しく解説していますので参考にしてください。
③目次のカスタマイズ
SWELLでは目次のデザインや表示方法をカスタマイズできます。
ただし、初心者の方が最初からすべての項目を触る必要はないです。
まずは、読者が記事を読みやすくなる項目だけ整えておきましょう。
最初に設定しておきたいのは、次の7つだけです。
- 目次のタイトル
- 目次のデザイン
- 目次のリストタグ
- どの階層の見出しまで抽出するか
- 見出し何個以上で表示するか
- 目次の省略表示
- 項目が何個を超えると省略するか
アッフィーカスタマイズ内容の詳細はこの後「SWELL目次のカスタマイズ方法」で説明しますね。
カスタマイズ項目は上記以外にもあります。
しかし、擬似要素のカラーや、開くボタン・閉じるボタンの文言は、後から調整すれば十分です。
④個別記事での表示・非表示切り替え
目次の表示設定をしたものの、特定の記事だけ目次を非表示にしたい場合がありますよね。
そんな時は、投稿編集画面の右サイドバーの「投稿」タブにある「目次」の項目を「非表示」にしましょう。
逆に、固定ページで目次を表示したい場合は、「固定ページ」タブにある「目次」の項目を「表示」にしましょう。
設定が終わったら、実際の記事ページで表示を確認してください。
投稿画面だけでなく、公開ページやプレビューでも見え方を確認すると安心です。
SWELL目次のカスタマイズ方法
SWELLの目次は、細かくカスタマイズできます。
ただし、初心者の方が最初からすべての項目を触る必要はありません。
まずは、読者が記事を読みやすくなる以下の項目だけ整えておきましょう。
SWELL目次のおすすめ設定
| 項目 | おすすめ設定 |
|---|---|
| 目次タイトル | 目次 |
| 目次デザイン | ボックス、またはシンプル |
| リストタグ | olタグ |
| 抽出する見出し | h3まで |
| 見出し何個以上で表示 | 2個以上 |
| 目次の省略表示 | 指定の数を超えた分を省略 |
| 省略する項目数 | 15個 |
| 目次広告 | 最初はオフでOK |
最初からすべての項目を細かく調整する必要はありません。
初心者の方は、上の表のおすすめ設定で始めれば十分です。
記事数が増えてきたら、広告位置や省略表示も調整していきましょう。
各設定項目を順番に解説していきます。
①目次のタイトル
目次のタイトルは自由に変更できます。
基本は「目次」のままで問題ありません。
少しやわらかくしたい場合は、「この記事でわかること」「読みたい箇所へジャンプ」などに変更してもいいでしょう。
ただし、凝りすぎると逆にわかりにくくなります。
アッフィー迷ったら「目次」でOKです。
②目次のデザイン
目次デザインは、シンプル、ボックス、上下ボーダー、ストライプ背景から選べます。
初心者の方には、ボックスかシンプルがおすすめです。
ボックスは目次の場所がわかりやすく、シンプルは記事全体になじみやすいです。
アッフィーデザインに迷ったら、まずはボックスを選びましょう。
③目次のリストタグ
リストタグは、olタグとulタグから選べます。
olタグは、1、2、3のように数字で表示されます。
ulタグは、ドットで表示されます。
タブをクリックすると、それぞれのデザインが確認できます
アッフィー手順解説やノウハウ記事では、流れがわかりやすいolタグがおすすめです。
④どの階層の見出しまで抽出するか
目次に表示する見出しのレベルは、「ｈ2」から「ｈ5」まで選択できます。
目次に表示する見出しは、h3までがおすすめです。
h2だけだと記事の細かい内容が見えにくくなります。
逆にh4やh5まで表示すると、目次が長くなりすぎます。
まずはh3までに設定しておきましょう。
タブをクリックすると、それぞれの目次が確認できます
⑤見出し何個以上で表示するか
表示する目次の最低見出し数を設定できます。
デフォルトは「2個以上」で、見出しが1個だけの短い記事では目次が表示されません。
⑥目次の省略表示
見出しが多い記事では、目次が長くなりすぎることがあります。
その場合は、「指定の数を超えた分を省略する」を選びましょう。
項目数はデフォルトの15個で問題ありません。
長文記事が多いブログでは、省略表示を使うとスマホでも読みやすくなります。
選択できるのは以下の４パターンです。
タブをクリックしてデザインを確認しましょう
アッフィー当ブログは「指定の数を超えた分を省略する」で設定してます！
⑦項目が何個を超えると省略するか
省略表示を設定した場合に、表示される目次の最大数を指定します。
設定した内容を保存する
すべての設定が完了したら、「公開」をクリックしてブログに反映させましょう。
目次が表示されないときの確認ポイント
SWELLの目次が表示されない場合は、設定ミスや見出しの数が原因になっていることが多いです。
よくある原因は、目次表示がオフになっている、H2見出しが足りない、記事ごとの設定で非表示になっている、などです。
詳しい確認手順は、こちらの記事で解説します。
サイドバーに目次を固定したい場合は別記事で確認しましょう
長文記事では、サイドバーに目次を固定表示すると読者が移動しやすくなります。
ただし、すべての記事で必要なわけではありません。
短い記事やスマホ読者が多い記事では、あまり効果を感じにくい場合もあります。
サイドバー目次は、長文記事や比較記事、手順解説記事で使うと効果的です。
SWELLで目次をサイドバーに固定表示したい方は、こちらの記事で手順と使いどころを解説しています。
長文記事を読みやすくしたい方は、あわせて確認してみてください。
目次前広告は最初は入れずに設定しましょう
SWELLでは、目次の前後に広告を表示できます。
ただ、初心者の方は、最初から目次前広告を入れなくても大丈夫です。
目次前広告は読者の目に入りやすい一方で、本文に入る前の邪魔になることもあります。
特に、まだアクセスが少ない段階では、広告位置を細かく調整しても大きな収益にはつながりにくいです。
まずは、記事の読みやすさと導線を整えましょう。
広告を入れるかどうかは、記事が読まれるようになってから判断すれば十分です。
目次前広告を入れるべきか迷っている方は、こちらの記事でメリット・デメリットを解説しています。
収益化を考えている方は、先に読んでおくと失敗しにくいです。
目次設定より大事なのは見出しのわかりやすさです
ここは大事です。
目次は、見出しの一覧です。
つまり、見出しがわかりにくいと、目次もわかりにくくなります。
- 「設定方法」
- 「注意点」
- 「まとめ」
だけでは、読者は何が書かれているのか判断しにくいです。
- 「SWELLで目次を設定する手順」
- 「目次が表示されないときの確認ポイント」
- 「目次前広告は最初は入れなくて大丈夫です」
このように、見出しだけで内容がわかるようにしましょう。
目次は記事の入口です。
読者が目次を見た瞬間に、「この記事は読みやすそう」と感じる状態を作ることが大事です。
まとめ｜SWELLの目次はシンプルで読みやすく設定しましょう
SWELLの目次は、初心者でも簡単に設定できます。
迷ったら、まずは次の設定で始めましょう。
- 目次タイトルは「目次」。
- 目次デザインは「シンプル」または「ボックス」。
- リストタグは「olタグ」。
- 表示する階層は「h3まで」。
- 見出し2個以上で表示。
- 目次広告は最初は入れない。
目次は、読者を迷わせないための案内板です。
おしゃれにすることより、読みやすくすることを優先しましょう。
そして、目次を整えたら、次は記事全体の導線も見直しておくといいです。
- 読者が記事を読んだあと、次にどこへ進めばいいのか。
- どの記事を読めば、悩みがさらに解決するのか。
ここまで設計できると、ブログはただの情報発信ではなく、収益につながるメディアになっていきます。
SWELLの目次を整えたら、次はブログ全体の導線も確認しておきましょう。
記事が読まれていても、読者が次に何をすればいいのかがわからないと、収益にはつながりにくいです。
無料チェックシートでは、ブログ記事の見出し、内部リンク、CTA、レビュー記事への流れなどをまとめて確認できます。
「記事を書いているのに売れない」と感じている方は、まず自分のブログの弱点を見える化してみてください。
