Affinger5 ブログ運営

Affinger5で目次と見出しを連携【目次をカスタマイズする手順】

 

「クリックすると見出しへ瞬時に移動する目次って、Affinger5でどう作るの?」

 

このような疑問を解決しますよ。

 

よく見かけますよね。クリックするとお目当ての見出しへ瞬間移動する目次

「快適だなぁ。マネしたいなぁ。」って思いますよね。

 

私もこの記事を執筆するにあたって、重い腰を上げまして、このブログにも取り入れることを決意。

学び、実践したことを皆さんへご紹介してまいります。

 

それでは早速。

 

そもそもAffinger5でお目当ての目次を作るには、主に2種類の方法があります。

  1. Table of contents Plusというプラグインの導入
  2. Affinger5に初期搭載されているタグの活用

 

今回ご紹介するのは、後者による目次の作り方です。

 

記事作成画面のメニュバーにて、タグ→その他のパーツ→目次(カスタム)の順に選択しましょう。

後日スクショ画像を掲載予定です。ご不便おかけします。

 

すると、以下のような未確認物体が姿を表すことでしょう。

 

 

最初見た時、「なんだコレ。使い方全然わかんねー。」って私は直感で思いました。

 

でも大丈夫。ご安心ください。手順に沿って設定すれば、以下のように理想の目次が完成しますよ。

 

 

 

最終的にはこんな感じで見出しに飛べるようになりますよ。

 

ご一緒に最後まで頑張りましょう。記事作りはもっと楽しくなるはずです。

 

紐付けしたい見出しの数だけ<li>タグの追加

 

タグの追加・紐付け作業は、右上のビジュアルモードからテキストモードに切り替える必要があります。

 

目次(カスタム)タグを貼り付けテキストモードで確認すると、各メニューは以下のように表示されますよね。

 

下記のようなコードを<li>タグと呼びます。

 

<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>

 

今回は3つの見出しを紐付けしていきます。

 

もっと紐付けする見出しがある場合は、タグをさらに追加しましょう。

 

 

見出し<各種hタグ>と<li>タグの紐付け

 

 

この見出しでは、<li>タグと見出し(=hタグ)の紐付けします。

 

<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>

 

#の後ろにはmidashi01を筆頭に番号順に入力します。

メニュー○の箇所は紐付けする見出し名と一致させましょう。

 

今回紐付けする見出し<各種hタグ>は、全てh2になります。

 

見出しを挿入したら、aタグを以下のように入力しましょう

 

<h2><a id="midashi01"></a></h2>

 

midashi01の箇所は1から順に番号順で入力します。

 

例えば、下記の「まとめ」見出しを取り上げてみましょう。

 

「まとめ」の見出しは、h2タグを使用しており、目次では3つ目の項目ですね。

 

そのため以下のようなコードで紐付けされています。

 

目次 → <li><a href="#midashi03">まとめ</a></li>

見出し→ <h2><a id="midashi03"></a>まとめ</h2>

 

 

まとめ

 

当初はコードをいじるのに対し、少し抵抗があったかもしれません。

 

しかし、実際にやってみると意外と簡単だった気がしませんか。

 

3つくらい練習すると、それ以降はあまり時間が掛からずに目次を紐付けできるかと思います。

 

皆様の素敵なブログ運営のお役に立てたら幸いです。

 

最後までご覧いただきありがとうございました。

 

 

-Affinger5, ブログ運営

Copyright© ハナマログ , 2020 All Rights Reserved Powered by AFFINGER5.