お役立ちアフィリエイト

アフィリエイトに役立つ情報をあなたに

【図解】はてなブログで簡単に目次を作ろう!

こんにちは、サクです。

今回ははてなブログで目次を作っていきます。

目次とは

本で目次というと最初の方のページにある
内容の見出しを順番に並べたものですよね。

ウェブサイトで目次ってどういうこと?
という方もいると思います。

ウェブでの目次は
本と同じように

記事の見出しを順番にまとめて
記事の最初の方に掲載したものになります。
見出しがまとまっているので
読者の方が記事に何が書いてあるか把握しやすいんです。

 

本と違う点といえば
クリックしてその見出しの場所に飛べるという点です。
これはウェブならではの利点ですよね!

 

はてなブログには簡単に目次が作れる機能がありますので

その作り方をご紹介します。

 

この記事を見ている方ははてなブログはすでに持っていると思いますが

開設手順の記事もぜひ見てみてください!

oyakudachiafi.hatenablog.com

 

 

はてなブログで目次を作る手順

Step1 記事編集画面

f:id:oyakudachiafi:20181112153310j:plain

まず、記事を書く画面に移動します。

 

Step2 見出しをつける

f:id:oyakudachiafi:20181112153344j:plain

目次に使いたい文字を打ち込んだら
その文字を選択した状態にします。

そして、タイトル入力欄の下にある「見出し」をクリックします。
すると、「大見出し」「中見出し」「小見出し」「標準」と出てきますので
つけたい見出しの種類を選んでクリックします。

 

Step3 目次をつける

f:id:oyakudachiafi:20181112153724j:plain

見出しをつけると文字が太字になりましたよね
その状態で目次をつけたい箇所にカーソルを移動させます。
だいたい記事の最初の方ですよね。

カーソルを移動させたらタイトル入力欄の下にある目次のアイコンをクリックします。

すると[:contents]という文字ができたと思います。
これが目次を表しています。

プレビューで見てみましょう。

 

Step4 プレビュー

f:id:oyakudachiafi:20181112153743j:plain

プレビューを開くと[:contents]を設置した場所に目次ができていると思います。

目次の中身が階段状になっていますが
大見出しの下にある中見出しは大見出しの中のコンテンツという扱いになり
中見出しの中の小見出しは中見出しの中のコンテンツという扱いになる為です。
それぞれの見出しは何個でも作ることができます。

 

まとめ

あっという間に目次ができましたね。

自分で目次を作ろうと思うとウェブサイトを作るときのコードを勉強して
コードを作って・・・と手間がかかりますが
目次機能に限らず、こんな簡単に作ることができるなんて
作業時間の短縮にもなっていいですよね。

ぜひ、読者の方にわかりやすい目次を作ってみてください!

サクに記事の感想を送ったり聞きたい事を聞いてみる