【プラグインいらず】SWELLで目次の作り方！機能や好みのカスタマイズする方法も解説

SWELLの目次機能を使うことで自動でブログに目次を設定することができます。

プラグインなしでページの印象をぐっと引き締めることができるので、多くのブロガーに選ばれています。

特に個人起業家やブログ初心者にとって、この便利な機能を使いこなせると、読者にとっても読みやすく、SEO対策にもつながりますよ。

SWELLの目次機能の特徴は？

SWELLの目次機能の特徴として次の３つが揚げられます。

自動生成

目次作りにプラグインを入れる必要がありません。
SWELLの目次機能は、見出しタグ（H2、H3など）をもとに自動で目次を生成します。

これにより、記事が長くても簡単に目次が作れます。

デザインのカスタマイズ性

シンプルで直感的な操作性で色や背景、枠線などを調整可能。

ブログ全体のデザインに合わせた目次を作れます。

SEOに配慮した構造

SEOに最適化された構造なので検索上位をめざす初心者にもぴったりです。

目次を作成する際の注意点

見出しタグの適切な使用（H2、H3など）

SWELLの目次機能は見出しタグ（H2、H3など）をもとに目次を自動生成します。

そのため、見出しタグを正しく使うことがとても重要です。

まず、H1はページ全体のタイトルとして1つだけ使用するのが基本ルールですが、SWELLを使う上ではタイトルを投稿編集画面の「タイトルの欄に入れる」だけなので問題ないでしょう。

記事内では、H2を大見出し、H3をその中の小見出しとして、階層的に整理しましょう。

SWELLでは見出しを選択すると基本はH2にまず設定されます。そこから使いたい見出しを選んで設定しましょう。

見出しの正しい使い分けをすることで、読者にとっても分かりやすく、目次が整然と表示されます。

見出しタグを乱用すると、目次が見づらくなる上、SEO評価にも悪影響を与えるので注意しましょう。

初心者のよくある失敗
初心者でよくある失敗は、「デザイン性で見出しを選ぶ」「デザイン性で選んだ結果構造がガタガタになる」ことです。

アメブロのようにこのデザインがいいから！と見出しを選んではいけません。
その結果例えばH2の下に急にH4が来るとH3が飛ばされてしまっているので、SEO対策にもよくありません。

目次の配置場所

目次の配置場所は、読者の使いやすさを考える上でとても重要です。

記事の冒頭に目次を配置するのが一般的です。

導入文（リード文）の後・最初のH2見出しの前に配置する
簡単な記事の概要の後に目次を置くと、読者が内容を理解したうえで目次を利用できます。

　SWELLで目次を作成してみよう！

WordPressのダッシュボードよりSWELLの目次の設定ができます。

SWELLで目次を作成する手順

デザインはシンプルにしたり目立つようにしたり、お好みで設定をしてください。

⑥⑦の項目は以下を参考に設定するとよいです！

SWELLで作る目次の設定

一般的な設定をご紹介します。

目次には見出しh2とh3を抽出させる。
2個以上の見出しで目次に表示させる。

ということになります。

SWELLで作る目次のデザイン

目次のデザイン種類は4種類あるのでタイトル、カラーなども組み合わせて目次作りをしてください。

目次のタイトル設定

目次のタイトルは

• 目次
• もくじ
• index
• インデックス
• その他

表示させたいタイトルを設定できます。

目次のデザイン　設定

4種類のデザインがあります。

目次のリストタグ　設定

目次のリストタグは2種類より選択します。

疑似要素（ドット・数字部分）のカラー

ドット・数字部分のカラーは次の3項目より選択します。

• テキストカラー
• メインカラー
• カスタムカラー

下の画像は「カスタムカラー」でグリーンを選んでいます。

まとめ・SWELLなら自動で目次が作れる

プラグイン無しで自動に目次ができるSWELLでの目次の作り方について解説をしました。

この記事で紹介した手順と注意点を押さえれば、読者にとって分かりやすい構成のブログが完成します。

ぜひこの記事を参考に、SWELLで目次を活用して、より魅力的なブログ運営を目指しましょう！