【FC2ブログ】見出しタグを設定する方法【カスタマイズ】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

文章を書く上で見出しはとても重要です。
例えば仕事の書類とかでも

1.あいさつ
2.製品紹介
(1)特徴
(2)使用効果
(3)ターゲット層
3.今後の課題

のように見出しがあるととても読みやすくなります。
ホームページやブログも同じで、見出しを使うことでグッと読みやすくすることができます。

今回は見出しについて調べましたので、備忘録として記します。

見出しタグとは

ホームページやブログで見出しをつけるときには、見出しタグというhtmlで記述します。

見出しタグは本の目次のようなものです。これを設定することにより、視覚的に文章がすっきりとし、閲覧者のストレスを減らすことができます。

また、見出し構造を意識することは文章構成能力の向上にもつながります。
つまり、上手い文章を書くクセがつくということですね。

見出しタグは1~6まであり数字が若いほど重要度が上がります。

<h1>見出しタグ1</h1>
<h2>見出しタグ2</h2>
<h3>見出しタグ3</h3>
<h4>見出しタグ4</h4>
<h5>見出しタグ5</h5>
<h6>見出しタグ6</h6>

見出しタグでseo効果がある

ホームページやブログを読むのは人間だけではありません。実は、グーグルなどの検索エンジンロボットもブログを読んでいます。

検索エンジンロボットがブログを読むときに重視するのが見出しタグです。記事(コンテンツ)を正しい構成にすることで、そのページの評価があがります。

※SEOとは
「Search Engine Optimization(検索エンジン最適化)」の頭文字を取ったもので、検索エンジンで上位表示を達成するための技術です。

見出しタグのルール

見出しタグを設定するときにはルールがあります。それは、若い数字から順に使用することです。

<h1>の後には<h2>を設定します。見出しのレイアウトが気に入っているからといって<h3>や<h4>にいきなり跳んではいけません。

見出しタグは記事の構成を正しく伝える役目があります。正しい運用でないとseoに悪い影響があると言われています。

正しい見出しタグの例

<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>小見出し</h3>
<p>テキストテキスト</p>
<h3>小見出し</h3>
<p>テキストテキスト</p>
<h2>大見出し</h2>
<p>テキストテキスト</p>
<h2>大見出し</h2>
<h3>小見出し</h3>
<p>テキストテキスト</p>

若い数字から順に並んでいるのがわかります。

間違った見出しタグの例

<h1>記事タイトル</h1>
<h3>小見出し</h3>
<h3>小見出し</h3>
<p>テキストテキスト</p>
<h3>小見出し</h3>
<p>テキストテキスト</p>
<h2>大見出し</h2>
<p>テキストテキスト</p>
<h4>小小見出し</h4>
<h2>大見出し</h2>
<p>テキストテキスト</p>

数字の順序がごちゃごちゃになっているのがわかります。

FC2ブログの見出し

FC2ブログのテンプレートでは

<h1>ブログタイトル</h1>
<h2>記事タイトル</h2>
<h3>本文大見出し</h3>
<h4>本文小見出し</h4>

のコンテンツ構造となっている場合が多いようです。

ちなみにこのブログの場合は

<h1>ブログタイトル</h1>
<h2>記事タイトル</h2>
<h3>サイドメニュータイトル</h3>
<h4>コメント欄</h4>

となっており、大変使いにくい・・・

もう少しHTMLとCSSを勉強して、<h3>以下は本文見出しに使用できるようにカスタマイズしていかなければ!

いつかカスタマイズ結果を報告するのでよろしく<(`^´)>

商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。お買い物される際には、必ず商品ページの情報を確認いただきますようお願いいたします。また商品ページが削除された場合は、「最新の情報が表示できませんでした」と表示されます。

はじめてのFC2ブログ こだわりブログ作成入門
価格:1598円(税込、送料無料) (2016/8/22時点)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

-スポンサーリンク-

コメントを残す

*

CAPTCHA