自分が書いたブログ記事を紹介する時、記事全体ではなく特定の部分だけ見てほしいので、任意の目次まで即リンクさせる方法はないかなぁ。
自分の書いた記事を紹介する時、はたまた記事内で内部リンクを貼りたい時、「記事全体を読ませる必要はなく、ある特定の部分だけを読んでほしい」というケースもあるでしょう。
加えてコンテンツが長いと、なおさら記事のトップから読ませるのは読者の事を思うと不憫です。
そんなときに便利なのが、「優先的に読んでほしい目次のリンクを直接貼り付ける方法」です。
難しい設定は全く必要ありません。
仕組みだけ理解しておけば初心者でも簡単にできるので、ぜひ知っておいてください。
目次
ブログ記事の任意の目次へリンクさせる方法
方法はとても簡単で、目次のリンクをコピーして貼り付けるだけです。
これが最も手っ取り早い方法ですが、リンクの一番後ろに「#○○（目次ID）」を付けたものを貼り付ける方法もあります。
例えば、ブログのキーワード選定に役立つ無料ツール、その名も「ラッコキーワード」！の記事のリンクは以下の通りで↓
「https://ryusei-komada.com/sea-otter-keyword/」
この記事の一つ目の見出し（目次）タイトルは「ブログにおけるキーワード選定の重要さとは？」です。
この目次には「1」というIDが設定してあるので、ここの目次へリンクさせたい時は、
「https://ryusei-komada.com/sea-otter-keyword/#1」
を貼り付ければOKです。
１つ注意点として、目次IDの前には必ず「#（ハッシュ）」を付けましょう。これを付けないとリンクが機能しないためです。
目次にIDを設定する方法＆設定した目次IDを確認する方法
さて、任意の目次へリンクさせる方法については以上の通りです。
しかし、そもそもな話、目次にIDが設定されていないとリンクで飛ばすことはできません。
なので次は、「目次にIDを設定する方法」と「目次IDの確認方法」について、解説していきますね。
目次IDの設定については、
- 手動で設置する方法
- プラグインを使って設定する方法
が２つ。
そして目次IDの確認方法については、
- IDが設定されているかの確認
- 設定してあるIDが何なのかの確認
の２つの意味があります。
「IDが設定されているかの確認」と言うのは、目次の設定を特に触っていない（目次用のプラグインも使っていない）場合、初期段階では目次IDは設定されていないためです。
「設定してあるIDが何なのかの確認」と言うのは、「Table of Contents Plus」などの目次自動生成プラグインを使っている場合、自動的に目次IDも設定されているためです。
「Table of Contents Plus」以外の目次生成プラグインをお使いの方は、設定の仕方をネットで調べてみてください。
手動で目次IDを設定する方法
プラグインを特に入れていない場合は、おそらく目次にIDは設定していないと思います。
ちなみに「目次」とは、<h2>などのタイトルタグから生成されるものです。
タイトルタグに任意のIDを付与させる方法はとても簡単です。
見出しタイトルの一番後ろにカーソルを置いて、「挿入」→「アンカー」をクリック
任意のIDを入力
※IDは半角英字で始め、英数字，ダッシュ，ドット，コロン，下線のみ使用する必要があります。
これでタイトルタグに任意のIDが付与できました。
リンクを貼る際は、「#○○（設定したID）」を一番後ろに付けましょう。
「Table of Contents Plus」で目次IDを設定する方法
「Table of Contents Plus」などのプラグインを使っている場合、自動で目次IDは設定されます。
初期設定のままだと割と適当にIDが設定されるため、任意のIDを各自で設定しておくことをおすすめします。
「Table of Contents Plus」を開いて、「上級者向け」の横の青文字をクリック
「アンカーのデフォルト接頭辞」に任意のIDを設定する
例えば「1」と設定した場合は、
- <h2><span id=”1″>（見出しタイトル）</span></h2>
- <h2><span id=”1-2″>（見出しタイトル）</span></h2>
- <h2><span id=”1-3″>（見出しタイトル）</span></h2>
- <h2><span id=”1-4“>（見出しタイトル）</span></h2>
となり、「1」を接頭辞としてその後ろが連番になっていきます。
繰り返しですが、例えば見出し2へリンクを飛ばしたい場合は、リンクの一番後ろに必ず「#」を付けて「#1-2」と追記させましょう。
分かりやすいIDが無難だと思うので、1とかaとかで良いと思います。
目次IDを確認する方法
設定した目次IDは、HTMLソースを開くことで確認することができます。
記事を開いて、右クリック→「ページのソースを表示」をクリック
ブラウザは「Google Chrome」「Microsoft Edge」のどちらでも大丈夫です。
F3キーを押して検索モードを立ち上げ、「<h2>」と入力して設定したIDを確認
HTMLソースから<h2>などのタイトルタグを探し出すのは大変ですが、検索機能を使えば余裕で発見できます。
タイトルタグに続いて「id=”○○”」という表記があるはずですが、それが先ほど設定したIDです。
これでタイトルタグID（目次ID）が確認できましたね。
ちなみに、<h1>は多くの場合において記事タイトルで使われるものなので、記事内では<h2～h6>を使用するのが常識です。
以上、目次IDの設定と確認方法でした。
まとめ
目次IDは手動で設定することが可能ですが、やはり一つずつ設定していくのは手間ですよね。
「Table of Contents Plus」を使えば簡単に設定できますし、機能も色々あって使いやすい印象です。
まぁ騙されたと思って一度使ってみてはいかがでしょうか。
それでは、今回はこの辺で。
ありがとうございました。
チャオ(･∀･)!
コメントを残す