AFFINGERカスタマイズ

AFFINGERの機能で目次が作れる!!目次プラグインなしで作る方法を紹介

2022年1月2日

 

ムロ
見出し1をクリックしてください!見出し1にジャンプします。

 

 

今回は、AFFINGERの機能を使ってプラグインなしでも目次を作ることができます。

 

有名なのは、『TOC』プラグインを使うことなのですがプラグインを使うことによって記事の表示速度が遅くなることもあるので。

 

AFFINGERでの既存の機能を使うことで、表示速度が遅くならくネットが重いと感じることがないというメリットがあるので紹介します。

 

本記事の信頼性

\当サイト限定特典付き/

AFFINGER申し込む

※AFFINGERで稼ぐ

 

 

 

AFFINGERでもくじを作る

 

 

これが、AFFINGERの機能で作ったもくじです。

 

 

 

step
1
目次のタグを出す

タグ>>その他のパーツ>>目次(カスタム)

 

ムロ
これだけでは、まだ不完全な目次ので、テキストモードで少しカスタムをしていきます。

 

step
2
目次のタグをテキストモードでカスタムする

 

テキストモードだとこんな感じ

 html
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>

目次をカスタムする

 html
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#1">メニュー1</a></li>
<li><a href="#2">メニュー2</a></li>
<li><a href="#3">メニュー3</a></li>
</ul>
</div>

 

<li><a href="#">メニュー1</a></li>    #1 という感じでナンバリングをふります。

 

step
3
目次のタイトルを入れる

 

メニュー1に、見出しのタイトルをいれる。

 

step
4
見出しにidのナンバーを入れる

 

見出しのh3を目次のタイトルに入れた場合に、テキストモードでh3の見出しにid="1"を<h3>見出し<h3>に付け加えをします。

 

ポイント

挿入する目次タグは、(半角スペース)id="〇"

「〇」の中には、半角数字を入力します。

 

 

こんなな感じでテキストモードでカスタム

 html
<h3 id="1">見出し</h3>

 

見出し1

 

 

この記事の目次、『見出し1』をクリクックすると、この見出し1にジャンプしてきます。

 

これで、AFFINGERで見出しを作ることが完了です。

 

 

お疲れ様でした( ^ω^ )

 

 

\当サイト限定特典付き/

AFFINGER申し込む

※AFFINGERで稼ぐ

 

広告1

広告2

-AFFINGERカスタマイズ
-, ,

© 2022 MURO BLOG Powered by AFFINGER5