XWRITEには「追従サイドバー」というスクロールについてくるウィジェットエリアがあります。ところが、そこに入れられる目次ウィジェットが用意されていません。目次は本文の冒頭に出るだけなので、読み進めるほど「いま記事のどのへんを読んでいるのか」が分からなくなります。
結論から書くと、これはプラグインを1つ足せば解決します。テーマ側の更新を待つ必要はありません。この記事では、僕が自分のサイト用に作って実際に動かしているプラグインを例に、仕組みと導入手順、そして作る過程でつまずいた点をまとめます。
製造業の総務課でIT担当をしている、非エンジニアの会社員が書いています。ブログ歴6年、WordPressプラグインの自作は「商品比較表ブロック」「アフィリエイトカード」などに続いて4本目です。
- XWRITEでサイドバー目次が出せない理由と、現実的な回避策
- 「アコーディオン式」にしないと長文記事では逆効果になる話
- 導入3分の手順と、唯一つまずく「停止位置」の決め方
「テーマに無い機能は諦める」で6年やってきましたが、目次くらいなら自分で足せます。やっていることは、本文の見出しを読んで横に並べ直すだけです。
結論：XWRITEの追従サイドバーには、プラグインで目次を足すのが早いです
やり方は大きく3つあります。子テーマにPHPとJavaScriptを書き足す、他テーマ用の目次プラグイン（Easy Table of Contents など）を追従エリアに置いてみる、専用のウィジェットを作る。
僕は3つめを選びました。理由は単純で、子テーマに書くとテーマを乗り換えたときに全部消えるからです。XWRITEからAFFINGERやSWELLに移す可能性が少しでもあるなら、機能はプラグイン側に置いたほうが安全です。僕は過去にCocoon→AFFINGER6→XWRITEと2回移行していて、そのたびに子テーマのカスタマイズを書き直しました。あれをもう一度やる気にはなれません。
XWRITEにサイドバー目次が無いのは仕様です
まず前提を確認しておきます。XWRITEの目次機能は「投稿ページの本文冒頭に自動で挿入する」タイプです。カスタマイザーから表示のオン・オフや拾う見出しレベルは決められますが、出す場所を変える設定はありません。
外観 → ウィジェット を開いても、目次にあたるウィジェットは一覧に出てきません。追従サイドバーというエリアだけ用意されているのに、そこに入れる中身が足りていない、という状態です。
このエリア自体はかなり優秀で、プロフィールカードを置くだけでもプロフィールの表示回数が変わります。設置手順は別記事にまとめました。
テーマ自体の評価は高いです。書くことに集中できる編集画面と、初期状態でそこそこ整うデザインは、ブログを続けるうえでかなり効きます。総合的な使用感はこちらに書いてあります。
追従目次で何が変わるのか（正直な話）
「追従目次を入れると回遊率が上がります」と書きたいところですが、そこまで断言できるデータを僕はまだ持っていません。導入したのが最近で、比較できる期間が足りていないからです。数字が出たらこの記事に追記します。
現時点ではっきり変わったのは、読者ではなく書いている自分の作業のほうでした。公開直後に自分の記事を読み返すとき、見出しの並びが横にずっと出ているので「このH2、中身が薄いな」「H3が5個もぶら下がってて重いな」が一目で分かります。構成のチェックツールとして使えている、という感覚です。
効果が出やすいのは、見出しが10個以上ある長文記事です。3,000字未満で見出しが5個くらいの記事なら、本文冒頭の目次だけで足ります。全記事に必要な機能ではありません。
読者の動線をどう設計するかは、こちらの記事のほうが具体的です。目次はあくまで導線パーツのひとつという位置づけで読んでもらえると、過剰な期待をせずに済みます。
作ったプラグイン「サイドバー追従アウトライン」の中身
動きは4つです。
- サイドバーに記事の見出しがずっと表示される
- スクロールすると、いま読んでいる見出しが自動でハイライトされる
- いま読んでいるH2の配下だけ、H3が開く（他のH2は閉じたまま）
- クリックするとその見出しまでジャンプする
全部並べたら失敗した話
最初のバージョンは、見出しをそのまま全部並べるだけの素直な作りでした。これが完全に失敗でした。
僕の記事は長いもので見出しが30個近くあります。それを全部並べると、サイドバーが画面いっぱいの目次リストになり、その中でさらにスクロールが発生する。「いま記事のどこを読んでいるか一目で分かる」という目的が、まったく果たせていませんでした。
かといってH2だけに絞ると、今度は細かい項目に飛べません。実測データやスペックをH3の見出しにしている記事だと、読者が一番飛びたい場所がそこだったりします。
H2は常時表示、H3は「いまのH2の下だけ」開く
そこで折衷案にしました。H2は常に全部見せておいて、いま読んでいるH2の配下だけH3を開きます。記事全体の地図を保ったまま、手元の詳細も見える形です。
この方式にすると、表示される項目数が常に10前後に収まります。サイドバーの中でスクロールする必要がなくなり、視線を動かすだけで全体を見渡せる。この記事の見出し構成でも、実際に表示されるのは9〜11項目です。
テーマの目次機能に依存しない作りにした
見出しの取得は、テーマやプラグインが吐き出した目次HTMLを読むのではなく、本文の見出しタグから直接組み立てています。テーマ側の仕様変更に巻き込まれにくく、XWRITE以外でも動きます。追従目次を持たないテーマなら、そのまま選択肢になります。
ただし、XWRITEの目次設定で特定の見出しを除外している場合、本文の目次とサイドバーの目次で項目がズレます。完全に揃えたい人向けに「テーマやプラグインの目次があればそちらを優先する」というオプションも用意しました。
設定画面でできること
[画像挿入：設定 → サイドバー追従アウトライン の設定画面]
コードを触る場面はありません。管理画面から次の項目を変更できます。
| 設定項目 | 初期値 | 変えるとどうなるか |
|---|---|---|
| 表示する見出しレベル | H2 + H3 | 「H2のみ」でサイドバーが一気にすっきりする |
| アコーディオン | オン | オフにすると全見出しが常時開いた状態になる |
| 見出しの停止位置 | 110px | ジャンプ時に見出しがヘッダーへ潜るかどうかが決まる |
| アクセントカラー | テーマ色 | 現在地ハイライトの色。サイト配色に合わせられる |
| 目次の最大の高さ | 72vh | 超えた分は目次内でスクロール。600px 指定も可 |
| 表示する投稿タイプ | 投稿 | 固定ページやカスタム投稿にも出せる |
| 表示する最小の見出し数 | 2 | 短い記事で空の枠が出るのを防ぐ |
実際にいじる可能性が高いのは、上から3つです。特に3つめの停止位置は、後述するとおり環境ごとに決める必要があります。
導入は3ステップ・所要3分
[画像挿入：プラグインのアップロード画面]
FTPもコード編集も使いません。管理画面だけで完結します。
プラグイン → 新規プラグインを追加 → 「プラグインをアップロード」。ZIPは解凍せずそのまま選びます。ファイルサイズは15.1KBです。
外観 → ウィジェット →「追従サイドバー」に「サイドバー追従アウトライン」を追加。検索窓に「アウトライン」で出ます。ショートコード［sidebar_outline］ でも設置できます。
設定 → サイドバー追従アウトライン で「見出しの停止位置」を調整します。ここだけはテーマのヘッダー高さ次第なので、次の項で決め方を説明します。
XWRITEの管理画面まわりの基本操作に不安があれば、使い方ガイドを先に読んでおくとスムーズです。
一番のハマりどころ「停止位置」の決め方
[画像挿入：ジャンプしたとき見出しがヘッダーに隠れている状態と、正しく止まった状態の比較]
目次をクリックしてジャンプしたとき、見出しがヘッダーの下に潜り込んで隠れることがあります。逆に、ヘッダーとの間が空きすぎて間抜けに見えることも。これを決めているのが「見出しの停止位置」です。
意味は「見出しの上端を、画面の一番上から何pxの位置に止めるか」。初期値は110pxにしてあります。ヘッダーが固定表示されるテーマなら、ヘッダーの高さ + 20〜30px が目安です。
- 見出しがヘッダーに隠れる → 数値を大きくする（130、150…）
- 間が空きすぎる → 数値を小さくする（90、80…）
正確に決めたいなら、記事ページで右クリック → 検証（開発者ツール）を開き、header 要素を選択すると実際の高さが表示されます。その値に20〜30足した数字を入れてください。
ここ、最初はJavaScriptで自動計測させようとして失敗しました。ヘッダーの高さは測るタイミングで値が変わることがあって、自動のほうがかえって不安定だったんです。数値を手で決めるほうが確実でした。
追従エリアが無いテーマは、CSS3行で追従させる
XWRITE以外のテーマで、通常のサイドバーしか無い場合の話です。ウィジェットを普通のサイドバーに置いたうえで、外観 → カスタマイズ → 追加CSS に以下を貼ります。
.widget_soa { position: sticky; top: 80px; }top の数値はヘッダーの高さに合わせて調整してください。これだけで、目次がスクロールに追従するようになります。
表示されないときのチェックリスト
導入直後に「出ない」となる原因は、だいたい次の5つに収まります。上から順に確認してください。
- キャッシュを消す／一番多い原因。Ctrl+F5（MacはCmd+Shift+R）と、エックスサーバーのXアクセラレータなどサーバー側キャッシュも合わせて削除
- 見出しが2個以上あるか／初期設定では見出し2個未満の記事には表示されない
- 投稿タイプが合っているか／初期値は「投稿」のみ。固定ページで確認していないか
- 置いた場所／「追従サイドバー」に入っているか。エリアを間違えるとページ下部に出る
- 本文セレクタ／テーマによっては本文を自動判定できない。設定で
.entry-contentなどを指定する
5つめは、独自の本文構造を持つテーマで起きます。検証ツールで本文全体を囲んでいる要素のクラス名を調べて、設定画面の「詳細設定 → 本文のセレクタ」に入れれば解決します。
先に書いておく制約
良いところだけ書いても仕方ないので、弱点も出しておきます。
自動更新に対応していません
WordPress公式ディレクトリに登録していないため、管理画面から更新が降ってきません。更新版を出したときはnote記事側のZIPを差し替えるので、購入者は追加費用なしで再ダウンロードできます。入れ替えは、いったんプラグインを削除して新しいZIPを入れ直す形です（設定値は保持されます）。
ヘッダー位置の自動調整はしません
前述のとおり、あえて手動設定にしています。1回決めれば触らない箇所ですが、「入れた瞬間に完璧」ではない点は正直に書いておきます。
再配布・転載はできません
購入者ご自身が運営するサイトであれば複数サイトで使えます。ただしファイルの再配布・再販売、note記事本文の転載はご遠慮ください。
配布はnoteから（買い切り300円）
プラグイン本体のZIPと、設置手順・調整方法・トラブル対応をまとめてnoteで配布しています。無料部分だけでも「何ができるか」は全部読めるので、判断してから買ってもらえれば十分です。
動かない、こういう機能が欲しい、といった連絡はnoteのコメントかXまで。可能な範囲で対応します。不具合の報告時は使用テーマ名・WordPressのバージョン・Consoleタブのエラー表示を添えてもらえると、原因が早く分かります。
よくある質問（FAQ）
- XWRITE以外のテーマでも使えますか？
使えます。本文の見出しタグから直接目次を組み立てる方式なので、テーマの目次機能に依存しません。追従するウィジェットエリアが無いテーマでも、追加CSS3行でstickyにすれば同じ動きになります。
- 本文冒頭の目次と併用しても大丈夫ですか？
問題ありません。僕も併用しています。冒頭の目次は「これから何を読むか」の一覧、サイドバーは「いまどこを読んでいるか」の現在地表示、と役割が違うためです。
- スマホでは表示されますか？
サイドバー自体が本文下に回り込む表示になるため、追従はしません。スマホでの読了率対策は、本文冒頭の目次や別のUIパーツで補うのが現実的です。
- 表示速度への影響はありますか？
ZIPで15.1KBの小さなプラグインで、外部ライブラリも読み込みません。僕のサイトではPageSpeed Insightsのスコアに目立った変化は出ていません。ただし他プラグインとの組み合わせ次第なので、導入前後で一度計測することをおすすめします。
まとめ：XWRITEのサイドバー目次は、待たずに足せます
XWRITEの追従サイドバーに目次ウィジェットが無いのは仕様です。テーマのアップデートを待つより、プラグインで足したほうが早いし、テーマを乗り換えても残ります。
- 目次は本文の見出しから直接組み立てるとテーマを問わず動く
- 長文記事では「全部並べる」より「常に10項目前後」に収めるほうが機能する
- 唯一の調整箇所は停止位置。ヘッダー高さ + 20〜30px が目安
- スマホでは追従しない。効いてくるのはPCの長文記事
「この機能が欲しいのに無い」というものがあれば、リクエストしてもらえれば作れるかもしれません。非エンジニアでもここまでは作れる、という実例として見てもらえたら嬉しいです。
同じ流れで作った自作プラグインは他にもあります。こちらは商品比較表をブロックで作れるようにしたものです。
