WordPressテーマJINを使い、Table of Contents Plus（TOC+）で目次を生成。そのうえで見出しに”id”を埋め込んでページ内リンクを仕込むと、「目次をクリックした際に正常にその見出しに飛ばなくなる」という不具合が起きました。今回は、この症状の解決法をお伝えします。
JINにTOC+で目次を導入すると、見出しにidを設定して内部リンクしようとした際に不具合が起こる
WordPressのテーマである「JIN」で目次を表示する際には、プラグインの「Table of Contents Plus（TOC+）」の使用が推奨されています。
しかしこのプラグイン、H2～の「見出し」にアンカーリンク（id）を追加しすると不具合が起きます。（少なくとも当サイトの環境ではそうなりました）
<h3 id=”a”>見出しA</h3>
例えばこのように、見出しAにid=”a”を設定したとき。TOC+の目次の「見出しA」を押したときに飛ばなくなります。それどころか、見出しA以下の目次項目の飛び先が全てズレます。
Table of Contents Plusで目次作成 や ページ内リンク（テキストにリンクを設定して、リンク先にアンカーを設定）をして、リンクを飛ばすと若干下にずれてしまいます。CSSなどで調整する方法はありますか？
よろしくお願いします。
JIN公式フォーラムより引用
おそらく、JINの公式フォーラムのこの質問も、この症状のことを言っているのでは？と思いました。（まったく別の話かもしれませんが…）
結論から言えば、これはJINというよりもTable of Contents Plus（TOC+）の仕様によるもの。不具合というよりも、そもそもこうなってしまう作りなのだと考えられるので、その仕様を利用するのが簡単な解決法に思います。
結論、見出しにジャンプしたいときは、「rtoc-（数字）」にリンク設定すれば、不具合が起きない
どうにかして見出しにもidを設定できるようになれば良いのですが、それは一旦諦めました。
シンプルな解決策は、Table of Contents Plus（TOC+）で目次を作る際に内部で自動で設定されるリンクを利用することです。
TOC+で目次を用意すると、見出しの順番に自動で連番のアンカーが設定されます。目次を見たときに見出しがn個あるなら、上から順番にrtoc-1、rtoc-2、～、rtoc-nという具合。
なので、本文中で見出しに飛ばしたい箇所は「<a href=”#rtoc-1″>」などで設定してあげれば問題なくジャンプし、目次の挙動もおかしくならずに済みました。
上の画像で言えば、例えば「なぜ満足度が高いのか？」の見出しに飛ばしたい場合は「rtoc-2」。「静かに過ごせる」の見出しに飛ばしたい場合は、「rtoc-9」にリンクすればOKです。
不具合と解決策まとめ
というわけで、まとめると上の画像の通りです。
- Table of Contents Plus（TOC+）プラグインで目次を作る場合は、見出しにidを仕込むと不具合が起こる
- 自動設定されるアンカーを利用すればOK
- 上から数えてn個目の見出しには「#rtoc-n」でジャンプ可
こんな感じでした。もしもこのプラグインを使わなくなったときには全部設定し直す必要があるので、ちょっと不便ですね。
今回不具合が起きた、ページ内リンク（アンカー）とは
一応、そもそものお話もしておきます。ここからは今回の話題に上がったページ内リンクの仕組みの解説。
例えば「商品一覧の表」があって、その下に各商品の詳細の見出しが用意されているようなページをよく目にすると思います。商品名をクリックすると、その詳細にジャンプするような形。
そんなときに利用されているのが、ページ内リンクです。
飛ばしたい先に、idを設定する
例えば、このあとに設定するリンクで「ここ」に戻ってこようと思います。
下で「コレ」というテキストをクリックした方は、↑の「ここ」に戻ってきたはず。
今回は、飛ばしたい先のテキストにaというidを設定しました。
<span id=”a”>「ここ」</span>
こんな形です。これを、ページ内リンクを設定する、アンカーを設置する、などと呼びます。飛ばし先にid=”a”という目印を仕込んでおくようなイメージですね。
例えば<H2 id=”a”>といったように見出しに仕込むこともできるのですが、TOC+でそれをしてしまうと目次がバグると、そういう話です。上の例ように、見出しではなく通常のテキストに<span>を使って仕込む分には問題ありません。
飛ばしたい元テキストに、リンクを設定する
例えば、「コレ」をクリックすると、上の「ここ」に飛びます。
飛びましたか？
<a href=”#a”>「コレ」</a>
飛ばしたい元テキストには、このようにリンクを設定します。上で設定したアンカーに#をつけてリンク設定すれば飛ぶというワケですね。
テキストと書いていますが、ボタンでも、画像でも、通常のリンク同様になんにでも設定できます。わりとシンプルな仕組みなので、これ自体は簡単ですよね。
今回Table of Contents Plus（TOC+）で不具合が起こった理由は？
TOC+のプラグインが目次を生成するときに、「rtoc-n」というidが各見出しに設定されます。そうやってすでにidが設定されているにも関わらず、追加で見出しにidを設定することで、目次用のidに上書きされて目次が機能しなくなってしまった。
というシンプルな理由です。
JINを使うとき目次をTOC+で入れるなら、見出しにはidは設定しちゃダメ
もちろんこの症状を回避できているテーマやプラグインも沢山あるのですが、TOC+は残念ながらこのような仕様になってしまっているということみたいです。
見出しにはidを設定しない。という運用方法に決めてしまうことが簡単な解決方法でした。
それでは。
北海道ログの公式LINE始めました！
「あなたの上司が教えてくれないホワイトな働き方」をテーマに、LINEでしか読めないニュースレターを週に一回ほどゆるめに配信しています。
「働き方相談」も募集していますので、何か困ったことがあったり、記事にした内容で聞きたいことがあったりする方は、お気軽にメッセージください。必ず返信させていただきます。
とりあえず、下記のボタンよりお気軽にご登録下さい！
