Bloggerのカスタマイズ｜リンク機能を使って目次変わりにページ内リンク

ブログのユーザビリティを高めたいと思い、記事に目次をつけるか検討しました。

bloggerはワードプレスのような便利なプラグインはありませんが、自動で作れる方法が検索すれと見つかりました。

しかし、当ブログはそこまで長文ではなく、見出しが何個もあるわけではありません。

そこでページ内リンクを代用することで、簡単に目次が設置できるかを考えました。
ページ内リンクとは、クリックすると同じページ内の指定の場所まで移動するリンクになります。


まず項目リストを作り、その各リストのリンク先を、該当する見出しに設定すれば、目次のできあがりです。
イメージはこんな感じです（見出し1のみページ内リンクを設定）。

【目次】
■見出し1（クリックしてください）
■見出し2見出し2見出し2見出し2見出し2

本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文

本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文

見出し1（クリックされたジャンプ先）

本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文

bloggerでパーマリンクをしてからURLとidを指定

見栄えはともかく、目次はよくブログでみる機能なので、イメージはつかめたと思います。
実装する前に必要なことはパーマリンクの設定です。
パーマリンクの設定をしておかないと、bloggerではURLのアドレスが変わり、任意の指定が認識されませんので要注意です。

1. 目次（クリックさせたいテキスト）を記述
2. bloggerでパーマリンクの設定、id名を決める
3. 目次（クリックさせたいテキスト）に、#ジャンプ先のid名を追記してリンクの設定
4. 見出し（クリックしたジャンプ先）に、記事内のhtml編集でidタグをつける

つまり「パーマリンクしたURL#id」「h2 id="id名"」を設定します。それでは、bloggerでページ内リンクのカスタマイズをしてみます。
この記事では「pagelink」でパーマリンクをし、「mokuzi」をidにしています。

bloggerでパーマリンクを設定

次に目次（クリックさせたいテキスト）にURLの指定をしますが、合わせて「♯」を付けて「ID」の指定が必要になります。
URLは「パーマリンクしたURL+ #id」になります

パーマリンクで設定したURLに♯IDを追記する

■見出し1（クリックしてください）にリンクしたURLは下記になっています。
【https://kumakumapanda.blogspot.com/2019/03/pagelink.html#mokuzi】

次に、見出し（クリックしたジャンプ先）にidタグをつけます。
htmlの編集モードで、クリックさせたい見出しを探すと

＜h2＞
見出し（クリックしたジャンプ先）

となっているので、h2に【h2 id="mokuzi"】とidをつけます。

ここでは、見出しがh2になっていますが、h3の場合はh3にidタグ

「パーマリンクしたURL#id」「h2 id="id名"」の設定をすることで、bloggerでも簡単にページ内リンクができました。記事のレイアウトはなるべく統一させたいので、目次に使いたいなら見栄えをどうするかですね。

見栄えやプラグインを考えるとワードプレスに移行する人の気持ちもわかります。
まぁアドセンスの収益もないので、勉強もかねて無料のbloggerでカスタマイズを頑張ります。