紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

はてなブログの見出しカスタマイズ法【シンプルイズベスト】

f:id:slash1196:20210522193822j:plain

f:id:slash1196:20200520205950j:plain

はてなブログの見出しをカスタマイズしたい人

「はてなブログを使っているけれど見出しがちょっと味気ないなあ。 見やすいようにカスタマイズしたいな。 やり方わかんないし、教えてほしい。」

 

こんなお悩みにお答えします。

 

【今回の記事でわかること】

  • ブログの見出しの豆知識
  • はてなブログでの見出しのカスタマイズ方法

 

こんにちわ、紅蓮です。

 

はてなブログで書いていて、初期設定の状態で使っていると、見出しってめちゃめちゃシンプルで味気ないですよね。

 

シンプルでいいんですけど、どこからが本文なのかがわかりずらいのが玉にきず。

「ちょっとわかりずらいから、カスタマイズしたいな」って思うこともありますよね。

 

そこで今回ははてなブログの見出しのカスタマイズ法をお話していきましょう。

 

この記事を読むころには、見出しの豆知識とカスタマイズ方法が理解できるようになります。

 

この記事を書く僕は、はてなブログユーザー歴は3年ほど。

毎月のブログ収益は3000円と少ないながらも、いただいています。

 

ですから最後までお読みいただき参考になさってくださいね。

あなたのアフィリエイトの助けになれれば、幸いです。

 

では早速行ってみましょう。

Here We Go!!

 

スポンサーリンク
 

 

はてなブログの見出しのカスタマイズの仕方

f:id:slash1196:20210522193857j:plain

早速、はてなブログの見出しのカスタマイズの仕方をお話していきましょう。

 

カスタマイズコードを置く場所

カスタマイズするコードの置く場所をお話ししましょう。

 

コードの置く場所は、以下の画像の通り。

f:id:slash1196:20210522161725j:plain

 

まずログインして、ホーム→IDクリック→ブログ→デザインをクリックします。

 

f:id:slash1196:20210522162141j:plain

そして、カスタマイズをクリックして、スクロールしていくとデザインCSSという場所があります。

そこをクリックして、コードを貼り付けます。

 

CSSのコード例5選

ここでは、はてなブログの見出しをカスタマイズするためのコードをご紹介します。

 

左線

f:id:slash1196:20210522191127j:plain

左のみに線を付けたものですね。

シンプルで、非常に使いやすくブログではよくつかわれるパターンです。

 

.entry-content h2{
border-left:solid 9px #4865b2;
padding:.25em .5em;
color:#494949;
background:transparent
}

 

左線に背景色

f:id:slash1196:20210522191152j:plain

左線を付けたものに、背景色を付けたものですね。

背景色があることで、見やすさがぐっとアップするデザインですね。

 

entry-content h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

 

下線付き

f:id:slash1196:20210522191209j:plain

見出しに、下線がついたものですね。

シンプルなので、使い勝手もいいですね。

 

entry-content h2 {
  /*線の種類(実線) 太さ 色*/
  border-bottom: solid 3px black;
}

 

下線二重線

f:id:slash1196:20210522191226j:plain

下線の二重線ですね。

シンプルながら、力が出ますね。

 

entry-content h2{
  /*線の種類(二重線)太さ 色*/
  border-bottom: double 5px #FFC778;
}

 

チェックマーク付き見出し

f:id:slash1196:20210522191252j:plain

見出しの前にチェックマークがついたやつですね。

シンプルですが、目を引くデザインです。

小見出しには、かなりおすすめのデザインですね。

 

entry-content h2{
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}

 

今回のデザイン以外にも、たくさんのデザインがありますね。

もし別のデザインを変更したいなら、一度[はてなブログ 見出し]で検索するのもいいと思いますよ。

 

種類はいっぱいありますので、よかったらご参考になってくださいね。

 

はてなブログの見出しカスタマイズをする前に…

f:id:slash1196:20210522193923j:plain

ここでは見出しのカスタマイズの前に、知るべきことというのが実はいくつか存在します。

 

ここでは見出しカスタマイズをする前に知るべきことを、お話していきましょう。

 

見出しのカスタマイズの目的をしろう

見出しのカスタマイズの目的についてですね。

見出しのカスタマイズの目的には、大きく以下の2つがあります。

 

  • 目的①読者に見出しをわかりやすくすること
  • 目的②検索エンジンに見出しをわかりやすくすること

 

1つずつ見ていきましょう。

 

目的①読者にとって読みやすくすること

見出しのカスタマイズの1つ目の目的は、読者にとって記事を読みやすくすることですね。

 

文章がずっと続くと、読者というのは頭が疲れてくるんです。

つまり、読んでいて迷子になりやすいんです。

 

しかし、見出しがあると本文に入る前にどんな話をするのかが書いてあります。

そのために、迷子になりにくいというメリットがあるんです。

 

何もしない状態でも大きい、太字になっているのでわかりますが、読者に視覚的に変化が与えられません。

そのために疲れてしまうんですよね。

 

だから、カスタマイズをして、ちょっとでも読者にとって読みやすくすることが大事なんですね。

 

目的②検索エンジンにもわかりやすくすること

見出しのカスタマイズの2つ目の目的は、検索エンジンにもわかりやすくすることなんです。

 

実は見出しを見やすくカスタマイズするのは、SEO的にもいいんです。

というのも検索エンジンは、読者ファーストだからですね。

 

読者にとって見やすいことが、SEO的にもいいといわれています。

 

ブログの見出しのルールを知ろう

実はブログの見出しには、ルールがあります。

 

そのルールは、以下の通り。

 

  • ルール①:見出しのタグは、h2~h6までを使うこと
  • ルール②:順番に使っていくこと 

 

ルール①:見出しのタグは、h2~h6までを使うこと

まず1つ目のルールは、見出しタグはh2~h6までを使うことですね。

 

タグには、以下のような使い方があります。

  • 大見出し=h2 
  • 中見出し=h3
  • 小見出し=h4 
  • 極小見出し=h5-h6 

 

で、この数字が少ない順にSEOでの評価も高くなるんです。

 

ルール②関連する話は、順番に使っていくこと

2つ目のルールは、順番に使っていくことですね。

 

h2タグが強力だからと言って、そればかり使えばいいというわけではありません。

見出しの使い方は、以下の通りになります。

 

  • 大見出し=h2 ※大見出しに使用する。話題の革新にもなるために記事の中では最も重要な位置を示すタグ
  • 中見出し=h3 ※大見出しの中で関連する内容を書く見出しに使用する
  • 小見出し=h4 ※中見出しの中で関連する内容を書く見出しに使用する
  • 極小見出し=h5-h6 ※小見出しの中で派生する話題に使用する

 

簡単に言うと、同じ内容から出た話題はなるべく同じタグでまとめろということです。

というのもそのほうが読者にとって、話が分かりやすいからです。

 

例えば、この記事でいうとおおもとの話が、はてなブログの見出しカスタマイズをする前にしることですよね。

 

その中の見出しのルールの話題があり、その中のルール②順番に使っていくことということになります。

 

書いていくと、以下のようになります。

 

<h2>はてなブログの見出しカスタマイズをする前に…</h2>

<h3>ブログの見出しのルールを知ろう</h3>

<h4>ルール①:見出しのタグは、h2~h6までを使うこと</h4>

<h4>ルール②:順番に使っていくこと</h4>

 

こうすると読者にとって、話題に一貫性があってわかりやすいですよね。

だから、順番に書くのは大事なことなんです。

 

【悲報】はてなブログは、見出しの定義が違う

とはいえ、ここで悲しいお知らせです。

はてなブログは見出しの定義が、普通のブログとちょっと違います。

 

はてなブログの見出しの定義は、以下のようになります。

  • 大見出し=h3
  • 中見出し=h4
  • 小見出し=h5

 

そうなんですよね。

h3タグからしか使えないんです。

なぜなら、見出しに設定されていないからなんですね。

 

はてなブログでh2タグを使う方法

先ほどもお話をしましたが、見出しタグは、数字が低いほど優先度が上がります。

 

つまり、文中でh2タグを使う必要がありますよね。

 

h2タグを使う方法は、以下の通り。

 

  • 方法①:html編集で手入力でする
  • 方法②:アドオンを使う

 

方法①:html編集で手入力でする

h2タグを使う1つ目の方法は、html編集で手入力にする方法ですね。

編集画面で、htmlでタグを一つ一つ入力していきます。

 

時間がかかりますが、確実に変えていけるのがポイントですね。

ただ、文が長くなればなるほど、変えるのが面倒なこともありますね。

 

方法②:アドオンを使う

h2タグを使う2つ目の方法は、アドオンを使うことですね。

 

はてなブログにはchromeを使っている場合に、はてなブログを運営するの必要なアドオンが開発されています。

 

そのアドオンを使って、記事を作成するときに変える方法ですね。

ボタン一つで行けるので、一つ一つ書いていくよりは時間がかからないのがいいところですね。

Chrome Add-on for Hatena - Chrome ウェブストア

 

まとめ|見出しのカスタマイズはシンプルイズベスト

お疲れさまでした。

ここまではてなブログで見出しのカスタマイズの仕方を、豆知識とともにお話してきました。

 

まとめると、以下のようになります。

 

  • カスタマイズコードは、デザインCSSに貼り付ける
  • カスタマイズコードは、好きなものを選んで張り付ける
  • 目的とルールを知ったうえで、読者のためになるカスタマイズが必要
  • はてなブログは見出しタグの順序が違うので、元の状態で使うと後が大変

 

見出しのカスタマイズは、非常に重要です。

 

とはいえ、やはり文章は内容が大事なんですよね。

 

ですからとにかく、記事を書いてみることです。

記事の書き方に関しては、アフィリエイトで稼げるブログの書き方【テンプレあります】 をお読みくださいね。

 

もちろん、勉強も必要です。

おすすめの本は、アフィリエイトを勉強するのにおすすめな本15選【行動も説明】のデザインのところをお読みくださいね。

 

ってことで、今回はこの辺で。

また次回に。

 

【スポンサーリンク】