今回は、はてなブログの記事に目次を挿入する方法について解説します。
目次をブログ記事のはじめに設置することで、ユーザーは長い記事であっても内容がすぐにわかるようになります。また、場合によっては記事内の読みたいところから読み始めることもできるので、ユーザーの満足度を上げることも可能です。
本記事の内容に沿って作業すると、簡単に目次が作れますのでぜひブログに取り入れてみてください。
記事のブックマークは、はてなブックマークボタンからどうぞ。オンライン上にブックマークを保存して、どのデバイスからでも記事が読めます。
はてなブログで目次を挿入する簡単な方法
はてなブログの目次とは、上の画像のようなやつですね。
はてなブログは記事の編集がとてもやりやすい仕様になっているので、以下の手順で目次の生成も簡単にできます。
【はてなブログの目次の設置手順】
- 普通に本文を書く
- 目次にしたい部分を見出しにする
- 目次を挿入したい場所にカーソルを合わせる
- 目次ボタンを押すと、目次が挿入される
- 目次がうまくできたかプレビューで確認する
では、手順を順番に画像付きで解説していきます。
普通に本文を書く
↑まずは普通にブログ記事を書きます。ブログ記事に目次をつけたいときは、上の画像のように本文に見出しを付けて階層化していきます。見出しの付け方は、次で説明します。
目次にしたい部分を見出しにする
↑見出しの付け方はとても簡単です。
【見出しの付け方】
- 見出しにしたい文章を入力
- 見出しにしたい文章を選択
- 見出しボタンを押して、大見出しを選択する
この見出しを付けたところが後から目次として生成されます。ここでは見出しを”大見出し”にしましたが、お好みによって”中見出し”にしても、”小見出し”にしてもOKです。
目次を挿入したい場所にカーソルを合わせる
↑見出しと本文が出来上がったら、目次を挿入したいスペースにカーソルをあわせます。上の画像で赤く囲った部分に目次を挿入してみたいと思います。
目次を挿入する
↑タイトル入力欄と本文入力欄の間にある目次ボタンを押すと、「contents」というコードが挿入されます。
編集画面では、「contents」と書かれているだけですが、実際に記事を表示してみるとちゃんとした目次が出来上がっているはずですので確認してみましょう。
目次が完成！うまくできたかプレビューで確認する
↑目次を設置したら、プレビューでうまくできているか確認しましょう。
上の画像のように簡単に目次が設置出来ました。これで目次の設置は完了です。お疲れさまでした！
目次は階層化カスタマイズも可能
↑本文中の見出しの大きさを変更することで、目次を階層化することも可能です。先ほどは、すべての見出しを”大見出し”にしていましたが、そのうちの一つを”中見出し”に変更してみます。
↑見出しを”大見出し”から”中見出し”に変更すると、上の画像のように目次が階層化されます。
本文が長文になる場合や、文章構造が複雑な場合は、上の画像のように目次を階層化しておくと、ユーザーが記事の内容をより理解しやすくなるのでおすすめです。
まとめ：はてなブログで目次を挿入する簡単な方法
最後に記事のまとめです。はてなブログで目次を作る手順は以下の通りでした。
【はてなブログで目次を作る方法】
- 普通に本文を書く
- 目次にしたい部分を見出しにする
- 目次を挿入したい場所にカーソルを合わせる
- 目次ボタンを押すと、目次が挿入される
- 目次がうまくできたかプレビューで確認する
長々と5ステップも書いていますが、普段から見出しをつけてブログ記事を書いている人にとっては、目次ボタンを押すだけで目次が生成できるのでとても簡単ですね。
ブログ初心者の方は、はてなブログに目次を挿入して読者が読みやすい記事の作成を心がけましょう。
