つなろっく

イロトリドリな毎日

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

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

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

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

 「はてなブログに目次が欲しいけど、きっと難しいんだろうな」と考えているあなた。

なんと(。-`ω-)!!

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

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

目次って必要なの?

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

↓目次をみてください。

 

どうですか?

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

そのページにどんな情報が記載されているのか、すぐわかるのはブログにとって大事なポイントです。

検索エンジンから見つけた記事が知りたかった内容とは違った・・・なんてことありませんか?

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

タイトルのリンクから、欲しい情報にすぐジャンプすることもできるので、読者にとって目次はわかりやすいだけでなく使いやすくて便利なんです!

読者だけでなく、目次はSEO(検索エンジン)にも効果的です。検索結果のページで目次へのリンクが表示されることもあります。

目次で記事の整理整頓

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

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

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

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

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

読者だけでなく、ライターにとっても目次は効果があると言えます。

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

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

みなさんも記事を書く時に<h2>や<h3>タグで「見出し」を設定していますよね。

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

見出しをあまり使ったことがないという人は、この機会に見出しを作ってください。

見出しを上手に使うと、記事が読みやすくなるだけでなくSEO(検索エンジン)にも効果があります。

まずは、記事のなかに目次となる見出しを入れていきましょう。記事の中にいくつか見出しを設定できればOKです。

こちらの記事も参考にどうぞ。

pea-nut.hatenablog.com

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

記事中に見出しができたら、目次を設定してみましょう。

はてなブログの目次はクリックひとつで簡単にできます。

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

このマークはなんだろうと思っていたでしょ。目次だったんですね。

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

 

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

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

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

 

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

はてなブログ公式目次

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

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

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

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

おじさんっぽい。

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

CSS(スタイルシート)を書き加えておしゃれにカスタマイズしてみましょう。

CSSを貼り付ける場所は、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」です。

コピペだけで、おしゃれなもくじができるはてなブログカスタマイズを紹介しているサイトはこちら。

ガーリーでかわいい目次デザイン

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

はてなブログテーマ「Haruni」製作者でもあるMinimalgreenさんの目次デザイン。ストライプ背景がかわいい目次デザインです。ほかにもステッチ風などガーリーでかわいい目次デザインがそろっています。

はてなブログの目次のデザインカスタマイズ集 - Hatena Blog Theme Custom

 

キュートでシンプルな目次デザイン

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

イラストレーター兼デザイナーのKimixさんのキュートなもくじデザイン。

どれもリストマークがかわいいんです。

「・」←これじゃない。

目次には、h2見出しのみ利用しているので、シンプルですっきりとして見やすいのもポイントです。

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

はてなブログの目次をシンプル&おしゃれにカスタマイズ / サンプルCSS付き! - THE LITTLE ESCAPE

 

ナチュラルなもくじデザイン

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

パル子さんのもくじデザインです。ナチュラルなものからシンプルなのにぱっと目を引くタイプまで、いろいろなデザインがあります。

【コピペでOK】はてなブログ シンプルな目次のデザイン・カスタマイズ - パルコツ

マステメモ風カスタマイズ

f:id:pea-nut:20190220165100p:plain
つなろっくを書いている「つな」のもくじデザインです。水玉のマスキングテープでぺたっと貼り付けたメモ風のポップなデザイン。

めっちゃかわいくできたので、じゃんじゃん使ってください(*‘∀‘)0

マステメモ風のもくじカスタマイズはこちらです↓

pea-nut.hatenablog.com

目次ができたらチェック

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

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

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

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

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

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

はてなブログ「目次」「破線のボックス」作り方(参考ブログ) - 日本最大級のプログラミングスクール『TECH::EXPERT』で学んだことについて書いていく!

【はてなブログ】開設2ヶ月運営報告♪PV数・収益・変更した事まとめ - 霞美@ベースの雑記ブログ

【はてなブログ】初心者おすすめ♪簡単でお洒落なカスタマイズ8選 - 霞美@ベースの雑記ブログ