Templates for SLMaMe

（2009.02.22 21:43 HTML ソースに不備があり、修正しました）
今回は、投稿日と記事タイトルの位置を入れ替えたいと思います。

何故入れ替えるのかというと、単に、投稿日より記事タイトルの方が重要だからです。
ソラマメのデフォルトテンプレートでは、記事タイトルよりも投稿日の方が重要視されるよう HTML 内でタグ付けされています。つまり、日記スタイルのテンプレートになっているわけですね。

これは情報系のブログやショップブログには相応しくありません。例え日記ブログだとしても、より多くの訪問者を集めたい場合は入れ替えた方が良いかと思います。日付で検索する人はあまりいないでしょうし。

手を加えるテンプレートは「トップページ」「個別記事」「アーカイブ」「スタイルシート」の４つです。

まずは該当するソースコードの位置を確認しましょう。
テンプレート「トップページ」の場合は、以下の部分になります。

<IfDateChanged><h2 class="date"><%EntryDate%></h2></IfDateChanged>



        <div class="blogbody">

    <a name="<%EntryId%>"></a>

    <h3 class="title"><%EntryTitle%></h3>

テキストエディタにコピペして作業されている方は、45行目から49行目辺りを確認してみてください。

前回のカスタマイズで、 <%EntryTitle%> が記事タイトルを自動的に取得するためのタグであることを確認しましたね。同じように、 <%EntryDate%> は投稿日を自動的に取得しています。

ここで、<h2 class="date"> や <h3 class="title"> 、 <IfDateChanged> が気になった方も多いでしょう。

h2、h3 は見出しのレベルを指定する HTML タグ です。 class="date" や class="title" は、この部分を装飾するために記述されたクラス名です。装飾の内容は「スタイルシート（CSS）」に記述されています。

「タイトルを入れ替える」という点では <%EntryTitle%> と <%EntryDate%> を入れ替えるだけでもカスタマイズが完了しているように見えます。しかし、「date」は投稿日を装飾するために名付けられたクラス名、「title」は記事タイトルを装飾するために名付けられたクラス名です。今後のカスタマイズで混乱しないために、クラス名も併せて入れ替えておきましょう。

<IfDateChanged> は「もし日付が変わったら」という意味で、１日に投稿された記事を「１日分」として繋げるために存在しています。ですが、ソラマメでは最初から（恐らく殆どのテンプレートが）同日に複数の記事を投稿しても個別に独立しているので、このタグは何の効力も持っていません。削除しても問題ありませんので、サクッと消しちゃいましょう。

テンプレート「トップページ」は以下のように修正します。

        <h2 class="title"><%EntryTitle%></h2>



        <div class="blogbody">

    <a name="<%EntryId%>"></a>

        <h3 class="date"><%EntryDate%></h3>

テンプレート「個別記事」は以下の部分を見つけてください。
エディタを使用されている方は、41行目〜44行目辺りを確認してみてください。

    <h2 class="date"><%EntryDate%></h2>



        <div class="blogbody">

        <h3 class="title"><%EntryTitle%></h3>

テンプレート「個別記事」は、以下のように修正します。

    <h2 class="title"><%EntryTitle%></h2>



        <div class="blogbody">

        <h3 class="date"><%EntryDate%></h3>

テンプレート「アーカイブ」は以下の部分を見つけてください。
エディタを使用されている方は43行目〜46行目を確認してみてください。

<IfDateChanged><h2 class="date"><%EntryDate%></h2><a name="<%EntryDateTag%>"></a></IfDateChanged>

<div class="blogbody">

<a name="<%EntryId%>"></a>

<h3 class="title"><%EntryTitle%></h3>

テンプレート「アーカイブ」は、以下のように修正します。

<h2 class="title"><%EntryTitle%></h2><a name="<%EntryDateTag%>"></a>

<div class="blogbody">

<a name="<%EntryId%>"></a>

<h3 class="date"><%EntryDate%></h3>

次に「スタイルシート」を修正します。修正するのは以下の部分です。
エディタを使用されている方は、「.date {」でファイル内検索してみてください。226行目〜253行目辺りです。

.date {  

   border-top: 1px solid #484848;

   border-left: 1px solid #484848;

   border-right: 1px solid #484848;

   border-bottom: 1px solid #484848;

   background: #787878 url(/_img/simple_gray/obj.gif);

   background-position: 1px 1px;

   color: #fff;

   font-size: 12px;

   letter-spacing: 2px;

   padding: 5px 0px 5px 5px;

}



.blogbody {

   background: #fff;

   margin: 0px 0px 10px 0px;

   padding: 8px;

   border-left: 1px solid #484848;

   border-right: 1px solid #484848;

   border-bottom: 1px solid #484848;

}



.title {

   color: #000;

   font-size: 12px;

   font-weight: bold;

   height: 10px;

}

それぞれのクラス名「.date」と「.title」を下記のように入れ替えます。
このままだと記事タイトルのリンク色が背景画像と同系色になってしまうので、分かりやすいよう白に指定しておきます。

.title {  

   border-top: 1px solid #484848;

   border-left: 1px solid #484848;

   border-right: 1px solid #484848;

   border-bottom: 1px solid #484848;

   background: #787878 url(/_img/simple_gray/obj.gif);

   background-position: 1px 1px;

   color: #fff;

   font-size: 12px;

   letter-spacing: 2px;

   padding: 5px 0px 5px 5px;

}



.title a, .title a:link, .title a:hover, .title a:visited, .title a:active {  

   color: #fff;

}



.blogbody {

   background: #fff;

   margin: 0px 0px 10px 0px;

   padding: 8px;

   border-left: 1px solid #484848;

   border-right: 1px solid #484848;

   border-bottom: 1px solid #484848;

}



.date {

   color: #000;

   font-size: 12px;

   font-weight: bold;

   height: 10px;

}

「テンプレート」＜「カスタマイズ」から、それぞれのテンプレートを間違いの無いようにコピー＆ペーストして保存してください。

これで、投稿日と記事タイトルを入れ替えるカスタマイズは終了です。

しかし！投稿日に見出しレベル h3 が指定されていますが、本当に投稿日は記事タイトルの次に重要でしょうか。また、ページ全体の見出しレベルは望ましい順序で割り振られているでしょうか。

次回は、HTML における見出しについてもう少し掘り下げてみます。そして、見出しレベルの再設定と、記事内で見出しを使用する方法をご紹介します。