こんにちは、ふなさんです。
編集画面には「目次」という項目がありますが、実際どのように使ったらよいのかわからないという人もいるのではないでしょうか。
難しそうですが、とても簡単に目次を作ることができます。
今回ははてなブログで目次を作る方法を紹介したいと思います。
①手順1＊記事を書く
まずは普通に記事を書きます。
私は記事を書く前にある程度見出しを作るのですが、どちらが先でも構いません。
②手順2＊見出しをつける
次に、記事に合うようにいくつか見出しをつけます。
大見出しではなく<h2>見出しを使ったほうが検索順位に優位らしいですが、大見出しのほうがデザインがかわいいです…。
どちらを使うかは好みでいいと思います。
③手順3＊目次を作る
最後に、目次を作りたいところにカーソルを合わせます。
カーソルを合わせて目次のボタンをクリックすると、このようにcontentsと書かれたものが表示されます。
プレビューをすると、このような感じになります。
大きい太字になっているのが<h2>の見出しで、かわいいデザインのものが大見出し<h3>です。
この目次はかなりシンプルなものですが、凝ったかわいいものにするためには、CSSの勉強をする必要があるため省略させていただきます。
④番外編＊目次と見出しのテンプレ
ここまで目次と見出しのつけ方を紹介しましたが、私は上記の方法では目次をつけていません。
以下のHTMLタグをコピペして記事を書き、ブログ記事編集画面の「HTML編集」に貼り付けて使っています。
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">
<b>目次</b><br />
<a href="#1">見出し1</a><br />
<a href="#2">見出し2</a><br />
<a href="#3">見出し3</a><br />
<a href="#4">見出し4</a><br />
<a href="#5">見出し5</a><br />
</div>
<h2 id="1">見出し1</h2>
<h2 id="2">見出し2</h2>
<h2 id="3">見出し3</h2>
<h2 id="4">見出し4</h2>
<h2 id="5">見出し5</h2>
このHTMLタグを使うと、この記事のような目次・見出しデザインになります。
参考にしたサイト↓
⑤まとめ
以上、はてなブログで目次を作る方法の紹介でした。
目次の作り方自体はとても簡単ですが、おしゃれなものにするためにはある程度の勉強が必要で難易度が高めです。
私はCSSについてはよくわかっていないため、ブログで紹介することはできませんが、いずれ勉強したいと思っています。
では、今日の記事はここまで。 最後までお読みいただきありがとうございました！
