ブログカスタマイズの雑談BLOG

「見出しタグ」（「h1」や「h2」など）はHTMLに記述します。
見出しタグにはインデックスの役割があるので、視覚的に目立つようなスタイルでCSSに記述していると思います。大見出し、中見出し、小見出しみたいな感じで文章の間に見出しがあると、長い文章を書いてもスッキリと見えますからね。
しかも、見出しタグにはSEO効果が期待できるので、そういう意味でもどのような形で使えばいいのかをきちんと理解して使うといいと思います。


検索エンジン（クローラー）が巡回する時に、「これは見出しだから大事なんだな」と判断してもらうことでSEO的な効果が発生することになりますから、見出しには重要な言葉やクローラーに引っ掛かってほしい言葉を入れた方がいいです。テキトーに使ってはいけませんね。



見出しタグは重要度が決まっています。「h1」が最重要、「h2」が重要、その次に重要なのは「h3」→「h4」→「h5」→「h6」と続きます。通常、見出しタグは「h6」まであります。
クローラーに引っ掛けてほしいのですから、見出しタグはきちんと順番を守って使いましょう。

Seesaaブログの見出しタグを確認する

Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の見出しタグは、「h1」〜「h6」まであります。何もしなくてもデフォルトの状態で既にCSSに記述されています。


＜デフォルトのCSS＞



このようにCSS（スタイルシート）には記述されていますが、実際に「h1」〜「h6」までを記事に書いたらどのように表示されるのかを確認してみます。
とりあえず、記事の作成画面では「テストです」と書いてみました。


記事作成画面



実際の表示



CSSで記述されている通りの文字サイズで表示されました。
「h5」なんてCSSで「font-size: 6px;」と指定されているので、何と書いてあるのかすらわからないぐらい小さく表示されていますねｗ



さて、Seesaaブログでは見出しタグ「h1」はブログタイトル部分に使われています。「h2」は記事タイトルです。


「h2」を使用している記事タイトルですが、例えばこのブログでは記事タイトルを太字表記にしていますが、その「太字」という指示はどこで出しているのでしょう？
上記のデフォルトの見出しタグのスタイルではフォントサイズしか指定していなかったわけで、太字に指定しているのはどこか？ということです。
CSSでは他の場所にも見出しタグに対するスタイルが記述されているはずなんですよね。

見出しタグ「h1」のスタイル

見出しタグ「h1」はブログタイトル部分に使用されている見出しタグです。
CSS上での「h1」には「font-size: 28px;」しか指示がありません。
どこで太字の指示を出しているのかというと、「header h1」です。




これは「ヘッダーの中のh1」に対する指示です。
「.header h1」ではフォントサイズは32pxになっています。デフォルトの「h1」のフォントサイズは28pxです。「.header h1」で「font-weight: bold;」と記述することで、文字は太字になります。「h1」に直接ではなく、「ヘッダーの中のh1」という特別な指示を出すことにより、ブログタイトル「h1」は32pxの太字表示になっています。

見出しタグのスタイルを指示している場所

他の見出し「h2」〜「h6」はCSSでどのように記述されているのかというと、特別なスタイルは設定されていません。先ほど書いた通り、フォントサイズが決められているだけです。


＜CSSでの見出しタグまとめ＞


これが、CSSでの見出しに対する指示です。
「h1」は「ヘッダーの中のh1」という記述でスタイルが決められていました。
「h2」〜「h6」に対する見出しは、実はすべて見出しタグに付けられた「class」で指示を出しています。



HTMLとコンテンツHTMLでの見出しを書き出してみます。
行数はデフォルトのテンプレートでの行数です。


＜HTMLでの見出しタグ＞



＜コンテンツHTMLでの見出しタグ＞



以上がSeesaaブログのテンプレート「シンプルA. ホワイト 右カラム」での見出しタグの場所です。
コードを見たらすべてに「class」が記述されています。
見出しタグ自体はフォントサイズしか設定されていませんので、この「class」でスタイルの指示を出していることがわかります。

見出しタグ「h2」〜「h4」のスタイル

「h1」は「ヘッダーの中のh1」で指示を出していました。
「h2」以下は「class」を指定して指示を出していますので、少し比較してみたいと思います。
（「h5」と「h6」には指示がありませんので無視します）


＜h2に対するスタイル＞


＜h3に対するスタイル＞


＜h4に対するスタイル＞



見出しタグに付けられているclassは、それぞれでフォントサイズが指示されています。
元々、CSSでは見出しタグにはフォントサイズの指示しかありませんでした。
しかし、見出しタグに付けられているclassでも、改めてフォントサイズを指示しています。
ということは、CSSでの見出しタグの記述（h2とかh3）は必要ない、ということです。



例えば見出しタグ「h3」で記述されているコードを段落「pタグ」に変更したとします。
そのコードにclassが指定されているならば、classでのフォントサイズが有効になります。
タグが変更されただけで、見た目は変わらないのです。
同じclassを指定しているタグが複数あったとして（h3でもh2でもpでも）、そのclassが記述された箇所はすべて同じフォントサイズになります。classでフォントサイズを指定しているのですから。



つまり、Seesaaブログの見出しタグは、タグ自体の変更が可能なのです。
「h3」でも「h2」でも「p」でも、classの方でスタイルを設定しておけば、タグ自体を入れ替えても見た目は変わりません。
見た目は変わらないのですから、Seesaaブログを使うならば、HTMLを編集して見出しタグを変更するべきだと思います。


次の記事でも説明しますが、デフォルトのテンプレート「シンプルA. ホワイト 右カラム」では、「h3」タグに「各コンテンツのタイトル」が入れられています。
こんなものを検索エンジンに引っ掛けてもらう必要はありません。
そんなものより、記事中の強調したい部分に「h3」を使って表示させた方が、SEO的にも意味があるのです。




次の記事の紹介

ということで、次の記事から見出しタグの変更作業を始めます。
まずは次の記事で、自分のブログで見出しタグをどのように使いたいのかを考えてみます。