SWELLの目次を記事ごとに非表示にする方法｜投稿画面で切り替え

見出しが2つしかない記事の冒頭に、本文より目立つ目次が居座ってしまうことがあります。お知らせやレビューのように一気に読ませたい記事ほど、目次は読み手の流れをさえぎります。

SWELLの目次は、記事ごとに表示と非表示を切り替えられます。触る場所は、投稿編集画面のサイドバーにある「SWELL設定」の中の「目次」1か所だけ。ここで選んだ内容が、カスタマイザーのサイト全体設定を上書きします。この記事はSWELL v2.16.0時点のテーマ本体を読んで確認した内容をもとに、切り替えの手順と、一緒に起きることまで整理しました。

SWELLの目次は記事ごとに切り替えられる

SWELL公式マニュアルの「目次に関する設定」には、記事ごと・ページごとに表示と非表示を上書き指定できること、そのための設定パネルがエディターの右側にあることが書かれています。書かれているのはそこまでで、パネルの名前も、どの項目を選ぶのかも出てきません。実際の設定は、もう1段深いところにあります。

目次が邪魔になるのはどんな記事か

目次はあったほうが親切なことが多いのですが、次のような記事では外したくなります。

• 見出しが2つ、3つしかない短い記事。目次のほうが本文より目立ちます
• お知らせやレビューのように、順番に読ませたい記事。結論の見出しが目次で先に見えて、流れが崩れます
• 冒頭のビジュアルを先に見せたい記事。目次が入る分だけ、本命のブロックが下がります

こうした記事だけを外せるのが、記事ごとの設定です。

サイト全体の設定と記事ごとの設定、どちらが勝つか

記事ごとの「目次」には3つの状態があります。

記事ごとの「目次」の値	その記事での結果
未指定（何も選んでいない初期状態）	サイト全体の設定にそのまま従う
表示	サイト全体がオフでも、この記事だけ目次が出る
非表示	サイト全体がオンでも、この記事だけ目次が消える

「サイト全体はオンのまま1記事だけ消す」も、「サイト全体をオフにして必要な記事だけ出す」も、この1か所でできます。

記事ごとに目次を非表示にする手順

投稿を開いた状態から3ステップで終わります。

サイト全体の目次設定はカスタマイザーで変える

サイト全体の目次設定は、外観のカスタマイザーから「投稿・固定ページ」→「目次」と進んだ先にあります。カスタマイザーの場所から確認したい場合は、SWELLの初期設定に流れをまとめています。同じカスタマイザーを触るSWELLでファビコンとロゴを設定する手順も、画面の位置関係の参考になります。

主な項目の初期値は次のとおりです。

設定項目	初期値
投稿ページに目次を表示	オン
固定ページに目次を表示	オフ
目次のタイトル	目次
どの階層の見出しまで抽出するか	H3まで
見出し何個以上で表示するか	2
目次の省略表示	指定の数を超えた分を省略する
項目が何個を超えると省略するか	15

moreo noteは投稿の目次を表示のまま運用しています。変えているのは省略の数だけで、項目が5個を超えた分は「もっと見る」で開くようにしています。

先ほどの逆パターンなら、ここで「投稿ページに目次を表示」のチェックを外します。その状態でも、出したい記事だけ「SWELL設定」の「目次」で「表示」を選べば目次は出ます。固定ページの初期値はオフなので、固定ページで目次を出したいときも、そのページの「SWELL設定」で「表示」を選ぶのが最短です。

もう一歩だけ細かく調整したいとき

消すか出すかだけでなく、「どこまで細かく出すか」「どこに出すか」も記事ごとに調整できます。

目次に出す見出しの深さを記事ごとに変える

STEP 02で隣に並んでいた「目次抽出対象」がこれです。H2まで表示・H3まで表示・H4まで表示・H5まで表示の4つから選べ、これもサイト全体を上書きします。目次が長くなりすぎる記事は、非表示にする前に「H2まで表示」に変えると収まることがあります。

公式マニュアルの「目次に関する設定」は抽出する階層を2択として説明していますが、実際の選択肢は上記の4つです。この公式ページの更新は2021年8月6日で止まっていて、現在の画面とは合っていません。画面と説明が食い違ったときは、画面のほうを信じてください。

目次の位置を自分で決める

目次が入る位置は、自分で決められます。SWELLのショートコード一覧にあるとおり、本文中に [swell_toc] を置くと、その位置に目次が生成されます。導入文を読ませてから目次を出したいときに向いていて、置けば自動挿入より優先されます。

このショートコードは、記事ごとの「非表示」よりも優先されます。 非表示にした記事でも、本文に [swell_toc] が置いてあれば目次は出ます。テーマ側の処理が、ショートコードで置かれた目次については表示・非表示の判定を見ないためです。「非表示にしたのに目次が出る」ときは、本文にショートコードが残っていないかを先に確認してください。

つまずきやすいポイント

「消したい」とは逆に、「消していないのに目次が出てこない」ということもあります。原因は設定だけとはかぎりません。

目次が出てこないときの原因を切り分ける

症状の原因	確認する場所
記事に最初のH2がない	見出しがH3から始まっていないか。自動挿入は最初のH2の直前なので、H2がないと入る場所がない
見出しが2個未満	初期値は「2個以上」。見出しが1つの記事では出ない
その記事だけ非表示になっている	「SWELL設定」の「目次」が「非表示」になっていないか
固定ページで全体設定が初期値のまま	固定ページの初期値はオフ。そのページの「SWELL設定」で「表示」を選ぶ

切り分けに効くのは、「消え方」が2種類あることです。設定で非表示にした記事では、目次のHTMLがそもそも出力されません。見出しの数が足りない場合はHTML自体は出力されていて、CSSで隠されているだけです。ページのソースに目次の入れ物が残っているなら、設定ではなく見出しの数や構成を疑ってください。

設定したのに表示が変わらないとき

記事ごとに設定したはずなのに変わらない場合、触ったのがカスタマイザー側で記事側は未指定のまま、という取り違えがよくあります。それでも変わらないときは、キャッシュ系プラグインやサーバー側のキャッシュを削除し、シークレットウィンドウで開き直すと判断がつきます。

目次が邪魔だったあの1記事、サイト全体はそのままで消せます

投稿編集画面のサイドバー「SWELL設定」を開き、「表示の上書き設定」の下の「目次」で表示か非表示を選ぶ。それだけです。未指定ならサイト全体に従い、選んだ瞬間にサイト全体を上書きする。このルールさえ覚えておけば迷いません。

あわせて、非表示にすると追従目次と固定目次ボタンも消えること、[swell_toc] を置いた記事では表示が優先されること。この2つを知っていれば、思ったとおりにならないときも自分で切り分けられます。

まずは、目次が邪魔だと感じていた記事を1本開いて、「SWELL設定」の「目次」を非表示にしてみてください。気に入らなければ未指定に戻すだけです。SWELLの設定をひととおり見直したい場合は、SWELL完全マスターガイドにまとめています。

目次を出すかどうかは、サイト全体で一度決めるものではなく、記事ごとに決め直せるものです。