トップページ >>ブログ>>ブログの見出し

ブログの見出しデザイン〜HTML、CSSとは?画像化は?SEOに影響?

ブログの見出しについて解説!

ブログの見出しデザインを変える!htmlやcssとは?

見出しを画像化できる?

 

さらに、実際の事例を基に、SEOを考慮した見出しに必要な文字数、書き方・作り方に解説!

ブログの見出しのデザインを変える!

ブログの見出しは、ブログの記事投稿画面で表示したい見出しタグを選択するだけで簡単に作れます!

見出しの作り方

例えば、Wordpressなら上記のように「段落」と書かれた箇所のボックスタブを開くと

  • 見出し1
  • 見出し2
  • 見出し3
  • 見出し4
  • 見出し5
  • 見出し6

まで選択できるようになります。

これはWordpressだけじゃなく、はてなブログや、ライブドアブログ、FC2ブログなど無料ブログサービスでも同じように見出しを変更できます。

 

見出しのHTMLは?

記事の投稿画面で、見出しを追加すると実は裏でブログにHTMLが自動的に追加されてます。

見出しのHTMLは、

  • 見出し1:<h1>ここに見出し</h1>
  • 見出し2:<h2>ここに見出し</h2>
  • 見出し3:<h3>ここに見出し</h3>

となり、これらのコードが追加されます。

CSSでデザインを変更?

また、ブログはテンプレートによってCSSをカスタマイズする事で、見出しのデザインも色んなタイプに変えることが出来ます。

見出しのテキスト色やサイズ、フォントを変えたり、見出しテキストのバックグラウンドの色を変えてデザインを高める人もいます。

ただし、初心者がCSSをカスタマイズして見出しデザインを変えるには少しハードルが高いです。

そのような場合は、有料テンプレートを使うことでデザイン性の高い見出しを作り上げることが出来ます。

 

画像を使った見出し

例えば、私が利用しているWordpressブログでは

  • Coccoon:コクーン(無料)
  • 賢威テンプレート(有料)

を使いシンプルな見出しデザインに番号を画像で付けて少しでも見栄えよく見える工夫はしています。

その際は、上記のようなテンプレートを使えば、態々自分でHTMLやCSSをカスタマイズする必要性がないので簡単に見出しのデザインを変えることが出来ます。

 

私のブログの見出しデザイン例

また、基本的にブログ記事で利用する見出しは

  • 見出し2
  • 見出し3

大半です。

見出し1はブログのタイトルで利用されるので、記事内の各見出しは【見出し2】から利用する事を考えて下さい。

場合によっては、見出し4〜5も利用する事もありますが、見出し2が1番利用して大枠の見出しを作り上げていきます。

そして、それぞれの見出しの中でさらに文章の内容を細かく分けたい場合に、見出し3以降利用します。

私のブログの目次や構成案の事例

例えば、上記のWordpressブログ記事は、先ほどのテンプレートを使って見出2と、見出し3で見出しを構成した例です。

1・2・3・4と、それぞれ大枠の見出しが作られていますが、これらは見出し2で作成しています。

番号はすべて画像、もしくはCSSでカスタマイズされた番号となっています。

そして、1と2の見出し下には細かく分けられた見出しがありますが、これらは見出し2の下に見出し3を利用して作られています。

見出しの作り方

この時も見出しのバックグラウンドの色は、テンプレートで既にカスタマイズされたCSS等が適用されている状態です。

色は簡単に変えることが出来ますが、実際のデザイン面はテンプレートのHTMLやCSSをカスタマイズする必要があります。

 

ブログの見出しはSEOに影響する?

ここまで、ブログの見出しのデザインについて説明してきましたが、見出しを作成する際に1番大事なのはSEOを考えてブログの見出しを作ることです。

SEOとは、特定の言葉でGoogle検索等をした際の検索結果に上位表示させて集客するスキルの事。

SEOで覚えるべき集客スキルは色々ありますが、記事投稿で見出しを付け加える上で大事なのは検索キーワードを基に作り上げる事です。

私のブログの目次や構成案の事例

例えば、上記記事の見出しは、ラッコキーワード使って【ahamo】で検索している人の

  1. 検索キーワード一覧と
  2. 月間検索数を

調査したうえで作成しました。

ラッコキーワードで調べた【ahamo デザリング】というキーワード一覧を網羅する形でブログの見出し構成案を作りました。

ラッコキーワードで構成案に繋がるキーワードを調査

ご覧になればわかるように、【ahamo デザリング】でGoogle検索している人たちは

  • ahamo デザリング 遅い
  • ahamo デザリング できない
  • ahamo デザリング やり方
  • ahamo デザリング 設定

という言葉の組み合わせで検索されていますよね?

であれば、それを見出しの中に挿入して見出しわけを行い、それぞれの見出しに沿って情報を入力するだけでOKなんです。

私の場合ですと、まずは見出し2のHTMLタグを使って上記キーワードを入力して見出しを4つ作り上げています。

 

見出しに必要な文字数は?

また、ブログの見出しは、検索されているキーワード一覧と月間検索数を表示し、検索数の多い順から見出しの構成案を考えて作り上げていくのがおすすめです。

そうすると、検索キーワードに対して求められている情報を網羅した記事を作り上げられるからです。

=検索ユーザーが求めているブログの記事を仕上げられるようになり、SEOにも良い影響を与えるからです。

この時、私の場合は、文字数は長すぎずに10から14文字以内で検索されている言葉を入れて作り上げています。

 

一説には、GoogleのBotはブログ記事のHTMLの見出しを見て、情報の内容を把握して検索されたときにマッチするかどうかを決めているとも言われています。

もちろん、SEOで上位表示させるには、それだけが関係しているわけじゃないですが、見出しに検索キーワードを入れるは基本中の基本です。

タイトルに検索キーワードを入れて作るぐらいSEOの基本です!

 

ネットビジネス初心者の方へ↓

ネットビジネスで自由を手にした男性のイメージ画像

【初心者向け】資産型ネットビジネス始め方

step1.html【おすすめ

アフィリエイトサイトのイメージ画像

資産型ネットビジネス1番はアフィリエイト

step2.html

資産構築型アフィリエイトのイメージ画像

毎月100万以上稼ぐ資産型アフィリエイト

step3.html

 

ネットビジネスで稼ぐ為の秘訣を解説した無料メール講座

→ 今すぐコチラをクリック!