犬とポケ森とモンスターボールと読書とか

ブログ作りやゲームのこと、トイぷーのことを書いています。

【はてなブログ】目次を表示させる方法

この記事でははてなブログ初心者へ向けて、目次を記事に表示させる方法の一例をご紹介します。すごく簡単にできますのでやってみてください!

 

f:id:marinote:20190127202835p:plain

 

 

 

はてなブログで目次を表示させる方法

はてなブログで目次を表示させるにはどういう方法があるのでしょうか?一番簡単な方法がこれから説明するやり方ですので練習と思ってやってみてください!

まずは見出しを使って記事を書きます。見出しには「大見出し」「中見出し」「小見出し」「標準」とあります。

f:id:marinote:20190127194839p:plain

例えば、一週間の食事内容を記事にします。こんな目次ができあがります。

f:id:marinote:20190127194905p:plain

 

まず記事を作成の画面で月曜日から書いていきます。記事を書きながら目次をどういうふうにつけるかも考えるといいかもしれません。

 

曜日に大見出しを使ってみました。朝昼夜は中見出し、おやつは小見出しです。分かりやすくするためにわざと(大見出し)などとしています。

 

f:id:marinote:20190127195328p:plain

 

ここでは「今週食べた物」の下に目次を表示させたいので目次を表示させたい場所にカーソルをもっていって目次ボタンを押します。[:contents]という表示がでればOKです。見たまま編集の画面では[:contents]という表示しかありませんが、プレビューでみると目次がでますのでそこで確認してください!

 

f:id:marinote:20190127195705p:plain

 

 ここまでできたら、プレビューで見ると目次が表示されているはずですので確認してみてください!できましたか?

 

目次のデザインを変えるには

もう少し違うデザインの目次にしたい!という方は、はてなブログに初めから入っている目次のデザインに加えて、CSSを使うと自分の好みの目次に変えることができます。CSSはいろんな方が公開してくださっていますのでそれを使ってみてください!

 

 こちらのサイトで紹介されている目次は動きます!!動く目次のほかにもいろいろCSSをのせてくださっています。

mshitech.hatenablog.com

 

女性むけはこちらのサイトにやわらかい感じの素敵な目次があります!

kimix.hatenablog.com

ほかにも、「はてなブログ 目次 カスタマイズ」で検索してみるとCSSを載せてくださっている方がいますので探してみてください!

おわりに

カスタマイズって楽しいですよね~。やってもやっても終わらないやつですね~。使用中のブログデザインのテーマによってはうまく目次が表示されないこともあるようなので、メモ帳とかにバックアップをとっておくことをオススメしまっす!

 

www.marinote.tokyo