カテゴリの記事一覧を表示させる（FC2のみ）

07/04/07 17:30追記

　のんびり前進じたばた生活のまゆびさんが一覧表示の際に、日付が記事リンクの前に出るようにして見やすく改良してくれましたので、yozoも同様に変更いたしました。 まゆびさん、ありがとうございます♪m(_ _)m
まゆびさんの記事はコチラ→カテゴリ別の記事一覧を表示!! のんびり前進じたばた生活

　右サイドバーのカテゴリーをクリックすれば、カテゴリーの記事タイトルの一覧表示させるようにしました。これも月別に記事のタイトル一覧を表示させる（FC2）と同様にFC2ブログ ユーザーフォーラムで検索して、ヒントを得て、同じくテンプレート中で使える変数一覧を参考にして作成しました。

なお、月別のタイトルの一覧表示についてはコチラ→月別に記事のタイトル一覧を表示させる（FC2）

　訪問してくれた人が記事を探しやすいように、検索とほぼ同じくらいよく使われる、カテゴリ記事のタイトル一覧です。これで過去記事の検索がしやすくなって、過去記事で役に立つものがあるかどうか調べやすくなったと思います。また、yozoは１ページの表示件数を5記事としてますから、それにあわせて５記事ずつタイトルを表示することになります。

残念ながら、2006/10/10現在、１ページの表示件数と一覧のタイトル件数は、同じにするしかできません。（たぶん(ﾟｰﾟ;Aｱｾｱｾ ）悪しからずご了承ください。

※このカスタマイズはFC2ブログの独自タグを使ったものですから、FC2ブログの方だけにしか使用できません。

カテゴリの記事一覧を表示させる（FC2のみ）

1. FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
3. 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
4. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに<!--topentry-->と入力して、検索してください。
   
   • 必ずバックアップしましょう！

   
   　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
5. <!--topentry-->のすぐ上に、
   <!-- ▼カテゴリーページでの一覧ここから -->
   <!--category_area-->
   <div class="category_area">
   　?省略?
   </div>
   <!--/category_area-->
   <!-- /カテゴリーページでの一覧ここまで△ -->を追加してください。
   

   ?途中省略?

   
   <!-- 中央カラム開始 -->
   <div id="content">
   <div class="blog">
   <!-- ▼カテゴリーページでの一覧ここから -->
   <!--category_area-->
   <div class="category_area">
   <div class="textcenter"><span style="color:#ff3300; font-size:15px;"><%sub_title> の記事一覧</span></div>
   <ul>
   <!--topentry-->
   <li><%topentry_year>/<%topentry_month>/<%topentry_day>&nbsp;<a href="<%topentry_link>" title="<%topentry_title>へ"><%topentry_title></a></li>
   <!--/topentry-->
   </ul>
   <p class="content-nav">
   <!--prevpage--><a href="<%prevpage_url>" title="前のページへ" id="category_nav_previous" name="category_nav_previous">≪新しい記事一覧へ </a><!--/prevpage-->
   <a href="<%url>" title="メインへ" id="category_nav_main" name="category_nav_main">メイン</a>
   <!--nextpage--><a href="<%nextpage_url>" title="次のページへ" id="category_nav_next" name="category_nav_next"> 古い記事一覧へ≫</a><!--/nextpage-->
   </p></div>
   <!--/category_area-->
   <!-- /カテゴリーページでの一覧ここまで△ -->
   <!--topentry-->
   

   ?以下省略?

6. 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下に次のコード追加して、タイトル一覧の体裁を整えます。ここは自由に設定してください。
   
   • 必ずバックアップしましょう！

   
   　いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
   
   
   /* カテゴリ一覧表示部分 */
   .category_area {
   margin: 12px 10px 0px;
   padding: 15px;
   color: #444444;
   font-size: 11px;
   line-height: 140%;
   background: #ffeebf;
   border: 1px solid #666666;
   }
   /* 中央揃え */
   .textcenter
   {
   text-align:center;
   margin-top:5px;
   margin-bottom:5px;
   }
7. [更新]をクリックして動作を確認しましょう。

• yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m