プラグインなし目次のテスト【manablog copy限定】
この記事にはプロモーションが含まれています
こんにちはユウキです。
今回のテーマです。
- プラグインなし目次のテスト【manablog copy限定】
移動前の文字コーディング
<a href="#link">移動前の文字</a>移動先の文字コーディング
<p id="link">移動先の文字</p>使用例です。
○○イヤホンのレビュー
上を下記のようにコーディングします。
<ul>
<li><a href="#link1">1.結論</a></li>
<li><a href="#link2">2.理由</a></li>
<li><a href="#link3">3.感想&体験談</a> </li>
</ul>移動先のコードです。link2のように「移動前」と「移動先」のコードを対応させるのかポイントです。
<p id="link1"><h2>1.結論</h2></p>
<p id="link2"><h2>2.理由</h2></p>
<p id="link3"><h2>3.感想&体験談</h2></p>※使用例で数字をつけているのは、#link、数字のないlinkを使ったことに起因すると思われます。普通に使用するのであれば、「link」、「link2」…という感じで使っても問題はありません。
リンクが機能するのか
で判断してください。
1.結論
今激に推しの○○イヤホンがこちらになります。
2.理由
激に推しのワケは何ぞや？
3.感想&体験談
ここに感想と体験を書こう。
目次を作成した感想
「週末のだらだらスマホユーザー」がほとんどなので、h3のタグにまでリンクは要らないと思う。
「それでもつけたい!!」という人はjQueryを追加すればできます。
こちらからどうぞ。
» 【Manablog Copy/プラグイン不要】目次を自作する方法を解説【簡単】
記事のテンプレ
無料で配布しています。
【プロ仕様】ブログのテンプレート【3000字はいける】
こんにちはユウキです。テンプレートを公開します。
