ブログのタイトルがh1、記事のタイトルがh2。
ここまではいいのだが、左右カラムのタイトル(カテゴリ・最新記事などの文字)やトラックバック・コメントなどの文字にh3の見出しタグが使われているのは、ちょっとなあ。
検索エンジン・SEOを考えると、あまり意味の無い文字にh3の見出しタグは使いたくないところ。
h3以下の見出しタグは記事本文で使いたい。
と言うわけで、まずは、コメントに使われているh3の見出しタグとスタイルシートを何とかしてみたい。
sampleテンプレートの場合、面倒なことに、h3の見出しタグとバックの画像がスタイルシートで指定されている。
まずは、コメントエリアのh3のタグとバックの画像を切り離してそう。
1、HTMLのコメントは<h3 id="comment-top">コメント</h3>、 <h3 class="comment-post">コメントの投稿</h3> 、<h3 class="comment-edit">コメントの編集</h3>という形になっている。
2、対応するスタイルシート部分
<h3 id="comment-top">コメント</h3>
/* コメントトップ
*/
h3#comment-top {
margin : 15px 0 10px
0;
padding : 0 15px;
}
<h3 class="comment-post">コメントの投稿</h3>
h3.comment-post,
<h3 class="comment-edit">コメントの編集</h3>
h3.comment-edit
{
padding : 0 15px;
}
1、HTML部分のカスタマイズ
<h3 id="comment-top">コメント</h3>、 <h3 class="comment-post">コメントの投稿</h3> 、<h3 class="comment-edit">コメントの編集</h3>をそれぞれ、<div id="comment-top">コメント</div>、 <div class="comment-post">コメントの投稿</div> 、<div class="comment-edit">コメントの編集</div>に変更する。
2、スタイルシートのカスタマイズ
/*
コメント部分の設定
------------------------------------------------------------
*/
/* コメントフォーム */
div#primary-column form {
padding :
0 10px;BACKGROUND-COLOR: #ffffff;
}
/* 管理者だけにコメント
*/
input#himitu {
margin-right :
0.5em;
}
/* コメントフォームのボタン */
p.form-btn
{
margin-top : 20px;
}
/* コメントトップ
*/
#comment-top {
margin : 15px 0 10px
0;
padding : 0
15px;
}
.comment-post,
.comment-edit
{
padding : 0 15px;
}
/* コメントのタイトル
*/
.comment-header {
margin-bottom :
10px;
padding : 0 10px;
border-bottom : 1px solid
#333; /* 枠線 */
}
/* コメント本文
*/
div.comment-body {
padding : 0
10px;
}
/* コメントフッター */
ul.comment-footer
{
padding : 10px 10px 15px
10px;
}
ul.comment-footer li {
display :
inline;
list-style-type : none;
}
とまあ、こんな感じ。
これで、コメントエリアの邪魔な見出しタグはなくなったはずなんだけどなあ。
]]>このページナビゲーション、形としては、≪ | HOME | ≫。
このままだと、訪問者にもわかりにくいし、かつSEOでも、不利かも。
SEOに有利な形で、かつ訪問者にもわかりやすい表示に変えてみよう。
<!--
///
///
前ページ・次ページ移動用ナビゲーションリンク部分ここから
///
-->
<p
class="prev-next-navi">
<!--prevpage--><a
href="<%prevpage_url>"
title="前頁へ移動する">«</a><!--/prevpage-->
<span> | </span><a
href="<%url>"
title="トップへ戻る">HOME</a><span> | </span>
<!--nextpage--><a
href="<%nextpage_url>"
title="次頁へ移動する">»</a><!--/nextpage-->
</p>
<!--
///
///
前ページ・次ページ移動用ナビゲーションリンク部分ここまで
///
-->
1、個別記事をあらわす、<!--permanent_area--><!--/permanent_area-->というFC2のエリア変数を使って、個別記事のページでは、次のページと前のページのタイトルを表示するようにしてある。
2、個別記事以外のページでは、<!--not_permanent_area--><!--/not_permanent_area-->というFC2のエリア変数を使って、次のページ・前のページへ戻るが表示されるようにしてある。
3、HOMEの表示については、<%blog_name>というエリア変数を使って、ブログの名前を表示するように設定してみた。
ページナビの位置は変えてないので、個別の記事のページでは、トラックバックエリアの下に表示される。
]]>全記事リストは、すべての記事を一覧にしたリスト。
もともとは閲覧者のためにあるのだが、SEO・検索エンジン最適化にも役立つらしいよ。
ちなみに、FC2ブログの全記事リストは、1ページの表示件数は、最大500記事まで。
また、デフォルトの全記事リストは、FC2ブログの公式ページに表示されるようになっている。
が、これでは面白くないので、自分のブログの中に表示されるようにしてみよう。
1、テンプレートの中に<!--not_titlelist_area--><!--/not_titlelist_area-->に囲われた部分には、タイトルリスト(全記事リスト)を表示できないので、注意。
sampleテンプレートの場合は、<!--not_titlelist_area--><!--/not_titlelist_area-->が指定されていないので、どこに全記事リストを表示させても大丈夫。
<!--titlelist_area-->
<!--titlelist-->
<%titlelist_year>/<%titlelist_month>/<%titlelist_day> :<a
href="<%titlelist_category_url>
"><%titlelist_category></a><br>
・<a
href="<%titlelist_url>"><%titlelist_title></a>
<br>
<br><br>
<!--/titlelist-->
<!--/titlelist_area-->
<br>は見やすくするために区切りを入れただけなので、他のタグでもいいし、あるいはなくてもいいかも。
又は、プラグインのをダウンロードすると、そのまま全記事リストへのリンクになる。
<a href="<%url>archives.html">全ての記事を表示する</a>
日本語部分は、変えてもOK。
FC2ブログの1ページ最大記事数500を表示すると、ページが重くなる。
100くらいずつ分割できるといいかなとも思うのだが、どうも、できないようだ。
例えば、FC2ブログランキングのタグなどを記事タイトルの下に貼り付けてみる。
テンプレートの<!-- 記事本文部分 --> <div class="entry-body">の後ろに、収得したタグを貼り付ける。
<%topentry_body>の後ろに収得したタグを貼り付ける。
FC2ブログランキングのタグは、FC2サービスの追加から簡単にタグの取得ができます。
また、ひとつのIDで複数のブログのタグを作ることもできる。
]]>