カテゴリページにカテゴリーの記事一覧を表示するカスタマイズ

今回は、FC2ブログのカテゴリページ上部にそのカテゴリのエントリリストを表示するカスタマイズです。あまり融通が利かないので、表示されてるエントリのリストのみ(FCブログの、環境設定→ブログの設定にある、1ページ上に表示するエントリ数だけ)しか表示できないようです。
それでもリストで表示してあれば、エントリの内容がわかりやすくなりますので、興味のある方はお試し下さい。
また、折角エントリ上部にフリーエリアを設定していますので、カテゴリのリストはそちらに表示することにします。

1.blogtube_basicを使う場合

blogtube_extraでは、エントリ上部のフリーエリアを増やす場合を考えて、blogtube_basicから少し変更を行っています。ですので、お使いのテンプレートに合わせてカスタマイズしてください。

エントリ上部のフリーエリアを使用していない場合

この場合はそのままテンプレートのフリーエリアを使って表示します。以下の箇所を追加してください。
現在フリーエリアを使用していない場合、!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。(わかりやすくするためにメイン開始とエントリ開始は表記してありますが、もちろんこれは重複して追加しないで下さい。それぞれの間だけです。)blogtube_basic、blogtube_basic01共に同じです。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div id="rss">
<div id="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div id="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

標準でカスタマイズする場合と同様に、タイトル部分と表示部分に今回のカスタマイズを挿入します。これだけで大丈夫です。

2.エントリ上部のフリーエリアを使用している場合

追加する場合、スタイルシートもカスタマイズする必要があります。以下を変更して下さい。(idをclassに変更します。)

/*　　　　　RSS　　　　　*/

.rss{
margin: 0 auto 10px;
border: solid 1px #000;
background: #fff;
}

.rsstitle{
padding: 3px;
text-align: center;
font-size: 12px;
color: #000;
background: #ebebeb;
border-bottom: solid 1px #000;
}

.rssmain{
padding: 3px;
text-align: left;
font-size: 12px;
color: #000;
line-height: 175%;
}

/*　　　　　RSS　　　　　*/

次はhtmlです。スタイルシートを変更したのは、エントリ上部のフリーエリアを追加しやすくするためです。この変更により、フリーエリアをそのままコピー&ペーストでいくつでも追加できます。

使用しているフリーエリアの変更

<div class="rss">
<div class="rsstitle">
<div class="rssmain">

構成は同じだとして、idをclassに変更します。これにより、フリーエリアをそのまま増やすことができます(idはそのページで一回しか使用できない)。
カテゴリリストの追加ですが、現在使用しているフリーエリアの上でも下でもお好きな位置に以下を追加します。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

これも全部idからclassに変更しています。違いはそれだけです。

3.blogtube_extraの場合

blogtube_extraの場合、最初からclassにしてありますので、スタイルシートの変更は必要ありません。エントリ上部のフリーエリアを使用していない場合はエントリ上部に、使用している場合はお使いのフリーエリアの上か下に追加します。

<div id="box-main"><!-- メイン開始 -->

<!--category_area-->
<!-- エントリ上部フリーエリア -->
<!-- 使用しない場合はここから下を削除↓ -->
<div class="rss">
<div class="rsstitle">
カテゴリーの記事一覧
</div><!-- rsstitle -->

<div class="rssmain"><!-- ここから下に挿入↓ -->

<ul><!--topentry-->
<li><a href="<%topentry_link>"><%topentry_title></a> - (<%topentry_month>/<%topentry_day>）</li>
<!--/topentry--></ul>

</div><!-- rssmain --><!-- ここから上に挿入↑ -->

</div><!-- rss -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- エントリ上部フリーエリア終了 -->
<!--/category_area-->

<!-- エントリ開始 -->

!-- メイン開始 --から!-- エントリ開始 --の間に挿入してください。フリーエリアを使用している場合も同様に、この間の、フリーエリアの上か下に挿入します。

4.いくつかのヒント

ここではカテゴリページにエントリの一覧を表示しましたが、変数を理解していれば、同様のカスタマイズをトップページなどでも表示できます。以下に関連するFCブログ用の変数を掲載しますので、カスタマイズにチャレンジしてみて下さい。

<!--category_area-->
カテゴリー画面(blog-category-x.html)の時に表示するブロック(フラグ)
<!--/category_area-->

<!--index_area-->
トップの時(?mode 等のクエリーが無し)のみに表示するブロック(フラグ)
<!--/index_area-->

次は日付の表示です。簡単に月/日の表記ですが、変数を変更すれば好きな表示にカスタマイズできます。

<%topentry_year> - 年を表示
<%topentry_month> - 月を表示
<%topentry_day> - 日を表示
<%topentry_hour> - 時を表示
<%topentry_minute> - 分を表示
<%topentry_second> - 秒を表示
<%topentry_youbi> - 曜日（洋風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示
<%topentry_wayoubi> - 曜日（和風）を表示