診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

HTMLタグ要素とスタイルの微妙な関係 

見出しの文字は大きいか?

HTMLでは見出し用のタグ要素として h1,h2,h3,h4,h5,h6 が用意されている。h1が最も大きい見出しで、h2,h3 と小さくなっていく。ここでの大きい・小さいは、見出しの構造的な重要度の話しだが、ふつうは文字サイズの大きさも h1 > h2 > h3 > ・・・ と小さくなっていく。

書籍では h1, h2, h3 の順に小さくなっていくのが普通かもしれないが、HTMLではそうもいかないことがある。

h1をサイト名、h2をサイトの説明文またはキャッチコピー、h3をサイドバーやコンテンツの見出しにしている場合、h1は大きく、h2は小さめに、h3はやや大きめに表示したいことが多い。

もちろん、小さくしたいサイトの説明文をh2にしないという対応もあるが、そうするとh1,h2,h3が昇順に並ばないことになり文法的に(文法チェックツール的に?)具合が悪いことになる。

h1,h2,h3という順番でタグ付けをしたいときは、h2がh3より小さいというケースも十分あり得るだろう。

サイドバー見出しのh3

MovableTypeの標準スタイルではサイドバーの見出し=メニューのタイトルにh3が設定されている。

  • カテゴリ
  • 月別 アーカイブ
  • ウェブページ
  • 検索
  • 最近のブログ記事

これらがh3としてタグ付けされている。

SEO面から見出し効果を絞り込みたい場合は

h1,h2などの見出しは検索エンジンからそれなりに評価されている。評価の程度の差はあれ、h3も同じだ。

となると、カテゴリはともかく、検索などというタイトルが評価されても困ることになる。サイドバーすべての見出しをh3にする必然性はないとも言える。SEOを考えれば、見出しはキーワードだけに絞り込みたい。

MovableTypeあるいはMTOSでの対応方法

ここからは一般的ではない。ビジネステンプレートを始めとする、MovableTypeあるいはMTOSでの対応方法についてのメモ的な記事だ。

<h3 class="widget-header">カテゴリ</h3>

MovableTypeおよびMovableTypeOpenSource(MTOS)の標準テンプレートおよびビジネステンプレートでは上のようにカテゴリメニューのHMTLが記述されている。問題は、カテゴリメニューに対するスタイルがどのように設定されているかだ。

h3に対してスタイルが設定されている場合、h3タグを削除するとスタイルが適用されなくなってしまうが、好都合なことにMTでは widget-header というクラスに対してスタイルが設定されている。

<div class="widget-header">カテゴリ</div>

h3を削除して div だけに書き直しても、見た目は同じ というわけだ。

これからのスタイル定義

タグ要素に対してスタイルを設定する これが原則だろうが、SEO面を考えると タグとスタイルが合体していてはタグを変更する際に面倒なことになる。タグに直接定義するのではなく、クラスやIDにスタイルを設定しておいた方が臨機応変に対応できて便利かもしれない。

スポンサーサイト







トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。