SEO対策の観点から<h2>タグ、<h3>タグを取り除くことにしました。
SEO：サーチ・エンジン・オプティマイゼーション
Googleなどの検索エンジンはページ内に出てくるキーワードに独自の重み付けを行い、検索順位を決める際に考慮しています。キーワードの重み付けを行う一要因として、見出しを意味する<hx>タグも考慮しています。
Googleなどの検索エンジンはページ内に出てくるキーワードに独自の重み付けを行い、検索順位を決める際に考慮しています。キーワードの重み付けを行う一要因として、見出しを意味する<hx>タグも考慮しています。
日付をアピールしてもあまり意味が無いので、この<h2>タグを取り除きました。記事タイトルはアピールしても良いのですが、ブログは投稿頻度が多いので日々記事タイトルが入れ替わります。トップページで強調する文字列が安定しないので<h3>タグも併せて取り除きました。
このカスタマイズは記事コンテンツの編集です。マイブログメニューの［デザイン］⇒［コンテンツ］の［記事］から編集を行います。ソース中段あたりに次の記述があります。
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
※各カスタマイズの紹介を独立させるために、初期状態のソースで説明します。
これが記事日付に関する記述です。
この赤文字で示した<h2>タグが不要なので、<h2>タグをブロック要素の<div>タグに置き換えます。
この赤文字で示した<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>タグのクラスセレクタも取り除きます。
こちらも同様に<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;
}
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{ } に追加します。
<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;
}
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;
}
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{ } に追加します。
<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;
}
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;
}
以上でスタイルシートのデザインは完了です。
このスタイルシートの修正の有無はテンプレートに依存します。
このスタイルシートの修正の有無はテンプレートに依存します。