記事情報をまとめる

Yume

2009年02月21日 19:11


（2009.02.22 21:43 HTML ソースに不備があり、修正しました）
今回は、記事情報を一つにまとめたいと思います。記事情報とは、投稿日、投稿者、投稿時間、コメント数、トラックバック数、カテゴリー名のことを指します。

これらを「記事情報」としてひとつにまとめ、記事タイトルの下に配置したいと思います。そうすることで、この記事はいつ誰が書いたのか、どのカテゴリーに属しているのか、コメントやトラックバックは何件あるのか、を閲覧者は本文を読む前に流し読みすることができます。
デフォルトテンプレートでは、記事の上部に投稿日が表示されていました。このブログでは、以前ご紹介したカスタマイズ「投稿日と記事タイトルの位置を入れ替える」で記事タイトルの下に投稿日が表示されています。

HTML テンプレートに手を加える


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

テンプレート「トップページ」では、以下の部分を修正します。
テキストエディタを使用されている方は、49行目から58行目辺りを確認してください。
        <div class="date"><%EntryDate%></div>

    <div class="main">

<%EntryBody%><IfEntryBodyMore><span class="main-continues"><a class="acontinues" href="<%EntryPermalink%>">続きを読む</a></span></IfEntryBodyMore></div><br clear="all" />



    <div class="posted">Posted by <%EntryAuthor%> at

        <a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>

        <IfEntryAllowComment>│<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>

        <IfEntryAllowPing>│<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing>

        <IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory></div>

    </div>

<div class="date"> が前回カスタマイズした投稿日の部分です。そして、<div class="posted"> が投稿者や投稿時間、コメント、トラックバック、カテゴリー名を表示している部分です。

<div class="posted"> の中身を <div class="date"> に移すのですが、それぞれ、装飾するためにクラス名（class="クラス名"）が設定されていますね。今回のカスタマイズで投稿日は個別に表示されなくなるので、クラス名「date」は削除し、「posted」を記事情報を装飾するためのクラス名として残そうと思います。

テンプレート「トップページ」を以下のように修正します。
<div class="posted">Posted by <%EntryAuthor%> at <%EntryDate%> <a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>｜<IfEntryCategory><a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory><IfEntryAllowComment>｜<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment><IfEntryAllowPing>｜<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing></div>

<div class="main">

<%EntryBody%>&nbsp;&nbsp;<IfEntryBodyMore><span class="main-continues"><a class="acontinues" href="<%EntryPermalink%>#more">続きを読む</a></span></IfEntryBodyMore></div><br clear="all" />

</div>

テンプレート「個別記事」は以下の部分を探してください。
テキストエディタを使用されている方は、43行目辺りを確認してください。
        <div class="date"><%EntryDate%></div>

        <div class="main"><%EntryBody%></div><br clear="all" />

        <a name="more"></a>

        <div class="main"><%EntryBodyMore%></div><br clear="all" />

        <div class="posted">Posted by <%EntryAuthor%> at <%EntryTime%><IfEntryAllowComment>│<a class="aposted" href="#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment><IfEntryAllowPing>│<a class="aposted" href="#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing>

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>

        <div class="menu"><a class="amenu" href="<%BlogUrl%>">このBlogのトップへ</a><IfPrevEntry>│<a class="amenu" href="<%PrevEntry%>">前の記事</a></IfPrevEntry><IfNextEntry>│<a class="amenu" href="<%NextEntry%>">次の記事</a></IfNextEntry></div>

            </div>

テンプレート「個別記事」は以下のように修正します。
<div class="posted">Posted by <%EntryAuthor%> at <%EntryDate%> <a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>｜<IfEntryCategory><a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>

<IfEntryAllowComment>｜<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>

<IfEntryAllowPing>｜<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing></div>



<div class="main"><%EntryBody%></div><br clear="all" />

<a name="more" id="more"></a>

<div class="main"><%EntryBodyMore%></div><br clear="all" />



<div class="menu"><a class="amenu" href="<%BlogUrl%>">このBlogのトップへ</a><IfPrevEntry>│<a class="amenu" href="<%PrevEntry%>">前の記事</a></IfPrevEntry><IfNextEntry>│<a class="amenu" href="<%NextEntry%>">次の記事</a></IfNextEntry></div>

テンプレート「アーカイブ」は以下の部分を探してください。
エディタを使用されている方は46行目〜53行目辺りを確認してみてください。
<div class="date"><%EntryDate%></div>

<div class="main"><%EntryBody%><IfEntryBodyMore><span class="main-continues"><a class="acontinues" href="<%EntryPermalink%>">続きを読む</a></span></IfEntryBodyMore></div><br clear="all" />

<div class="posted">Posted by <%EntryAuthor%> at

<a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>

<IfEntryAllowComment>│<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>

<IfEntryAllowPing>│<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing>

<IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory>

</div>

テンプレート「アーカイブ」は以下のように修正します。
<div class="posted">Posted by <%EntryAuthor%> at <%EntryDate%> <a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a><IfEntryCategory>│<a class="aposted" href="<%EntryCategoryUrl%>"><%EntryCategory%></a></IfEntryCategory><IfEntryAllowComment>│<a class="aposted" href="<%EntryPermalink%>#comments">Comments(<%EntryCommentCount%>)</a></IfEntryAllowComment>

<IfEntryAllowPing>│<a class="aposted" href="<%EntryPermalink%>#trackback">TrackBack(<%EntryPingCount%>)</a></IfEntryAllowPing></div>

<div class="main">

<%EntryBody%>&nbsp;&nbsp;<IfEntryBodyMore><span class="main-continues"><a class="acontinues" href="<%EntryPermalink%>#more">続きを読む</a></span></IfEntryBodyMore></div><br clear="all" />

</div>

これで、各ページの記事タイトル下に記事情報がまとめられました。

CSS テンプレートに手を加える


次に、テンプレート「スタイルシート」を修正します。
エディタを使用されている方は、252行目〜280行目辺りを確認してください。
.date {

   text-align: right;

   color: #666;

   font-size: 10px;

}



.main {

   width: 502px;

   color: #000;

   font-size: 12px;

   padding: 15px 0px 15px 0px;

   overflow: auto;

   line-height: 135%;

}



.main img {

   margin: 0px 5px 5px 5px;

}



.main-continues {

   font-size: 12px;

}



.posted {

   color: #000;

   font-size: 10px;

   text-align: right;

   margin: 0px 0px 25px 0px;

}

前回のカスタマイズで投稿日が目立ち過ぎないようにスタイリングしたばかりなので、「.posted」の部分を削除し、「.date」を「.posted」にします。
.posted {

   text-align: right;

   color: #666;

   font-size: 10px;

}



.main {

   width: 502px;

   color: #000;

   font-size: 12px;

   padding: 15px 0px 15px 0px;

   overflow: auto;

   line-height: 135%;

}



.main img {

   margin: 0px 5px 5px 5px;

}



.main-continues {

   font-size: 12px;

}

これで、投稿日のスタイルがカスタマイズした記事情報に適用されました。

注意点


カテゴリー名が長いと（このブログの場合はカテゴリー「カスタマイズを始める前に」）記事情報の途中で折り返しが生じてしまいます。

気になる場合は、ブログ全体の横幅とメインエリアの横幅を広くしたり、コメント数の手前（<IfEntryAllowComment> の直前）に <br /> で改行を入れてコメント数とトラックバック数が２行目にまとめて表示されるようにしたり、その他のテキスト部分を短く、または削除することで調節してみてください。
カスタマイズ Tips