はてなブログで目次を作るのはチョー簡単!ボタン1つでできます。

スポンサーリンク

はてなブログを利用している人のブログの中には、とても綺麗で見やすい目次を使用している人がいますよね。

 

私がはてなブログを始めてから少し経った頃、他の人のブログを見ていた時にクリックしたら各見出しのところまで移動できる便利な目次を載せているブログがたくさんあることに気づきしました。

 

同じような便利な目次を作るにはどうしたらいいのかを調べてみたら、とても簡単だということがわかりました!

 

知っている人はたくさんいるかと思いますが、知らない人にとってはとっても有益な情報ですので、ご紹介いたします♪

 

 

PCであれば『目次』ボタンを押すだけ

PCでの編集であれば、文章作成中にツールバーにある『目次』ボタンを押すだけでそこに目次を作成できます♪

 

f:id:Ke15151515:20170627173434p:plain

 

 画像の通り『目次』ボタンを押すと、文中に『[:contents]』と文字がされ、これがブログ上では『目次』になります。

 

また文中に直接『[:contents]』と記入することでも同じく『目次』が表示されますので、これをコピペしても『目次』は作成できます。

 

ほんとにとても簡単ですね!

 

スマホアプリでは『[:contents]』と記入

スマホアプリでは『目次』ボタンがありませんので上記のように文中に直接[:contents]と記入もしくはコピペするようにしてください。

 

そうすれば同じように記事に『目次』を作ることができます♪

 

ボタンがあるだけで『目次』が作成できるのは本当にめちゃくちゃ便利なので、アプリでも『目次』ボタンを付けてくれればいいのに、、、というのはここだけの話です笑

 

 

『目次』作成時の注意点

『目次』を作成する際の注意点が1つだけあります。

 

記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ

目次を挿入したい行に、次のように[:contents]と記述します。前後には文字や空白を入れず、1行で指定してください。

と『はてなブログ開発ブログ』にもあるように、前後には『文字』及び『空白』入れず、[:contents]を記入する行には[:contents]のみを入れるということです。

 

上記の文中にも[:contents]と出ているところがありますが、前後に文が入っているので目次にはなっていません。

ブログを編集していると何故か知らない間にスペースとか入ってしまっている時があるので、ブログを見た際に『目次』が表示されず『[:contents]』のまま表示されている場合には、同じ行の前後に空白や文字が入ってしまってないか確認してみましょう。

 

 

はてなの目次は見出しのサイズに応じて自動で段落を変えてくれる

はてなブログの見出しには 『大見出し』『中見出し』『小見出し』というような形でサイズ分けされておりますよね。

はてなブログの目次機能で作成した『目次』はこれに従って作成されます。

 

大見出し

中見出し

小見出し

 

 

このように見出しのサイズを変えることで、目次の中の段落を変えて見やすくしてくれていますね♪

 

ボタン1つ、コピペ1つでこんな便利な目次を作成してくれるはてなブログは、プログラミングなどが全くできない私にとって本当に便利でありがたいです♪

 

まとめ

今日は『目次』の作成がめちゃくちゃ簡単だということを紹介いたしました♪

 

本当に簡単なので、プログラミングに詳しくない方でも今からでもすぐ自身のブログに『目次』を表示させることができますね!

 

是非この『目次』機能を使って自分のブログに簡単に『目次』を表示してみてください♪

 

 

広告を非表示にする