はじめまして。このブログを書いている後藤と申します。2017年5月に月収240万円を稼ぎ、今では毎日が夏休みのように自由気ままに過ごしています。

もしこの記事を読んで「分かりやすい!参考になった!」という人は是非私のメルマガを読んでみてください。

⇒後藤のメルマガの内容を見てみる
(新しいタブで開くのでクリックしておいて下さい)

 

 

今回ははてなブログの目次と見出しの作り方をお伝えしていきます。作るのはとっても簡単なのですが、いかんせん見た目がとっても残念なので、かっこよく(可愛く)カスタマイズしていきます。

【今回の記事で得られること】

  • 目次を付けることによりユーザービリティが向上する!
  • 結果として滞在時間が増えて検索順位アップにつながる!

難しく感じるような箇所もあるかもしれませんが図解の通り順番にやっていけば必ずできますのでご安心ください^^

 

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

目次とは記事の冒頭にある、

はてな目次画像

この部分のことです。

このように目次が記事の冒頭にあることにより、記事全体の流れを把握できますし、目当ての項目にすぐにジャンプできるのでユーザーにとってはメリットだらけです。

例えば上記の目次であれば、美味しいお店の「第一位」をクリックすれば一気にその項目まで飛ぶことができます。

これら目次の一つ一つの項目は「見出し」で構成されています。

はてなブログでは、

  1. 大見出し
  2. 中見出し
  3. 小見出し

と分類されています。

 

はてな見出しの種類

このように見出しの大きさによって目次の位置が変わってきます。

今や個人ブログでも目次は当り前のようについています。ぜひ今回の記事を参考にサクっと目次を作ってしまいましょう。

【ステップ1】まずは見出しをつけよう

闇雲に記事を書いていくと途中で意味が分からなくなり「もういいや!」と全部消してしまった経験はありませんか?

私の場合、このパターンで世に出ることなく消えていった記事が何百とあります・・・。

これを解消するために「見出し」を前もってつけておくと便利です。途中で意味が分からなくなったとしても見出しを目印に戻ることもできますし、次の項目へ進むこともできます。

また見出しがあることにより、ユーザーさんもストレスなく読むことができます。小説でも参考書でも、もし見出しが無ければと思うとぞっとしますよね^^

このように見出しをつけることは「書き手」にも「読み手」にもメリットだらけです。

それでは一緒にやってみましょう。

 

項目を並べる

まずはこのように大まかに項目を並べていきます。

 

大見出しの付け方

見出しにしたい文字を選択した状態で「見出し」と書かれた横の「▼」をクリック。大・中・小それぞれ付けたい見出しをクリックします。

 

順番に見出しをつける

このように順番につけていきましょう。

実際にブログを見てみます。

 

見出しサイズ

使っているテンプレートによっても表示は異なりますが見出しをつけた部分はこのように目立ちます。ユーザーにとってもメリハリがあって読みやすいですね。

【ステップ2】10秒で目次を作ろう

見出しができたら後はやる事は超簡単です。10秒で出来てしまうので一緒にやってみましょう。

 

はてな目次設定

  1. 目次を入れたい場所をクリック
  2. 上記「目次」のアイコンをクリック

 

はてな目次11

すると、このように[:contents]という文字が入力され、ここに目次が入ります。

プレビューを確認してみましょう。

 

はてな見出しチェック

きちんと目次が挿入されましたね。

でもデフォルトのままだとちょっと寂しい感じがしますね・・・。ですので目次をかっこよく(かわいく)カスタマイズしていきましょう。

はてなブログの目次をかっこよくカスタマイズ!

はてなブログはちょっと手を加えることにより、

  1. 目次にタイトルが入れられる
  2. 目次に番号を入れられる
  3. 目次の背景色を変えられる

などのカスタマイズができます。

他にもCSSを勉強すれば色々とできるのですが、この3つだけで問題ありません。(凝り過ぎても意味がないので)

目次にタイトルを入れよう

はてな目次デザイン

上部の「はてなID」から「デザイン」をクリックします。

 

はてなデザインタイトル

 

ちなみに私はブログアフィリエイトで人生が激変しました。もし現状が不安な方はぜひ私の稼いでいる秘密をご覧ください。

後藤の稼いでいる秘密を見る

 

 

サイドメニューの「レンチ」のアイコンをクリック。

 

はてなブログCSS

サイドメニューの「デザインCSS」をクリック。

 

はてなCSS枠

赤い枠をクリック。

 

はてなCSS記述

すると枠が広くなりますので、空いているスペースに下記をコピーして貼り付けます。

【目次にタイトルをつける記述】

.table-of-contents:before{
content: “この記事の目次”;
font-size: 120%;
font-weight: bold;
}

「この記事の目次」の部分は「目次」や「index」に変更してもOKです。

 

はてなタイトルタグ貼り付け

このように貼り付けます。

 

はてなCSS保存

貼り付けができたら「変更を保存する」をクリック。

 

はてな目次タイトル2

目次の中にタイトルが表示されたらOKです。

目次に番号をつけよう

次は目次に番号をつけてみますね。

「デザインCSS」を開いて下記をコピペします。

 

【目次に番号をつける記述】

.table-of-contents li,
.table-of-contents ul{
    list-style-typedecimal;
}

 

はてな目次番号コピペ

先ほどのタイトルをつける記述の下に2行ほど開けてコピペします。

確認してみましょう。

 

はてな目次番号確認

このように番号がついたら成功です。

目次の背景色を変更しよう

デフォルトの目次はお使いのテンプレートによっても異なりますが、基本的には地味な背景色が使われています。目次なので地味でも良いのですが、せっかくなら他のブログと差別化したいですね。

これも先ほどと同じように「デザインCSS」に追加記述をするだけです。

【目次の背景色を入れる記述】

.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0ffff;
}

※上記をそのまま使うと水色背景色になります。色を変えたい場合は#の後ろの英数字を変更して下さい。

【薄い系のカラーコード】

イエロー系 ffff99
水色系 f0ffff
グリーン系 ccffcc
ピンク系 ffeff9
グレイ系 f5f5f5

 

それでは実際にやってみます。

 

はてな目次背景色

他の記述と2行ほど開けてコピペします。

ブログを確認してみましょう。

 

はてな目次背景色確認

はい、きちんと変更されていますね。これで一通りのカスタマイズは完了です。

最後に最短最速で稼ぐためのポイント

今回ははてなブログに見出しと目次を作ってカスタマイズする方法をお伝えしました。本文中でも書きましたが最近は皆さん当たり前のように記事に目次をつけていますね。

やはりユーザービリティの高い記事はGoogleにも評価されやすいです。

ただし、いくら記事のユーザビリティが高くてもアクセスが集まらなければ意味がありませんね。

そこでブログで最短最速で稼ぐためのポイントをまとめてみましたので、ぜひお時間の許す限りご覧ください。

ブログを今の5倍速く書く方法

説得力のある文章が書ける裏コピーライティング術

ブログのアクセスが増えない5つの原因と対策

ブログアフィリエイトの始め方!初心者が30万稼ぐ方法とコツ

 

最後までありがとうございました。

 

【追伸】
今さらですが、本当にブログをやってきて良かったと心から思っています。このままずっと書き続けて将来は愛娘にバトンタッチするのも面白いかも^^

 

 

【大切なお知らせ】

今回の記事はいかがでしたでしょうか。分かりにくい箇所はありませんでしたか?

前述した通り私は2017年の5月に月収240万円を達成して、それ以降ずっと毎日が夏休み状態です。

信じられないかもしれませんが、誰にも管理されることなく、満員電車に揺られることもなくストレスフリーの生活をしております。

私のメルマガではブログでは公開できない極秘情報をお伝えしております。

期間限定で参加できますので興味のある方はぜひ^^

後藤のメルマガの内容をのぞき見してみる