はてなブログを使いこなす～目次の作り方～
こんにちは、スパローです。
ブログの最初に、「目次」があるとわかりやすいですよね。
昨日ブログを初投稿したのですが、お恥ずかしながら目次の作り方ががわかりませんでした。今日の目標は囲みのある目次を作ることです。では、やってみます。
（作業すること何十分だっただろう…）
ほら～、できました！（うれしい！！）
それでは今日の本題です。
ブログのツールを使いこなす
便利機能３選
左から「見出し」「HTML編集」「目次」です。ひとつづつ順番に見ていきましょう。
１．見出し機能
見出しは３つあって、「大見出し」「中見出し」「小見出し」です。見出しにすると、文字の大きさが勝手に変わってくれます。設定しているブログのデザインによっても、見出しのデザインが変わるみたいです。
見出しにしたい文字を選んでから見出しの種類を選びます。見出しの下には普通に文章を入力して大丈夫です。
２．目次機能
見出しにしたい部分を選び終わったら、見出しを挿入したい場所に文字入力のカーソルを合わせて、「見出し」のボタンをクリックします。そうすると、編集画面では「[:contents]」と表示されます。
目次を付けると各見出しへのリンクになるので、たくさん項目があるときには便利です。
プレビューで確認するとこんな感じです
３．HTML編集で文章を囲む
最後に、目次に囲み線を付けます。こちらのブログを拝見しました。囲みの部分はHTMLを少し追加するだけでできました。HTMLについては初心者でもできる説明があってとても助かりました。
HTML編集の画面から、囲みたい部分を見つけましょう。見出しを囲みたいので、先ほど挿入した[:contents]の部分です。わかりやすく上下を改行しました。
矢印のところに、これ↓↓↓をコピペすると、
<div style="background: #fff; padding: 10px; border: 3px solid #6495ed;">
</div>
できました～！！（歓喜）
赤いラインの番号を変えると囲みの色が変更できます。薄めの青がよかったので下のリンクを参考に変更しました。
◎今日のまとめ
無事、今日の目標達成です！HTMLにも興味が出てきたので、少しずつできることを増やしていければいいなと思います。
