（ちょっとメモ）FC2ブログに「カテゴリ別一覧」を作る

今さらですが、この「ほんっとにはじめてのHTML5」に、「カテゴリ」と「月別アーカイブ」の一覧ページを作りました。今回はFC2ブロガー以外はごめん今回は関係ない記事です。スルーして。

今まではサイドバーからクリックしても、一覧でなく記事そのものが表示されていて、自分でも不便を感じ、やっと設置しました。その設置方法をメモっておきます。

本日のINDEX

1. FC2ブログにカテゴリ別一覧を作る
   1. 【1】カテゴリ別一覧のソースを作る
   2. 【2】<%topentry>の上にソースを置く
   3. 【3】<%topentry>部分を<!--not_category_area-->にする
   4. 【4】表示するタイトル数を設定する
2. 応用：月別アーカイブ一覧を作る
3. テンプレート全体の構造まとめ

FC2ブログにカテゴリ別一覧を作る

カテゴリ別一覧の作り方です。（月別アーカイブ、検索結果、タグ検索結果などもこの応用です）
FC2ブログのテンプレート用変数の「エリア（モード）変数」をいくつか使います。

テンプレートをいじるときは、必ずバックアップを取ってから作業をしましょう。
間違えて大事なタグを削除しちゃったりしたら、あとで収集がつかなくなるよ。

【1】カテゴリ別一覧のソースを作る

テンプレートの「記事の表示部分」のHTMLをコピーして「一覧の表示部分」に書き換えます。

「記事の表示部分」の探し方

これは 使っている「テンプレート」によって HTML の構成が違うので、はっきり「ココ」と言えませんが、探すヒントを書いておきますね。
（何度か自分のテンプレートを編集している人なら、すぐわかると思うんだけどね）

まず、テンプレート内で <!--topentry--> 〜 <!--/topentry--> で囲まれている大きなブロックを探します。（ブラウザの検索で探すと見つけやすいです）
いくつか見つかるかもしれませんが、大きな範囲で囲まれているものが、たぶん記事部分です。
<!--topentry--> 〜 <!--/topentry--> とは、FC2ブログのテンプレート変数と呼ばれるヤツで、「繰り返し表示させるブロック」を作ります。WordPressの「WordPressループ」みたいなもんですね。

で、その <!--topentry--> 〜 <!--/topentry--> の中に、自分のブログのHTMLの構成があることを確認します。この「ほんっとに...」の例だと「記事の表示部分」は、ざっとこのようになっています。

<!--topentry-->

<div class="content">　←全体を囲むブロックがあります（テンプレによってクラス名は違うと思う）

  <h2 id="e<%topentry_no>" class="entry_header">　←記事のタイトル
    <!--not_permanent_area--><a href="<%topentry_link>" title=""><!--/not_permanent_area-->
    <%topentry_title>
    <!--not_permanent_area--></a><!--/not_permanent_area-->
  </h2>

  <div class="entry_body">　←記事本文のブロック

    <%topentry_body>　←記事本文

    <!--more_link-->　　　←「つづきを見る」とかいうアレ
    <p class="entry_more">
      <a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a>
    </p>
    <!--/more_link-->
    <!--more--><div id="more"><%topentry_more></div><!--/more-->

  </div>　← entry_bodyの終了タグです

  <ul class="entry_footer">　←記事のフッターです
    （略...投稿日とか、カテゴリーとか、記事の情報が入ります）
  </ul>

</div>　← contentの終了タグです

<!--/topentry-->

この↑ <div class="content"> 〜 </div> にあたる部分が「記事の表示部分」です。
クラス名はテンプレによって違うし、もしかしたら<div>じゃなくて <article> や <section> かもしれないけど。自分のブログの記事表示部分に該当する部分を見つけてください。

上記↑で見つけた「記事の表示部分」のブロックをコピーし、一覧ページ用に編集します。
タイトル部分や、一覧の表示部分を書き換えます。（書き方の例はこのすぐ後に）
ブログのデザイン的な部分を流用するために、こうするわけですよ。

できあがったソース全体を <!--category_area--> 〜 <!--/category_area--> で囲むと、このソースは「カテゴリ別画面」のみで表示されるようになります。

例としてこのブログの「一覧の表示部分」の HTMLを載せておきます。

<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ：「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
 <div class="ibox">
  <ul><!--topentry-->
  <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
  <!--/topentry--></ul> 
 </div>
</div>
</div>
<!--/category_area-->

タイトル部分は、「カテゴリ：「<%sub_title>」の記事一覧」としていますが、<%sub_title>以外は好きな文言に変えてください。<%sub_title>はブログサブタイトル（エントリータイトル、カテゴリ名、日付、検索ワードなど）を表示します。

6~8行目は、一覧のタイトルリスト部分です。これはすべての一覧ページで共通のソースです。
li要素を <!--topentry--> 〜 <!--/topentry--> で囲みます。これは、該当する記事やタイトルなどを繰り返し表示するブロックを作ります。WordPresのループみたいなもの。

li要素の中（7行目）の <%topentry_link> は記事のURLを、<%topentry_title> は記事のタイトルを書きだします。

【2】<%topentry>の上にソースを置く

FC2ブログ管理画面で、設定＞テンプレートの設定＞HTMLの編集スペースで、さきほどのソースを置きます。
さきほど見つけた「記事の表示部分」（テンプレート内で <!--topentry--> 〜 <!--/topentry--> で囲まれている大きなブロック）の上（前）か下にソースを置きます。
各ブログ記事の表示部分のすぐ外側に置くってコトです。

【3】<%topentry>部分を<!--not_category_area-->にする

先ほど見つけた <!--topentry--> 〜 <!--/topentry--> で囲まれているブログ記事表示の部分を、
<!--not_category_area--> 〜 <!--/not_category_area--> で囲みます。
<!--not_category_area--> 〜 <!--/not_category_area-->は、カテゴリ別画面で表示をさせない部分を指定します。
これを指定しとかないと、カテゴリ別一覧のページにも、該当する記事が表示されてしまいます。

<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ：「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
 <div class="ibox">
  <ul><!--topentry-->
  <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
  <!--/topentry--></ul> 
 </div>
</div>
</div>
<!--/category_area-->

<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->

【4】表示するタイトル数を設定する

最後に、一覧ページに表示するタイトルの数を設定します。
FC2ブログ管理画面の、設定＞環境設定＞ブログの設定＞記事の設定で「表示件数」をタイプして「更新」ボタンを押します。

これで、カテゴリ別一覧ページが表示されるようになりました。

応用：月別アーカイブ一覧を作る

応用で「月別アーカイブ一覧」も設定しましょう。先ほどのカテゴリ別一覧のソースをコピペしてちょっと書き換えればOKです。
月別アーカイブでは、ソースを <!--date_area--> 〜 <!--/date_area--> で囲みます。
そして、各ブログ記事の部分の外側は <!--not_date_area--> 〜 <!--not_date_area--> で囲みます。
タイトル部分もちょっと変えればOK。

先ほどのソースに「月別アーカイブ一覧」のソースを加えるとこうなります。

<!--category_area-->
<div class="content">
<h3 class="entry_header">カテゴリ：「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
 <div class="ibox">
  <ul><!--topentry-->
  <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
  <!--/topentry--></ul> 
 </div>
</div>
</div>
<!--/category_area-->

<!--date_area-->
<div class="content">
<h3 class="entry_header">月別アーカイブ：「<%sub_title>」の記事一覧</h3>
<div class="entry_body">
 <div class="ibox">
  <ul><!--topentry-->
  <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li>
  <!--/topentry--></ul> 
 </div>
</div>
</div>
<!--/date_area-->

<!--not_date_area-->
<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->
<!--/not_date_area-->

テンプレート全体の構造まとめ

というわけで、FC2ブログのテンプレートの「エリア（モード）変数」を使って、1つ作ればあとはコピペでいろいろ一覧ページを作れますね。
検索結果、タグ検索結果の一覧も作ったら、テンプレートの構造はこんなかんじになります。

<!--category_area-->
<div class="content">
カテゴリ一覧のソース
</div>
<!--/category_area-->

<!--date_area-->
<div class="content">
月別アーカイブ一覧のソース
</div>
<!--/date_area-->

<!--search_area-->
<div class="content">
検索結果一覧のソース
</div>
<!--/search_area-->

<!--tag_area-->
<div class="content">
タグ一覧のソース
</div>
<!--/tag_area-->

<!--not_tag_area-->
<!--not_search_area-->
<!--not_date_area-->
<!--not_category_area-->
<!--topentry-->
<div class="content">
ここに各記事用のソースがあります
</div>
<!--/topentry-->
<!--/not_category_area-->
<!--/not_date_area-->
<!--/not_search_area-->
<!--/not_tag_area-->