雑記ブログ卒業

生活に役立つ雑記ブログ

はてなブログの目次の使い方!これを読めば悩まない!

こんにちは。『ざっきぶろぐ』です。

 

皆さんは、はてなブログの目次の使い方で悩んだことはありませんか?

 

「どうやって”目次”を入れたらよいのか分からない」「目次を入れるのって結構難しいんでしょ?」と思うかもしれません。

 

先に結論を書きますが、はてなブログで記事を書く時に目次を入れるのは、たった数秒でできます。

 

今回はそんな『はてなブログの目次の使い方』をご説明します。これを読めば、必ず目次を作れますのでやってみて下さいね。

 

f:id:zakkiblog:20200304053543j:plain

 

 

①通常通りに記事を作成しよう。

まずは通常通りに記事を書きましょう。特にこだわったりせず、いつも通りでOKです。ただ1つ注意点があります。それは『目次』となる "見出し" を必ず作成することです。

 

②見出しを作成する。

f:id:zakkiblog:20200304054140j:plain

www.zakkiblog.net

 

見出しは編集画面の左上にあります。(上の写真参照)通常は『中見出し』でOKです。

 

HTMLに詳しい方だと、中見出しがh4、小見出しがh5に当たりますが、ブログ初心者の方はとりあえず『中見出し』で問題ありません。

 

見出しにしたい部分を選択していきます。あとあと、これが目次となります。

 

私の場合、ここまでで2つの見出しを作ってみました。(下の写真参照)

 

f:id:zakkiblog:20200304054945j:plain

www.zakkiblog.net

 

③目次ボタンを押すと自動生成される!

なんと、この3つ目でもう終わりです。目次を入れたい場所にカーソルを合わせて、下の写真の『目次』というボタンを押します。

 

f:id:zakkiblog:20200304055558j:plain

www.zakkiblog.net

 

すると、

[ :contents ]

という文字が出てきます。

 

下の写真のようにプレビューで確認してみると、目次が表示されていますね。

 

f:id:zakkiblog:20200304060040j:plain

www.zakkiblog.net

 

はてなブログの目次の作り方は以上になります。

お疲れ様でした。

 

まとめ

もう一度「はてなブログの目次の作り方」をまとめてみますね。

 

①普通に記事を書く。

②見出しを付ける。

③目次ボタンを押す。

 

とても簡単ですし、慣れれば何も考えずに数秒で自動生成できるので、ぜひ使ってみて下さい。

 

「追記」大見出し~小見出しの違い

先程も少し触れましたが、はてなブログには「大見出し」「中見出し」「小見出し」「標準」の4パターンがあります。

 

大見出し→h3

中見出し→h4

小見出し→h5

 

HTML編集で見ると、この数字のついたコードで文章をサンドイッチし、見出しを作っていることが分かります。(下の写真参照)

 

f:id:zakkiblog:20200304061607j:plain

www.zakkiblog.net

 

WEBサイトを作成するのにHTMLという言語が使われていますが、この見出しはHTMLのプログラミングの最初の1歩なんですね。

 

私も詳細までは分かりませんが、ある程度の知識はあるので追記してみました。もし皆さんの中で、さらに知りたいと思われた方がいたらぜひ色々調べてみて下さい。

 

それでは今回の記事はここまでになります。当サイト『雑記ブログ卒業』はWEB・パソコン、ブログ運営に関する他の記事も書いていますので良ければご覧ください。それでは。