<h2>タグ、<h3>タグの削除

SEO対策の観点から<h2>タグ、<h3>タグを取り除くことにしました。

SEO:サーチ・エンジン・オプティマイゼーション
Googleなどの検索エンジンはページ内に出てくるキーワードに独自の重み付けを行い、検索順位を決める際に考慮しています。キーワードの重み付けを行う一要因として、見出しを意味する<hx>タグも考慮しています。

日付をアピールしてもあまり意味が無いので、この<h2>タグを取り除きました。記事タイトルはアピールしても良いのですが、ブログは投稿頻度が多いので日々記事タイトルが入れ替わります。トップページで強調する文字列が安定しないので<h3>タグも併せて取り除きました。

このカスタマイズは記事コンテンツの編集です。マイブログメニューの[デザイン]⇒[コンテンツ]の[記事]から編集を行います。ソース中段あたりに次の記述があります。

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
※各カスタマイズの紹介を独立させるために、初期状態のソースで説明します。

これが記事日付に関する記述です。
この赤文字で示した<h2>タグが不要なので、<h2>タグをブロック要素の<div>タグに置き換えます。

<% if:with_date %><div class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></div><% /if %>

続いて<h3>タグですがその2行下に次の記述があります。

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>

これが記事タイトルに関する記述です。
こちらも同様に<h3>タグを<div>タグに置き換え、<a>タグのクラスセレクタも取り除きます。

<div class="title"><a href="<% article.page_url %>"><% article.subject %></a></div>

以上でHTMLカスタマイズの作業は完了です。
初期値との差分を確認すると次のように表示されます。

初期値との差分

このカスタマイズはテンプレートによってスタイルシートの編集が必要になります。
「シンプルホワイト」を例に説明します。

h2 {
padding: 0px;
font-weight:bold;
font-size:14px;
text-align:left;
font-family:arial, Helvetica;
color:#C33;
}
.date{
clear:left;
color:#000;
margin-top:0px;
margin-bottom:0px;
padding:5px;
border-left:5px solid #000;
}

「シンプルホワイト」では h2{ } と .date{ } を用いて記事日付をデザインしています。
<h2>タグを削除したので h2{ } で記述しているデザイン定義を .date{ } に追加します。

date {
font-weight:bold;
font-size:14px;
text-align:left;
font-family:arial, Helvetica;

clear:left;
color:#000;
margin-top:0px;
margin-bottom:0px;
padding:5px;
border-left:5px solid #000;
}

記事タイトルも同様です。

h3 {
padding: 0px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}
H3 a{
color:#000;
text-decoration: none;
}
.title{
font-weight:bold;
padding:5px;
margin:0px;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
.title a{
border:none;
}

h3{ } と .title{ }を用いて記事タイトルをデザインしています。
<h3>タグを削除したので h3{ } で記述しているデザイン定義を .title{ } に追加します。

.title{
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;

font-weight:bold;
padding:5px;
margin:0px;
border-top:1px solid #000;
border-bottom:1px solid #000;
}
.title a{
color:#000;
text-decoration: none;

border:none;
}

以上でスタイルシートのデザインは完了です。
このスタイルシートの修正の有無はテンプレートに依存します。
トップページへ戻る

サイトマップ

Seesaaブログのカスタマイズ > 記事コンテンツ > h2タグ、h3タグの削除
スタイルシート カスタマイズ

スタイルシート作成ツール

HTMLカスタマイズ
サイト全体

記事コンテンツ

コメント、トラックバック
新着記事

カテゴリ

最近のコメント、トラックバック

検索ページ

その他