タイトルタグは、タイトル行などを強調するタグです。
基本的にはH1~H6まであり、H1はより大きな文字、H6はより小さい文字で、強調表示されます。
検索エンジンなどでは、このタイトルタグで囲まれた文字は、重要な文字であると認識することが多く、SEO対策としてもぜひ使いたいものです。
Movable Typeでは、このタイトルタグにも、CSSシートでデザインが定義されています。
単純に文字の大きさや太さが変わるだけでなく、背景色や下線等が設定されていたりするので、見栄えがよくて便利です。
それぞれのページテンプレートでも、大見出しや中見出しにタイトルタグがつけられています。
同じ見出し表示にしたいところは、同じタイトルタグを使うようにすると、見やすくなります。
ちなみに、新規エントリー(記事の投稿)の中でも、このタグを使うことができます。
ここでは、H1~H6のタイトルタグがどのように表示されるのか、試してみます。
<h1>■タイトルタグの見え方⇒ここはH1です</h1>このようにしてh1~h6を指定してみます。
■タイトルタグの見え方⇒ここはH1です
■タイトルタグの見え方⇒ここはH2です
■タイトルタグの見え方⇒ここはH3です
■タイトルタグの見え方⇒ここはH4です
■タイトルタグの見え方⇒ここはH5です
■タイトルタグの見え方⇒ここはH6です
なるほど。
太字になってないので、なんらかのデザインが定義されていそうです。
『styles-site.css』を開いて、タイトルタグ(H1、H2、等)を検索してみると、タイトルタグすべての文字の太さを標準にするように定義されているようです。
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
ここの部分ですね。
ちなみに、ページテンプレートでタイトルタグをどのように使っているかチェックしてみると、すべてclassの指定が入っているようです。
『styles-site.css』で該当する部分を見てみましょう。
.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
width: auto;
margin: 0;
border-left : 5px solid black;
padding: 5px;
color: #fff;
background : #999999 url(img/tab.gif) repeat-x center center;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}
いっぱい指定してありますね~。
試しにh3タグのクラスを<h3 class="module-header">のようにしてみると、こうなります。
<h3 class="module-header">■タイトルタグの見え方⇒ここはH3のmodule-headerです</h1>
■タイトルタグの見え方⇒ここはH3のmodule-headerです
タイトルを目立たせたり、見た目を統一させたりするのに便利な上に、SEO対策にもなるわけですから、ぜひいろいろ使ってみてください。