記事内に広告が含まれています。

seesaaブログの記事タイトルをh2の見出しにする

ウェブサイト・ブログ作成
この記事は約4分で読めます。

 seesaaブログのテンプレートの記事タイトルを見出しタグh2要素にする方法。

 seesaaブログのテンプレートは、見出しタグH2(h2)が日付に使われている。

 で、スタイルシートも日付のスタイルシートが使われている。

 もったいない!

 SEOを意識するなら、記事のタイトルをH2要素で指定すべきじゃないんだろうか?

 

 seesaaブログのテンプレートの場合、テンプレートデザインはスタイルシート・コンテンツ・HTMLと分かれている。

 FC2ブログユーザーだと、HTMLをカスタマイズしたくなるが、実はHTMLを改造してもソースで見ても設定が変わらない。

 

 なんと、コンテンツから変更する。

見出しの設定を変えよう

コンテンツのHTMLの設定を変更する

1、コンテンツをクリック⇒記事⇒『HTMLの編集』をクリック。

 

2、<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>のh2をpに書き換え。

 

3、<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>のh3をh2に書き換える。

 

4、保存ボタンをクリック。

 

 


 これで、日付より、記事タイトルのほうが検索エンジンにヒットする確率が高くなる。

 SEO的には、この方が有利なんじゃないかな?

 HTMLの設定が終わったら、スタイルシートも変更しよう。

 スタイルシートを変更しないと、レイアウトが乱れておかしなことになってしまう場合が。

 


seesaaブログのスタイルシートを変更しよう

 見出しタグのスタイルシートの変更は、『デザイン設定』から変更する。

1、『デザイン』⇒『デザイン設定』をクリック。

2、テンプレートのタイトルをクリック。

3、スタイルシートを書き換える。

元のスタイルシートの例

h2 {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight:bold;
text-align:left;
}

h3 {
font-size:12px;
font-weight:bolder;
padding: 10px 15px 15px 15px;
}

h3 a{
text-decoration: none;
color:#666;
}

 

  h2とh3を入れ替えて、ついでにh3要素の文字サイズも変更しておこう。

 また、文字のカラーを指定していないので、このままだと全体のリンクの色として指定されたカラーコードが記事タイトルにも適応される。

 h2,h3,h4,h5,h6のカラーコードも指定しておくといいかも。

 

書き換え後のスタイルシートの例

h2 {
font-size:16px;
font-weight:bolder;
padding: 10px 15px 15px 15px;
}

h2 a{
text-decoration: none;
 COLOR: #202020;
}
h3 {
font-size:14px;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight:bold;
text-align:left;
COLOR: #ff8000;
}
h4 {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight:bold;
text-align:left;
COLOR: #ff0000;
}

 スタイルシートの記載はあくまで例なので、文字の色や大きさは好みで変えてください。

  h5,6要素は、h4と同じように記載して、カラーコードや文字サイズを変更すると簡単。

コメント

タイトルとURLをコピーしました