つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

はてなブログに目次を作る方法とおしゃれなカスタマイズ

はてなブログに目次をつくっておしゃれにカスタマイズしよう

おすっ!つな(@tu_na_69)です(*^-^*)

はてなブログに目次をつけて、ちょっとおしゃれにカスタマイズしてみましょう。

 

以前から「ブログに目次が欲しい」と思っていたのですが、「きっと難しいんだろうな」と後回しにしていました。

ところが、なんと(。-`ω-)!!

はてなブログでは、クリックひとつで簡単に目次を挿入できる便利な機能がはじめから備わっていたのです!

なんですとΣ(・ω・ノ)ノ!

ブログに目次は必要なの?

目次はブログの目印ともいえる大事なパーツです。

まずは今回作ってみた目次を見てください。

 

目次があれば、そのページにどんな内容の記事が書かれているのかひとめでわかりますよね。

例えば、調べものをしたい時に、検索エンジンからタイトルを見つけて記事を読んでみたけれど、知りたかった内容ではなかった・・・なんてことありませんか?

目次があれば、ざっと見て自分が求めている情報かそうでないか判断することもできます。読者が「最後まで読んで損をした」なんて残念な気持ちなることもありませんよね。

また、目次タイトルにはリンクを設定しているので、欲しい情報に目次からまっすぐジャンプすることもできます!

読者だけでなく、目次はSEO(検索エンジン)にも効果的なようです。検索結果のページで目次へのリンクが表示されるようです。目次を入れると上位に表示されるようになるというようなSEO効果については、検証していないのでわかりませんが。

目次があると記事が整理しやすい

目次は、記事を書く時にも役に立ちます。

のちほど説明しますが、目次は記事の中の「見出し」を利用して作ります。

目次を見た時に、それが分かりやすいタイトルになっているか、目次に沿った内容がまとめられているか、自分でチェックするようになりました。

文章を書く時にも目次に注目して、どんな見出しがいくつ必要かという文章構成を考えるようになりました。

目次を意識することで、よりよい記事を書こうとするようになりました。

読者だけでなく、記事を書く自分にとっても目次は効果があると言えます。

目次を作るポイントは見出し

「見出し」とはこちらです↑。

はてなブログでは、記事の中にある見出しをそのまま取り出して、目次の項目にします。

みなさんも記事を書く時に、「見出し」を設定していると思います。

見出しをあまり使ったことがないという人は、この機会に見出しを作ってください。見出しを上手に使うと、記事が読みやすくなるだけでなくSEO(検索エンジン)にも効果があります。

 まずは、記事のなかに目次となる見出しを入れていきましょう。

はてなブログの編集画面では「h2」タグがないので気を付けてくださいね。

pea-nut.hatenablog.com

 

記事の中にいくつか見出しを設定できればOKです。

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

先ほども書きましたが、はてなブログの目次はクリックひとつで簡単にできます。

記事編集画面を開きます。

編集画面から↓ピンクで囲んだマークをクリックします。

これまで、このマークはなんだろうと思っていたのですが、目次だったんですね。

 

f:id:pea-nut:20180211205027p:plain

 

目次マークをクリックすると、緑で囲んだコードが出現します。

これが目次を表示するためのコードになります。

目次を設置したい個所に、このコードを入力すればOKです。

サイトを開いて確認してみてください。

 

↓こんな感じに目次ができました。

はてなブログ公式目次

目次をおしゃれにカスタマイズ

はてなブログの目次ができました。

ただ、公式の目次はちょっとシンプルすぎますよね(・´з`・)

点線の囲みとかグレーの背景とかタイトル前についている「・」←これとか

おじさんっぽい。

おじさん、ごめんなさい(T_T)

 

もう少しおしゃれにカスタマイズしたいと思います。

 参考にさせていただいたのは、「kimix」さんのサイトです。

kimix.hatenablog.com

 

シンプルでおしゃれでデザインの参考にさせていただきたいすてきなサイトです(*^-^*)

コピペで使えるCSSを公開してくれています。

かわいいリストマークで、シンプルなのにおしゃれ。

「・」←これじゃない。

見出しをすべて目次にするのではなくて、「h2」見出しのみ利用しているのもポイントです。

目次が無駄に長くない。

すっきりして見やすいと思います。

 

ダッシュボードから「デザイン」→「カスタマイズ」→「CSS」を開き、コピーしたコードを貼り付けます。

 ↓こんな感じになりました。

f:id:pea-nut:20180601154404p:plain

 

 目立ちすぎる「もくじ」が気になっている方におすすめのデザインです(*‘∀‘)

目次の確認で見出しのチェック

目次が出来上がったらチェックして、見出し設定を間違えていないか確認しましょう。

特に、はてなブログで<h2>見出しを手動で設定している方は、見出しの書き間違いがあればここでチェックできますよ。

わたしも気を付けているつもりですが、しょっちゅう見出しミスがあります。

見出しミスを見つけるためには、h2見出しだけでなくh3見出しも表示される目次の方がいいですよ。

 

ところで、この目次の記事が気になる!!という方は、こちらのつなろっくの人気記事をご覧ください←過大広告

pea-nut.hatenablog.com

 

記事を紹介しくれたサイト

この記事が参考になったと以下のサイトで紹介していただきました。ありがとうございます。 

ブログを始めて13日目 ナビゲーションメニュー【グローバルナビゲーション】・カテゴリのリンク・カテゴリの整理 - 林檎を買うまでには