MENU
カテゴリー

[はてなブログ]で「目次」と「見出し」の作り方!図解で説明。驚くほど簡単に設定できる!

はてなブログ、目次と見出しを設定する

はてなブログのカスタマイズをしようとProへ変更したばかりの頃、ブログの記事の中に「目次」を作ろうと思っても、どのように作るのか全く分かりませんでした。

どうやって作るのか、疑問が疑問を呼び、、、「見出し」「目次」の設定を解説されている先人の皆様のブログをいくら検索して、読んでみても全く分からなかったのです。。

今回の疑問:はてなブログで「目次」と「見出し」を表示させるには?

見出しと目次の作り方が分からない…

この記事を読むと、はてなブログの「目次」「見出し」について理解し、作成することができます

はてなブログを少しづつカスタマイズしていくうちに、「あれ?こうやってやるのかな?」と、ようやく「見出し」「目次」作り方を理解することができました。

理解してみると確かに、なんでこんなに簡単なものが分からなかったのかな?と思う程簡単でした。私と同じように、「目次」「見出し」の設定の仕方がよくわからない方の為にできる限り分かりやすい説明を心がけました。

スポンサーリンク
目次

目次・見出しについて

目次とは?

さまざまなサイトを閲覧した時に、その記事がどんなことを書いているのかパッと見てわかるものがありますよね。記事を順番に書き並べたリストのようなもの。イメージとしては、下記の画像のような感じです。

目次のイメージ画像
目次のイメージ

目次を設定していると、そのブログ記事が一目瞭然でどんな記事について書かれてあるのかわかります。また、読みたい記事の文字列をクリックしするとその記事に一気に飛ぶことができ、目的の情報を効率よく読むことができます。

SEO対策としても「目次」を設置している記事の方が、上位表示されやすいそうです!

見出しとは?

見出しを設定することによって、読んでもらいたいブログ記事を1つ1つの段落に区切り、記事を読みやすくするためのもの。

それぞれの見出しの違いは下記のようになります。

見出しのイメージ画像
見出しのイメージ

多くのブログには「目次」「見出し」がありますね。
確かにこれらががあると見やすい!

見出しの作り方

完成実装図の確認

下記のような「目次」の完成を目指します!

これから作る目次のイメージ
完成実装図はこんな感じ。

「編集・見たまま」で記事を考え書いていく

例えば私も愛用している「マヌカハニー」についての記事を書くとします。「編集・見たまま」画面にどんな事を書きたいか、箇条書きにして記事を書いてみてください。

はてなブログの見たまま編集で編集していく
まずは、どんな内容の記事を書きたいのかを箇条書きにしてみます

最初はどんな「見出し」にして記事を書こうかすごく迷いました。
そんな時、いろいろな方のブログや記事をみてまわり「見出し」のイメージを湧かせました。

見出しの設定をする

早速、はてなブログで「目次」と「見出し」を設定してみようと思います。

はてなブログでは、「大見出し」「中見出し」「小見出し」の設定が可能です。

「見出し」にしたい文章の一番前にカーソルを置きます。

見出しの設定の仕方
見出しにしたい文章の一番前にカーソルをおきます

赤枠「見出し」にあるをクリックすると、どの見出しにするのか選択できるようになります。ここでは「大見出し」を選択します。

どの種類の見出しにするか考えて、見出しを選択する
「大見出し」を選択します

すると、いま「大見出し」を選択した箇所が太字になりました。この画面では「ホントにこれで大見出しになったの??」と疑問に思いますよね。私もそうでした。ここの「編集・みたまま」画面でただ文字が太字になっただけなので、不安は募りますよね。。

見出しを設定した画面
大見出しを設定した文字が太くなりました

その不安はのちほどクリアになりますので、安心して作業を続けていきましょう。

完成実装図の通りの通りの「見出し」を設定していきます。見出しにしたい文章の一番前にカーソルを置き、それぞれの見出しを選択してください。

見出しの種類一覧
それぞれに見出しを設定していきます

すると、それぞれ見出しを設定したところが太字になりました。その太字は微妙に大きさが違いますよね。なんとなく「大」「中」「小」になっているのがわかります。

それぞれに見出しを設定した
それぞれの行に見出しを設定しました。

目次を設定する

次はこれらの「見出し」を使って「目次」を設定します。ここでいえば、大見出しで設定した「マヌカハニーとは?」の前に「目次」を設定したいので「大見出し」マヌカハニーとは?の前にカーソルを置きます。

目次を設定する
目次を設定するには・・

次に、「目次ボタン」を押してください。すると、、

目次ボタンを押す
目次ボタンを押してみます

一番上に[:contents]と表示されました。

見たまま編集contentsが表示された
一番上に「contents」と表示されました

[:contents]が表示されたことを確認したら、「プレビュー」をクリックしてください。「編集・見たまま」画面では本当に「見出し」「目次」が設定されたのか不安でしたが、プレビューするとちゃんと設定されていることが確認できます。

プレビューに切り替えると、目次が設定されている
プレビュー画面で確認すると、目次が設定されています!

レビューで確認するとちゃんと見出し・目次が設置できてる!

これで、「見出し」「目次」の設定はひとまず完了です。

記事を書いていく

あとは、それぞれの見出しごとに記事を書いていけばOKです。「編集・見たまま」画面にもどり、それぞれの見出しの下に記事を書いていきます。改行して記事を書くスペースを確保してくださいね。

各見出しのしたにそれぞれの記事を書いていく
見出しを作ったあとは、その見出しにあった記事を書いていきます

こんな感じで記事を書いていきます。

見出しの下に記事を書いたイメージ
このように記事を書いていきます

今回は、見出しを先に考えてから記事を書いていきましたが、もちろんその逆でも大丈夫です。ご自身の書きやすい順番で見出しの設定をしてください。

「見出し」「目次」の設定の仕方を説明しているブログをみると、みなさん一様に「設定は簡単」とありましたが、確かに簡単でした。

が、はてなブログのみたまま編集の画面だけで理解しようとするとやはり「どうやるの??」と理解するのに時間がかかってしまいました。でもなんとか疑問が解決してよかったです。


この記事で疑問が解決できますように

よかったらシェアしてね!
目次
閉じる