SWELLの目次の作り方｜サイドバーや表示されない時の対処法も

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

『SWELL』は目次が標準装備されている珍しいWordPressテーマです。

そこで、記事の前半で「SWELLの記事内やサイドバーに目次を表示させる方法」を。

後半では「目次のカスタマイズ方法や、表示されないときの対処法」について解説します。

本記事を最後まで読むことで、SWELLに目次をサクッと表示させることができますよ！

＼使いやすさなら／

国内人気No.1

SWELLの目次の作り方【基本編】

SWELLの「目次の作り方」は、次のとおり。

この章のもくじ

デフォルトの目次はこんな感じ👇️

これでも充分なので、とりあえずサクッと表示させてみましょう！

ステップ①目次の表示を確認する

まずは、目次の「表示設定」を確認しましょう。

目次を表示するかどうか

「固定ページ」に目次はいらないですよね。

固定ページとは

とはいえ、目次は「個別」にも設定できるんです。

投稿エディタの「メニューバー（右）」から以下を探してください。

表示の上書き設定

固定ページはとりあえず「非表示」にして、目次が必要なページ（プロフィール記事など）のみ「表示」すればOK！

ステップ②記事に見出しを作る

目次を表示するには、「見出し」が不可欠です。

「見出しの作り方」は次のとおり。

見出しの作り方

ボクは７年目のブロガーですが、見出しは「H2とH3」しか作ったことがありません。

多くても「H4」まであれば充分でしょう。

とはいえ、見出しが「１個」しかない状態では、目次は表示されません。

目次の抽出と表示

デフォルトでは「h3まで」、「２個以上」になっています。

関連記事ブログの見出しの作り方３ステップ｜付け方でSEOを制す！

ステップ③目次をカスタマイズする

ほかにも「目次のカスタマイズ」はさまざま👇️

目次のカスタマイズ

こだわりがなければデフォルトで充分なので、くわしくは「目次のカスタマイズ編」で解説しますね！

補足SWELLの目次はショートコードで好きな位置に表示できる【２つ】

目次は「いちばん最初の見出しの前」に表示されます。

右上のCopyをクリック

[swell_toc]

とはいえ、ショートコードを使えば「好きな位置」に表示できるんです。

つまり、記事内に目次を「２つ以上」表示できるわけですね。

あまり使うことはないかもですが、覚えておいてくださいね！

SWELLの目次の作り方【サイドバー編】

SWELLの目次の作り方「サイドバー編」は、次のとおり。

この章のもくじ

サイドバーの目次はこんな感じ👇️

記事の横に「目次」があると便利ですよね（PCのみ）！

ステップ①サイドバーを表示する

まずは、「投稿ページ」のサイドバー表示を確認してください。

サイドバーを表示するかどうか

「サイドバーの位置」は「右」が一般的ですね。

表示の上書き設定

とはいえ「目次」と同じように、「サイドバー」も記事ごとに「表示 or 非表示」を選べますよ。

ステップ②追尾サイドバーに目次を入れる

右の「利用できるウィジェット」から「SWELL [目次]」を「追尾サイドバー」に追加してください。

ウィジェット

「追尾」しないと意味ないですからね。

「タイトル」は未入力でも、「目次」と表示されますよ。

SWELLの目次の作り方【固定目次ボタン編】

SWELLの目次の作り方「固定目次ボタン編」は、次のとおり。

この章のもくじ

固定目次ボタンは、右下の「ページトップボタンの上」に表示されます（PCのみ）。

ステップ①目次を表示する

大前提として、固定目次ボタンは「目次を設置しているページにのみ」表示されます。

目次を表示するかどうか

まずは、ここを確認してくださいね。

ステップ②固定目次ボタンを表示する

固定目次ボタンは、デフォルトでは「非表示」になっています。

目次ボタンの表示設定

形は「ページトップボタンと合わせる」のがオススメです。

SWELLの目次の作り方【カスタマイズ編】

SWELLの目次の作り方「カスタマイズ編」は、次のとおり。

この章のもくじ

あなた好みに「目次をカスタマイズ」しましょう！

その①目次のタイトル

デフォルトは「目次」です。

目次のタイトル例

ただの「目次」より「読者目線のタイトル」のほうがクリックされますよ。

その②目次のデザイン

デフォルトは「ストライプ背景」です。

ストライプ背景

シンプル

ボックス

上下ボーダー

これは「お好み」ですね。

その③目次のリストタグ

デフォルトは「olタグ（数字）」です。

ulタグ（ドット）

数字のほうが「全体像が一瞬で把握」できていいですよね。

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

デフォルトは「テキストカラー」です。

これも「デフォルトのまま」でいいでしょう。

その⑤どの階層の見出しまで抽出するか

デフォルトは「h3」です。

そもそも「見出しはh3まで」でOK！

その⑥見出し何個以上で表示するか

デフォルトは「２」です。

これも「デフォルトのまま」でいいでしょう。

その⑦目次の省略表示

デフォルトは「指定の数を超えた分を省略する」です。

見出しの多い・長〜い記事は「省略」したほうがいいですよね。

その⑧項目が何個を超えると省略するか

デフォルトは「15」です。

これも「デフォルトのまま」でいいでしょう。

その⑨開くボタンのテキスト（もっと見る）

デフォルトは「もっと見る」です。

これはすでに「読者目線」なので、デフォルトがおすすめ。

その⑩閉じるボタンのテキスト

デフォルトは「折りたたむ」です。

とはいえ、わざわざ目次を折りたたむ人なんていないですよね？

その⑪目次広告の表示設定

目次広告とは、『Googleアドセンス』のこと。

Googleアドセンス広告は、上記から設定できますよ。

目次広告の位置

アドセンスだけでなく、アフィリエイト広告も「目次前」がいちばんクリックされます。

目次がなくても広告を表示するかどうか

目次がない場合は、「いちばん最初の見出し前」に表示されますよ。

「固定ページ」に広告はいらないでしょう。

Googleアドセンスなど、「SWELL設定のやり方」は別記事でまるっと解説しています👇️

関連記事SWELLはSEOに弱い？５つの優位性と２つの設定方法

SWELLの目次が表示されない・出てこない時の対処法３選

SWELLの目次が「表示されない・出てこない時の対処法」は、次のとおり。

この章のもくじ

どれもケアレスミスですが、確認してみてくださいね。

その①目次設定が非表示になっている

どのページにも表示されないなら、ここをチェック💡

「投稿ページに目次を表示」に✅️はついていますか？

目次を表示するかどうか

✅️がついているなら、個別で上書きしてしまったのかもしれません👇️

その②投稿エディタで目次設定が非表示になっている

特定のページに表示されないなら、ここをチェック💡

表示の上書き設定

ここも「表示」になっているなら、そもそも「見出しがない」のかも👇️

その③見出しがない or １個しかない

試しに、見出しを「２個以上」作ってみてください。

もう一度、「カスタマイズ」に戻ります。

目次の抽出と表示

デフォルトでは「h3まで」「２個以上」の見出しがあると、目次が表示されますよ。

【Q&A】SWELLの目次に関するよくある質問

SWELLの目次に関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：そもそもSWELLに目次は必要なの？

A絶対にあったほうがいい！

なぜなら

目次があることで、読者は「読みたい見出し」にジャンプできます。

目次がないと、記事の全体像が掴めず、そもそも読んでもらえないんです。

逆に、目次があったほうが「滞在時間」も伸び、SEO的にも良いんですね。

SWELLの目次のメリット

目次が標準装備されてるWordPressテーマって珍しいんですよね。

とくに「サイドバー」への実装は〝自作〟では難しいので、プラグインは必須です。

『SWELL』ってホント高機能ですよね！

関連記事【コピペOK】ブログの目次の作り方｜プラグインなしで自作しよう！

Q2：その他のSWELLブロックの作り方は？

ASWELLには独自ブロックが22個あります。

SWELLの独自ブロック

よく使うブロックと合わせて、「30種類の使い方」を解説しています👇️

関連記事【初心者必見】SWELLの使い方｜ブロックエディタを完全マスター

Q3：目次以外にSEOに良い設定は？

A次の２つになります。

SWELLのSEO設定

「他のテーマよりリードしている項目」と合わせて解説していますよ👇️

関連記事SWELLはSEOに弱い？５つの優位性と２つの設定方法

Q4：その他のSWELLの設定は？

A次の２つになります。

SWELLの初期設定

SEO設定以外に「22項目の設定方法」を解説しています👇️

関連記事【最低限】SWELLおすすめの初期設定方法４つを完全解説！

Q5：SWELLに必須のプラグインは？

A次の４つになります。

SWELLに必須のプラグイン

『SWELL』は目次をプラグインで実装しなくていいので、少なく済みますよ。

合わせて読みたい

「SWELLとプラグインにまつわる記事」をまとめておきました🙌

【まとめ】SWELLはプラグインなしで目次を実装できる！

「SWELLの目次」について解説しました。

まとめ

『SWELL』はプラグインなしで「目次」を実装できる数少ないテーマです。

設定もカスタマイズもかんたんなので、使わないともったいないですよ！

SWELLブロックの使い方

「目次」以外も解説しています。ブックマーク推奨です🙌

＼使いやすさなら／

国内人気No.1

SWELLを導入したい方へ