■「h3」と「h4」を記事内で使えるようにする
■Seesaaブログの見出しタグがどのように設定されているのかを確認
■Seesaaブログの見出しタグがどのように設定されているのかを確認
「見出しタグ」(「h1」や「h2」など)はHTMLに記述します。
見出しタグにはインデックスの役割があるので、視覚的に目立つようなスタイルでCSSに記述していると思います。大見出し、中見出し、小見出しみたいな感じで文章の間に見出しがあると、長い文章を書いてもスッキリと見えますからね。
しかも、見出しタグにはSEO効果が期待できるので、そういう意味でもどのような形で使えばいいのかをきちんと理解して使うといいと思います。
検索エンジン(クローラー)が巡回する時に、「これは見出しだから大事なんだな」と判断してもらうことでSEO的な効果が発生することになりますから、見出しには重要な言葉やクローラーに引っ掛かってほしい言葉を入れた方がいいです。テキトーに使ってはいけませんね。
見出しタグは重要度が決まっています。「h1」が最重要、「h2」が重要、その次に重要なのは「h3」→「h4」→「h5」→「h6」と続きます。通常、見出しタグは「h6」まであります。
クローラーに引っ掛けてほしいのですから、見出しタグはきちんと順番を守って使いましょう。
当記事の関連記事■見出しタグを変更する(1)Seesaaブログの見出しタグを確認する
■見出しタグを変更する(2)見出しタグをどこで使うのか計画する
■見出しタグを変更する(3)h3やh4をpタグに入れ替える
■見出しタグを変更する(4)スマホ用テンプレート(見出しタグのスタイルを作る)
■見出しタグを変更する(2)見出しタグをどこで使うのか計画する
■見出しタグを変更する(3)h3やh4をpタグに入れ替える
■見出しタグを変更する(4)スマホ用テンプレート(見出しタグのスタイルを作る)
Seesaaブログの見出しタグを確認する
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」の見出しタグは、「h1」〜「h6」まであります。何もしなくてもデフォルトの状態で既にCSSに記述されています。
<デフォルトのCSS>
/* other */
h1 {
font-size: 28px;
}
h2 {
font-size: 21px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 6px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 21px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 6px;
}
このようにCSS(スタイルシート)には記述されていますが、実際に「h1」〜「h6」までを記事に書いたらどのように表示されるのかを確認してみます。
とりあえず、記事の作成画面では「テストです」と書いてみました。
記事作成画面
実際の表示
CSSで記述されている通りの文字サイズで表示されました。
「h5」なんてCSSで「font-size: 6px;」と指定されているので、何と書いてあるのかすらわからないぐらい小さく表示されていますねw
さて、Seesaaブログでは見出しタグ「h1」はブログタイトル部分に使われています。「h2」は記事タイトルです。
「h2」を使用している記事タイトルですが、例えばこのブログでは記事タイトルを太字表記にしていますが、その「太字」という指示はどこで出しているのでしょう?
上記のデフォルトの見出しタグのスタイルではフォントサイズしか指定していなかったわけで、太字に指定しているのはどこか?ということです。
CSSでは他の場所にも見出しタグに対するスタイルが記述されているはずなんですよね。
見出しタグ「h1」のスタイル
見出しタグ「h1」はブログタイトル部分に使用されている見出しタグです。
CSS上での「h1」には「font-size: 28px;」しか指示がありません。
どこで太字の指示を出しているのかというと、「header h1」です。
.header h1 {
margin: 0;
font-size: 32px;
line-height: 1.4;
font-weight: bold;
}
.header h1 a {
color: #333;
text-decoration: none;
}
margin: 0;
font-size: 32px;
line-height: 1.4;
font-weight: bold;
}
.header h1 a {
color: #333;
text-decoration: none;
}
これは「ヘッダーの中のh1」に対する指示です。
「.header h1」ではフォントサイズは32pxになっています。デフォルトの「h1」のフォントサイズは28pxです。「.header h1」で「font-weight: bold;」と記述することで、文字は太字になります。「h1」に直接ではなく、「ヘッダーの中のh1」という特別な指示を出すことにより、ブログタイトル「h1」は32pxの太字表示になっています。
見出しタグのスタイルを指示している場所
他の見出し「h2」〜「h6」はCSSでどのように記述されているのかというと、特別なスタイルは設定されていません。先ほど書いた通り、フォントサイズが決められているだけです。
<CSSでの見出しタグまとめ>
h1 font-size: 28px;
h2 font-size: 21px;
h3 font-size: 16px;
h4 font-size: 14px;
h5 font-size: 12px;
h6 font-size: 6px;
h2 font-size: 21px;
h3 font-size: 16px;
h4 font-size: 14px;
h5 font-size: 12px;
h6 font-size: 6px;
これが、CSSでの見出しに対する指示です。
「h1」は「ヘッダーの中のh1」という記述でスタイルが決められていました。
「h2」〜「h6」に対する見出しは、実はすべて見出しタグに付けられた「class」で指示を出しています。
HTMLとコンテンツHTMLでの見出しを書き出してみます。
行数はデフォルトのテンプレートでの行数です。
<HTMLでの見出しタグ>
h1 ブログタイトル(「ヘッダーの中のh1」で指示されています)
h2 記事タイトル、トップページの記事タイトル、タグ一覧ページの記事タイトル、コメント記入ページの記事タイトル
・067行目 <h2 class="article__title"><% article.subject -%></h2>
・135行目 <h2 class="entry__title"><a href="<% article.page_url -%>"><% article.subject -%></a></h2>
・360行目 <h2 class="article__title"><a href="<% article.page_url -%>"><% article.subject -%></a></h2>
・618行目 <h2 class="article__title"><% article.subject -%></h2>
h3 記事ページ下の「関連記事」タイトル、記事ページ下の「この記事へのコメント」、コメント記入ページの「〜へのコメントを書く」
・110行目 <h3 class="module__heading"><% if:blog.get_property('related_article') eq 'category' %><% article_category.name -%>の最新記事<% else %>関連する記事<% /if %></h3>
・273行目 <h3 class="module__heading">この記事へのコメント</h3>
・640行目 <h3 class="module__heading">"<% article.subject | tag_break -%>"へのコメントを書く</h3>
h4 コメントを記入した時にエラーになった場合の「ERROR」、ブログの認証?に失敗した場合の「ERROR」
・645行目 <h4 class="message__title message__title--error">ERROR</h4>
・714行目 <h4 class="message__title message__title--error">ERROR</h4>
h5 なし
h6 なし
h2 記事タイトル、トップページの記事タイトル、タグ一覧ページの記事タイトル、コメント記入ページの記事タイトル
・067行目 <h2 class="article__title"><% article.subject -%></h2>
・135行目 <h2 class="entry__title"><a href="<% article.page_url -%>"><% article.subject -%></a></h2>
・360行目 <h2 class="article__title"><a href="<% article.page_url -%>"><% article.subject -%></a></h2>
・618行目 <h2 class="article__title"><% article.subject -%></h2>
h3 記事ページ下の「関連記事」タイトル、記事ページ下の「この記事へのコメント」、コメント記入ページの「〜へのコメントを書く」
・110行目 <h3 class="module__heading"><% if:blog.get_property('related_article') eq 'category' %><% article_category.name -%>の最新記事<% else %>関連する記事<% /if %></h3>
・273行目 <h3 class="module__heading">この記事へのコメント</h3>
・640行目 <h3 class="module__heading">"<% article.subject | tag_break -%>"へのコメントを書く</h3>
h4 コメントを記入した時にエラーになった場合の「ERROR」、ブログの認証?に失敗した場合の「ERROR」
・645行目 <h4 class="message__title message__title--error">ERROR</h4>
・714行目 <h4 class="message__title message__title--error">ERROR</h4>
h5 なし
h6 なし
<コンテンツHTMLでの見出しタグ>
h1 なし
h2 なし
h3 各コンテンツのタイトル
・003行目 <h3 class="module__heading"><% parts.title -%></h3>
・015行目 <h3 class="module__heading"><% parts.title -%></h3>
・047行目 <h3 class="module__heading"><% parts.title -%></h3>
・067行目 <h3 class="module__heading"><% parts.title -%></h3>
・078行目 <h3 class="module__heading"><% parts.title -%></h3>
・157行目 <h3 class="module__heading"><% parts.title -%></h3>
・198行目 <h3 class="module__heading"><% parts.title -%></h3>
・210行目 <h3 class="module__heading"><% parts.title -%></h3>
・270行目 <h3 class="module__heading"><% parts.title -%></h3>
・287行目 <h3 class="module__heading"><% parts.title -%></h3>
・307行目 <h3 class="module__heading"><% parts.title -%></h3>
・317行目 <h3 class="module__heading"><% parts.title -%></h3>
・336行目 <h3 class="module__heading"><% parts.title -%></h3>
・350行目 <h3 class="module__heading"><% parts.title -%></h3>
・362行目 <h3 class="module__heading"><% parts.title -%></h3>
h4 最新の記事の記事タイトル
・24行目 <h4 class="recent-entry__title"> 〜 </h4>
・30行目 <h4 class="recent-entry__title"> 〜 </h4>
h5 なし
h6 なし
h2 なし
h3 各コンテンツのタイトル
・003行目 <h3 class="module__heading"><% parts.title -%></h3>
・015行目 <h3 class="module__heading"><% parts.title -%></h3>
・047行目 <h3 class="module__heading"><% parts.title -%></h3>
・067行目 <h3 class="module__heading"><% parts.title -%></h3>
・078行目 <h3 class="module__heading"><% parts.title -%></h3>
・157行目 <h3 class="module__heading"><% parts.title -%></h3>
・198行目 <h3 class="module__heading"><% parts.title -%></h3>
・210行目 <h3 class="module__heading"><% parts.title -%></h3>
・270行目 <h3 class="module__heading"><% parts.title -%></h3>
・287行目 <h3 class="module__heading"><% parts.title -%></h3>
・307行目 <h3 class="module__heading"><% parts.title -%></h3>
・317行目 <h3 class="module__heading"><% parts.title -%></h3>
・336行目 <h3 class="module__heading"><% parts.title -%></h3>
・350行目 <h3 class="module__heading"><% parts.title -%></h3>
・362行目 <h3 class="module__heading"><% parts.title -%></h3>
h4 最新の記事の記事タイトル
・24行目 <h4 class="recent-entry__title"> 〜 </h4>
・30行目 <h4 class="recent-entry__title"> 〜 </h4>
h5 なし
h6 なし
以上がSeesaaブログのテンプレート「シンプルA. ホワイト 右カラム」での見出しタグの場所です。
コードを見たらすべてに「class」が記述されています。
見出しタグ自体はフォントサイズしか設定されていませんので、この「class」でスタイルの指示を出していることがわかります。
見出しタグ「h2」〜「h4」のスタイル
「h1」は「ヘッダーの中のh1」で指示を出していました。
「h2」以下は「class」を指定して指示を出していますので、少し比較してみたいと思います。
(「h5」と「h6」には指示がありませんので無視します)
<h2に対するスタイル>
<CSSでのh2>
h2 font-size: 21px;
<h2に使われているclass>
.article__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
.entry__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
h2 font-size: 21px;
<h2に使われているclass>
.article__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
.entry__title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
<h3に対するスタイル>
<CSSでのh3>
h3 font-size: 16px;
<h3に使われているclass>
.module__heading {
font-size: 16px;
font-weight: bold;
}
h3 font-size: 16px;
<h3に使われているclass>
.module__heading {
font-size: 16px;
font-weight: bold;
}
<h4に対するスタイル>
<CSSでのh4>
h4 font-size: 14px;
<h4に使われているclass>
.message__title--error {
color: #f00;
font-weight: bold;
}
.module--recent-entry .recent-entry__title {
font-size: 14px;
font-weight: bold;
overflow: hidden;
}
h4 font-size: 14px;
<h4に使われているclass>
.message__title--error {
color: #f00;
font-weight: bold;
}
.module--recent-entry .recent-entry__title {
font-size: 14px;
font-weight: bold;
overflow: hidden;
}
見出しタグに付けられている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的にも意味があるのです。
次の記事の紹介
ということで、次の記事から見出しタグの変更作業を始めます。
まずは次の記事で、自分のブログで見出しタグをどのように使いたいのかを考えてみます。
■【Seesaaブログ新デザインシステム】見出しタグを変更する(2)見出しタグをどこで使うのか計画する
見出しタグはSEO的にとても重要なものです。この記事では、見出しタグを自分のブログでどのように使いたいのかを計画したいと思います。‥‥
見出しタグはSEO的にとても重要なものです。この記事では、見出しタグを自分のブログでどのように使いたいのかを計画したいと思います。‥‥
seesaaブログのhタグ部分をcssでいじっても全く変わらず、途方にくれていたところこのブログを見つけました。
昨日1日中悩んでいたことがすっきりして、感謝してもしきれません。
とても分かりやすく説明されていて助かりました。
本当にありがとうございました。
当ブログの管理人です。
コメントありがとうございます。
sakura 様のお役に立てて嬉しく思います。記事を書いた甲斐がありました。
ありがとうございました。