ブログで「目次の作り方」を紹介。見やすいブログを心掛ける。

write:2020.6.12 rewrite:2020.7.5

僕を形造るものを文字で表現したBLOG作成をしているKEN-KENです。

今日は、他の方のブログを見ていて目次の作り方がわからないって思ったことありませんか。長文を作ると読者は読んでいて疲れてきてしまいますよね。

目次

• 目次の部分のコード紹介
• 目的地のコード紹介
• 実践！！

まず目次の部分を作ってみましょう。

①文章入力欄右下の「HTML」ボタンをクリック。

　文章入力欄にHTMLコードが表示されます。

<div style="padding: 0.5em 1em;
　　　　　　margin: 2em 0;
　　　　　　border: double 5px #4ec4d3;">
　　　<div>目次</div>
　　　<ul>
　　　　<li><a href="#1">目次の部分のコード紹介</a></li>
　　　　<li><a href="#2">目的地のコード紹介</a></li>
　　　　<li><a href="#3">実践！！</a></li>
　　　</ul>
</div>

上のコードをHTMLにコピー&ペーストしていただけたら目次に成ります。

②目次から目的地まで飛んでいく様に指示をしたいわけですが、

まず目次となる部分が

<a href="#□”>目次</a>

となっています。

これは目次にリンクをつけていまして、目的地はidが□のところですよという意味です。

この＃はidの意味です。

目的地のコードは、

<div id="2">②目次から目的地まで飛んでいく様に指示をしたいわけですが、</div>

こんな風になってます。

<div id="□">

上のコードを目的地となるところに追加してください。

（□の部分は目次と目的地を統一してください。）

③では実際にやってみます。

　まず目次を作りましょうね。

目次

上の目次コード：

<div><a href="#11">目次</a></div>

目次をクリックしてみてください。

目的地

上の目的地コード

<div id="11">目的地</div>

・・・お分かりいただけただろうか。

目次から目的地まで飛びましたね。

目的地にも忘れずにコードを追加してくださいね。