初心者でも【超簡単】HTMLのみでブログに目次設定: アフィリエイト専科

2020年05月19日

初心者でも【超簡単】HTMLのみでブログに目次設定

初心者でも簡単にブログへ【目次機能】を設定する方法を紹介します。

【目次】
目次用HTMLコードコピペ設定
リンクコードコピペ設定
目次に必要な番地設定
まとめ

良く他人のブログなどで目次が表示されている記事を良く見かけると思います。
目次は、読む側のユーザーに記事を検索しやすくする為に設定する機能です。
記事を全部読んだ後に、もう一度あの部分の記事を読みたいと思った時に最初から記事を読むのは大変ですよね！
そう言った時に有効的な機能と言えます。

本来の設定方法は、HTMLとCSSを組み合わせて設定するのが標準的ですが、今回はプログラミングが苦手な方でも簡単にHTMLのみで設定できる方法を
紹介します。
私の記事でシュミレーションしたいと思います。

HTMLコードコピペ設定

HTML【コピペOK】

【目次】
<a href="#ht"> 目次用HTMLコードコピペ設定 </a>
<a href="#ht_1">リンクコードコピペ設定</a>
<a href="#ht_2">目次に必要な番地設定</a>
<a href="#ht_3">まとめ</a>

先ず、ブログの記事上に目次用HTMLコードをコピーして貼り付けます。

目次用HTMLコードをコピーしてブログに設置したらタグとなる文言をピンクアンダーラインの所に記入する。
※私はの場合、【目次用HTMLコードコピペ設定】と設定しています。
これで目次用のHTMLの設定は完了。

リンクコードコピペ設定

リンクコード【コピペOK】

<h2 id="ht">目次用HTMLコードコピペ設定</h2>
<h3 id="ht_1"> リンクコードコピペ設定 </h3>
<h3 id="ht_2">目次に必要な番地設定</h3>
<h3 id="ht_3">まとめ</h3>

リンクコードをコピペして、目次HTMLで決めたタグの文言をピンクアンダーラインの場所に記入します。
文章のタグになるので、説明する文章を予め決めておくとタグ設定がしやすくなります。

目次に必要な番地設定

HTMLコードとリンクコードをリンクさせる為に番地を設定します。
私のブログで説明すると、"ht"で番地登録してます。
見出しタグが増えれば "ht_1" "ht_2と言うように番地を増やして対応できます。

ここが重要！

目次用のHTMLコード番地で "ht" の部分は必ず｢#｣をhtの前に入れて下さい。
"#ht"となります。
これは、HTMLコードとリンクコードを一致させる為の記号となるので忘れず｢#｣を入れて下さい。

まとめ

この方法を使えば、HTMLとCSSが苦手な方や初心者でも簡単に目次設定が出来ると思います。
見る側からすると、目次があればもう一度見たい部分を簡単に検索出来るので、集客にも繋がりやすいです。
まだ目次設定されていない方は、簡単ですので自分のブログに設定してみ下さい。
目次だけでブログの質がワンランクアップします。

CSS&HTMLを分かりやすく解説した本

【このカテゴリーの最新記事】