読者です 読者をやめる 読者になる 読者になる

Logreamo

脱力系フリーターの雑記ブログ

【気になったので調べてみた】はてなブログで目次を作って記事を見やすくする!

どうも、最近目次の作り方を知ったchika(@chika0831)です。

 

いろんな方の記事を見て「どーやってやるんだろうなー」と思いつつも、めんどくさがって放置していましたが

 

やっと調べました!笑

 

 

そんでいざ調べてみると、、、、意外と簡単!

 

めんどくさがりって損ですね。。。。。。

 

 

 

そこで今回は目次の作成方法をアウトプットついでに紹介したいと思います! 

 

目次

 

見出しを作る

目次を作成するため、まず見出しを作ります!

  

見たまま編集から

記事の編集画面から↓の図のように左上の『見出し』の部分をクリックし、見出しを作成します。

f:id:chika_0831:20170321225428j:plain

 

 

HTML編集から

またはHTML編集で↓の図のように<>内のpの部分を見出しの大きさに合わせて

 

大見出しはh3、中見出しはh4、小見出しはh5

 

に変更すると見出しを作ることができます。(なぜ3,4,5なのかはわかりませんが)

 

f:id:chika_0831:20170321232704j:plain

 

はてな記法

実際にやったことはありませんが、はてな記法の場合で見出しを作る場合それぞれ

 

大見出しは*、中見出しは**、小見出しは***

 

と*(アスタリスク)をつけることで見出しが作れるみたいです。

これだとメモ帳とかで書いたものをそのままコピペでできるので便利ですね。

 

 

さてさて、これで目次を作る準備ができました! 

 

 

[:contents]を記入して目次を作成

さて、本題の目次の作り方ですが

 

目次を作りたい箇所に[:contents]と書くだけです。

 

めちゃくちゃ簡単じゃないですか?笑

 

 

↓こんな感じで[:contents]と記入すると

f:id:chika_0831:20170321235427j:plain

 

 

ちゃんと目次ができてます! 

f:id:chika_0831:20170321235501j:plain

 

おわりに

いかがでしたでしょうか!

 

上記の他にもCSSを使って目次を自由に作れるみたいですが、それはまたおいおい勉強していきます!笑

 

 

「HTMLとかCSSなんて難しくてわからない!」

なんて人でもこれなら超簡単なので是非やってみてください!!

 

 

 

以上chikaでした!!