FC2ブログ
2008-02-11(Mon)

第03回-SEO対策では見出し・小見出し<h3><h4>タグのマークアップが大事です【生徒さんブログのカスタマイズ事例】

h3・h4タグ追加説明画面

見出し・小見出しを付けて記事を書き、<h3><h4>タグでマークアップすることはSEO対策にとても効果があります。


前回までは、自動的にブログタイトル・記事タイトル<h1><h2>htmlタグが付く方法で、テンプレートの設定を修正しました。

今回は記事に見出しを設定し<h3><h4>タグでマークアップします。


ブログ記事には「見出し」を付けると検索エンジンのSEO対策上とても効果があります。
なお、この作業は記事を書くときにご自身で<h3><h4>タグを付けなければなりません。
(なお<h3><h4>の文字デザインは今回追加するスタイルシートで設定します。)

記事の構成をイメージしましょう


講座ブログでの私の記事の書き方を見ていただければイメージはつかめると思います。右の説明画像を拡大してみてください。
一つの記事の、文章構成見出し構成としては下記のようになるのがベストです。

<h2>記事タイトル</h2>
 <h3>見出し(1)</h3>
  ・本文
  <h4>小見出し(1-1)</h4>
  ・本文
  <h4>小見出し(1-2)</h4>
  ・本文
 <h3>見出し(2)</h3>
  ・本文
  <h4>小見出し(2-1)</h4>
  ・本文
  <h4>小見出し(2-2)</h4>
  ・本文

 これ繰り返します。

必ずしも全ての記事がこうなるとは限りませんが、最低でも1回は、見出し(1)で書き始めて本文で終わるという記事の書き方を心がけてください。

スタイルシートテンプレートの設定


前回のhinata_0205スタイルシートテンプレートを複製しhinata_0211と名前を変更し作業を開始します。

hinata_0211のスタイルシートテンプレートの編集


「ここから」「ここまで」のスタイルシートの設定を前回の/* 追加設定 */の14行目以降にコピーペーストで結構ですので追加してください。
/* 追加設定ここまで */の文章も忘れずに入れておいて下さい(あとから分かりやすくするためです)。

「ここから」=================================
h3 {
font-size: 13px;
font-weight: bold;
color: #ff9a9c;
text-align: left;
margin: 0px;
padding: 0px 10px 10px 0px;
}

h4 {
font-size: 10px;
font-weight: bold;
color: #ff9a9c;
text-align: left;
margin: 0px;
padding: 0px 10px 10px 0px;
}

strong {
font-weight: normal;
}

strong.bold {
font-weight: bold;
}

/* 追加設定ここまで */
「ここまで」=================================



追記:記事の入力を自動改行にしている方へ


<h3><h4>など<h>タグの場合は前後に1行分の開きが自動的に出てしまいます。
(つまり入力で改行した位置に自動的に<br />改行タグが入るので2行分の開きが出てきます。)
これを回避するために設定のmarginのところを以下のようにしてください。

margin: 0 0 -1.8em 0 ;

-1.8emの数字は自分の環境にあわせて変更してください。数字が大きいほど行間が詰まります。つまり-2.5emの方が開きが少なくなります。


※タグをいちいち手で入力するのが面倒な方へ。


Windows日本語文字変換(IME)で「みだし」と文字を入力すると<h3></h3><h4></h4>とそれぞれに変換するよう単語登録設定しておくと便利です。
設定方法はこちらをご参照下さい。
「単語登録の方法-ショートカットメニュー」

スポンサーサイト



●ランキング応援お願いします → 

 


comment form

管理者にだけメッセージを送る

comment

No title

記事への投稿ありがとうございます。
自分のブログも無事自動改行でも出来るようになりました。ありがとうございました。

応援ポチッ☆
ブログオーナー

教授

管理人:ぽっぷ教授

カテゴリー
アフィリエイトASP紹介
最近の記事
月別アーカイブ
このブログをRSSリーダーに追加
はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Powered by SEO対策 RSSプラス
ソーシャルブックマークに追加
免責事項
当サイトからのリンク先における各サイトの利用・登録につきましては各サイトの注意事項や規約をよくお読みになり自己責任でご利用・ご登録をお願いいたします。 万が一トラブルや、損害などが起きましても、当サイトは責任を負いかねますのでご了承ください。
メールフォーム

名前:
メール:
件名:
本文:

WEB制作のプロが薦めるSEO
Blogテンプレート、SEOマニュアル、サポートフォーラム。すべてにおいて、驚愕のクオリティを提供するSEO対策の3本セットです。特に『賢威』購入者専用SEOフォーラムにはプロも初見の最新のテクニックが集まりこれだけでも値段相応の価値があります。近日発売の「賢威3.0」への無償バージョンアップが可能です。
ランキング
 
ブログ内検索
 



このブログをリンクする
コミュニティ
edita.jp【エディタ】