タイトルタグは、タイトル行などを強調するタグです。
基本的にはH1～H6まであり、H1はより大きな文字、H6はより小さい文字で、強調表示されます。
検索エンジンなどでは、このタイトルタグで囲まれた文字は、重要な文字であると認識することが多く、ＳＥＯ対策としてもぜひ使いたいものです。
Movable Typeでは、このタイトルタグにも、ＣＳＳシートでデザインが定義されています。
単純に文字の大きさや太さが変わるだけでなく、背景色や下線等が設定されていたりするので、見栄えがよくて便利です。
それぞれのページテンプレートでも、大見出しや中見出しにタイトルタグがつけられています。
同じ見出し表示にしたいところは、同じタイトルタグを使うようにすると、見やすくなります。
ちなみに、新規エントリー(記事の投稿)の中でも、このタグを使うことができます。
ここでは、H1～H6のタイトルタグがどのように表示されるのか、試してみます。
<h1>■タイトルタグの見え方⇒ここはＨ１です</h1>このようにしてh1～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">■タイトルタグの見え方⇒ここはＨ３のmodule-headerです</h1>
■タイトルタグの見え方⇒ここはＨ３のmodule-headerです
タイトルを目立たせたり、見た目を統一させたりするのに便利な上に、ＳＥＯ対策にもなるわけですから、ぜひいろいろ使ってみてください。