はてなブログ 目次の作り方

最近なぜかクライアントから「Tsushanさん、癒されるわ〜〜〜」って言われることが多くなったTsushanです。ポジティブにとらえて、どんどん攻めていきたいと思います。

 

さて、前回の記事では、目次必要性と重要性を見てきました。

ブログ 目次の必要性 - Webディレクターtsushan’s blog

 

今日はその目次の付け方を見ていきたいと思います。

というのも、過去に記事を書くときに、最初に意外と苦労をした。

だから、同じように困ってる人もいるんじゃないかということで、今回その目次の付け方を記録に残します。よかったら参考にしてみてください。

 

では目次の内容を作りましょう。

 

目次の作り方として、以下の2種類の作り方が考えられます。

①先に文を全部書いてから、目次をつける方法。

②先に目次を作ってから、文を書いていく方法。

 

自分は②のタイプで、みなさんにも②を勧めたいです。

なぜなら、目次を先に考えることで、同時にブログのコンテンツ構成も考えれるようになるからです。さきに書きたい、伝えたい内容を決めておくことで、より短い時間で、簡潔にブログを書き上げることができるメリットがあります。

 

今日は、「親子丼を作る」とテーマで勧めていきたいと思います。

 

親子丼を作る上で必要な内容して以下のものが挙げれる。

①そもそも親子丼とはなにか

②必要材料

③手順

④注意点

この4つの項目が、この記事の骨組みになり、目次になります。 

目次の完成形のイメージは以下です。

f:id:tsushan:20171111175457p:plain
では目次にするためには、

まず上記4つに見出しをつけていきます。

 

はてなブログでは、「見出し」を自動的に「目次」として出力してくれる機能があるため、先に「見出し」をつけていく必要があります。

 

やりかたは簡単です。

目次にしたい箇所を図のように選択します。

f:id:tsushan:20171111171718p:plain

 

次に、ツールバー「見出し」を選びます。

 

f:id:tsushan:20171111172039p:plain

 

「大見出し」「中見出し」「小見出し」「標準」という4つの種類から、

自分が思う見出しのサイズを選んで、見出しを大きさを決めていきます。

ちなみ以下の画像が、それぞれ「大」「中」「小」見出しと「標準」にした場合の違いを比較したプレビューのスクショです。

 

f:id:tsushan:20171111172736p:plain

これで、見出しの作り方はわかりました。

 

では、いよいよ、目次の自動生成の仕方です。

 

①目次を挿入したところにカーソルを置きます。

ツールバーの目次を選択します。図参照

f:id:tsushan:20171111174112p:plain

 

そうすると、次のような表示が編集画面で表示されます。

f:id:tsushan:20171111174327p:plain

 

え!?最初の完成形のイメージ画像と違うじゃん!!ってなってる方

大丈夫です。

編集画面では、[:contents]って表示されても、

実際にプレビューで確認してみると、すでに完成図のような目次ができていますよ!

f:id:tsushan:20171111173428p:plain

でもあと一つ足りない。

それは、目次の項目の上に表示される「目次」という文字ですね。

f:id:tsushan:20171111175837p:plain

これは自動生成では表示されないため。

[:contents]の前に自分で「目次」と文字を入力して、文字サイズと太さを設定してあげる必要があります。

すると、下図になります。

f:id:tsushan:20171111180001p:plain

そして、最後にこの形のままプレビューで確認するとこのような、目次が完成します。(下図)

f:id:tsushan:20171111175457p:plain

いよいよこれで完成です!!

 

これは、アンカーリンクになっているため、

目次の内容を押すと、該当見出しに移動するようにできています。

 

これで、目次の作り方が完了です!!

ぜひ、みなさん試してみてくださいね!!

 

ではまた!