カテゴリページで記事リスト（タイトル一覧）を表示させる方法� �Templ8@FC2blog
FC2ブログテンプレートの無料配布とカスタマイズでSEO対策（検索エンジン最適化）
ホーム > templ8カスタマイズ > カテゴリページで記事リスト（タイトル一覧）を表示させる方法��
カテゴリページで記事リスト（タイトル一覧）を表示させる方法��
僕のカスタマイズしたテンプレートを使っていただいている方から、「カテゴリページを開くとそのカテゴリの記事タイトルリスト（タイトル一覧）が表示されるようにしたい」というご相談がありましたので、ああだこうだ試行錯誤を重ねましたところ何とかできましたので、ここで紹介したいと思います。このブログでも即採用しました。なかなかいいですよ。
カテゴリページというのはつまりこういうページです。
templ8カスタマイズ (?) ←クリックしてみてください。（新しいページが開きます。）
URLで言えば「http://templ8.blog55.fc2.com/blog-category-4.html」みたいなページで、プラグインによくあるカテゴリリンクをクリックすると開かれるページです。
このページにそのカテゴリのタイトルがずらっとリスト化されていたらブログを見てくれる方はすぐに見たいページを探せるし、とてもやさしいユーザビリティを考えたブログになるんじゃないでしょうか？
ではそのカスタマイズの仕方ですが、カテゴリページ以外にも月別アーカイブページ（/blog-date-200811.html）、検索ページ（/?q=templ8/）、タグページ（/?tag=templ8）でもタイトルリストを表示させる方法を紹介します。ひとつずつ別個ですので、必要に応じて取捨選択してカスタマイズしてみてください。
まずは基本のカテゴリページのタイトルリスト表示の方法からです。
1. 下記のソースをHTMLの「トラックバック表示」と「ページナビゲーション」の間にコピー＆ペーストする。
<!--▼▼ カテゴリーページ ▼▼-->
<!--category_area-->
<div class="ently_outline">
<h2 class="ently_title"><%sub_title></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/category_area-->
<!--▲▲ カテゴリーページ ▲▲-->
2. HTMLの「エントリー（記事）」の冒頭にある<!--topentry-->の前、もしくは1段上に<!--not_category_area-->を挿入する。（例：<!--not_category_area--><!--topentry-->）
3. HTMLの「エントリー（記事）」の一番最後にある<!--/topentry-->の後ろ、もしくは1段下に<!--/not_category_area-->を挿入する。（例：<!--/topentry--><!--/not_category_area-->）
これで完成です。
つづきまして月別アーカイブページ、検索ページ、タグページのタイトルリスト表示の方法です。挿入するソースは違いますのがやり方はカテゴリページと同じですので、上記の1. 2. 3. で挿入するソースだけ記述します。
■月別アーカイブページ
1.
<!--▼▼ 月別アーカイブページ ▼▼-->
<!--date_area-->
<div class="ently_outline">
<h2 class="ently_title"><%sub_title></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/date_area-->
<!--▲▲ 月別アーカイブページ ▲▲-->
2. <!--not_date_area-->
3. <!--/not_date_area-->
■検索ページ
1.
<!--▼▼ 検索ページ ▼▼-->
<!--search_area-->
<div class="ently_outline">
<h2 class="ently_title"><%search_word></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/search_area-->
<!--▲▲ 検索ページ ▲▲-->
2. <!--not_search_area-->
3. <!--/not_search_area-->
■タグページ
1.
<!--▼▼ タグページ ▼▼-->
<!--tag_area-->
<div class="ently_outline">
<h2 class="ently_title"><%tag_word></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/tag_area-->
<!--▲▲ タグページ ▲▲-->
2. <!--not_tag_area-->
3. <!--/not_tag_area-->
こんな感じです。もし4つとも自分のブログに採用する場合、「トラックバック表示」と「ページナビゲーション」の間は、
<!--▼▼ カテゴリーページ ▼▼--> 〜 <!--▲▲ カテゴリーページ ▲▲-->
<!--▼▼ 月別ーページ ▼▼--> 〜 <!--▲▲ 月別ページ ▲▲-->
<!--▼▼ 検索ページ ▼▼--> 〜 <!--▲▲ 検索ページ ▲▲-->
<!--▼▼ タグページ ▼▼--> 〜 <!--▲▲ タグページ ▲▲-->
のようにずらっとソースが記述されることになります。また<!--topentry-->の前、もしくは1段上は
<!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->
となりますし、<!--topentry-->の後ろ、もしくは1段後ろは<!--/not_category_area--><!--/not_date_area--><!--/not_search_area--><!--/not_tag_area-->
となっているはずです。
あともうひとつやることがありました。「環境設定の変更」の「ブログの設定」の「記事の設定」で、記事(月別)、記事(カテゴリ別)、記事(検索結果)、記事(タグ検索結果)の表示件数を大きな数字にしましょう。50でも99でもいいです。5件とかだと、リストページでも5件しか表示されないので、やはり全部表示させたいならここの数字を大きくしとくべきです。
いかがだったでしょうか？4つを一度に説明したのでだいぶ長くなってしまいました。しかしながら4つともいれる必要はない方も大勢いると思います。日付の表示されないホームページ風のブログを作っている人は月別アーカイブページなんていらないだろうし、ページ内検索のプラグインを採用していなければ検索ページはいらないし、タグを使ってなかったり記事下やプラグインに表示されなければタグページは必要ありません。ですので必要なものだけ使ってみてください。
うまくいかなったり何か質問があったらお気軽にどうぞ。
カテゴリページというのはつまりこういうページです。
templ8カスタマイズ (?) ←クリックしてみてください。（新しいページが開きます。）
URLで言えば「http://templ8.blog55.fc2.com/blog-category-4.html」みたいなページで、プラグインによくあるカテゴリリンクをクリックすると開かれるページです。
このページにそのカテゴリのタイトルがずらっとリスト化されていたらブログを見てくれる方はすぐに見たいページを探せるし、とてもやさしいユーザビリティを考えたブログになるんじゃないでしょうか？
ではそのカスタマイズの仕方ですが、カテゴリページ以外にも月別アーカイブページ（/blog-date-200811.html）、検索ページ（/?q=templ8/）、タグページ（/?tag=templ8）でもタイトルリストを表示させる方法を紹介します。ひとつずつ別個ですので、必要に応じて取捨選択してカスタマイズしてみてください。
まずは基本のカテゴリページのタイトルリスト表示の方法からです。
1. 下記のソースをHTMLの「トラックバック表示」と「ページナビゲーション」の間にコピー＆ペーストする。
<!--▼▼ カテゴリーページ ▼▼-->
<!--category_area-->
<div class="ently_outline">
<h2 class="ently_title"><%sub_title></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/category_area-->
<!--▲▲ カテゴリーページ ▲▲-->
2. HTMLの「エントリー（記事）」の冒頭にある<!--topentry-->の前、もしくは1段上に<!--not_category_area-->を挿入する。（例：<!--not_category_area--><!--topentry-->）
3. HTMLの「エントリー（記事）」の一番最後にある<!--/topentry-->の後ろ、もしくは1段下に<!--/not_category_area-->を挿入する。（例：<!--/topentry--><!--/not_category_area-->）
これで完成です。
つづきまして月別アーカイブページ、検索ページ、タグページのタイトルリスト表示の方法です。挿入するソースは違いますのがやり方はカテゴリページと同じですので、上記の1. 2. 3. で挿入するソースだけ記述します。
■月別アーカイブページ
1.
<!--▼▼ 月別アーカイブページ ▼▼-->
<!--date_area-->
<div class="ently_outline">
<h2 class="ently_title"><%sub_title></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/date_area-->
<!--▲▲ 月別アーカイブページ ▲▲-->
2. <!--not_date_area-->
3. <!--/not_date_area-->
■検索ページ
1.
<!--▼▼ 検索ページ ▼▼-->
<!--search_area-->
<div class="ently_outline">
<h2 class="ently_title"><%search_word></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/search_area-->
<!--▲▲ 検索ページ ▲▲-->
2. <!--not_search_area-->
3. <!--/not_search_area-->
■タグページ
1.
<!--▼▼ タグページ ▼▼-->
<!--tag_area-->
<div class="ently_outline">
<h2 class="ently_title"><%tag_word></h2>
<div class="ently_body">
<div class="ently_text">
<ul><!--topentry-->
<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>"><%topentry_title></a></li>
<!--/topentry--></ul>
</div><!--/ently_text-->
</div><!--/ently_body-->
</div><!--/ently_outline-->
<!--/tag_area-->
<!--▲▲ タグページ ▲▲-->
2. <!--not_tag_area-->
3. <!--/not_tag_area-->
こんな感じです。もし4つとも自分のブログに採用する場合、「トラックバック表示」と「ページナビゲーション」の間は、
<!--▼▼ カテゴリーページ ▼▼--> 〜 <!--▲▲ カテゴリーページ ▲▲-->
<!--▼▼ 月別ーページ ▼▼--> 〜 <!--▲▲ 月別ページ ▲▲-->
<!--▼▼ 検索ページ ▼▼--> 〜 <!--▲▲ 検索ページ ▲▲-->
<!--▼▼ タグページ ▼▼--> 〜 <!--▲▲ タグページ ▲▲-->
のようにずらっとソースが記述されることになります。また<!--topentry-->の前、もしくは1段上は
<!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->
となりますし、<!--topentry-->の後ろ、もしくは1段後ろは<!--/not_category_area--><!--/not_date_area--><!--/not_search_area--><!--/not_tag_area-->
となっているはずです。
あともうひとつやることがありました。「環境設定の変更」の「ブログの設定」の「記事の設定」で、記事(月別)、記事(カテゴリ別)、記事(検索結果)、記事(タグ検索結果)の表示件数を大きな数字にしましょう。50でも99でもいいです。5件とかだと、リストページでも5件しか表示されないので、やはり全部表示させたいならここの数字を大きくしとくべきです。
いかがだったでしょうか？4つを一度に説明したのでだいぶ長くなってしまいました。しかしながら4つともいれる必要はない方も大勢いると思います。日付の表示されないホームページ風のブログを作っている人は月別アーカイブページなんていらないだろうし、ページ内検索のプラグインを採用していなければ検索ページはいらないし、タグを使ってなかったり記事下やプラグインに表示されなければタグページは必要ありません。ですので必要なものだけ使ってみてください。
うまくいかなったり何か質問があったらお気軽にどうぞ。
2008/11/20 20:16
templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。
templ8カスタムテンプレ
|
|
|
|
|
|
3カラム以外にも2カラム（右、左）、変則3カラムがあります。
スポンサード リンク
最新記事
スポンサード リンク
プロフィール
Author:templ8
テンプレートをカスタマイズしてます。何か解からないことがあれば何でも聞いてください。
検索フォーム
カウンター
ブログランキング
RSSリンクの表示
copyright © 2006 Templ8@FC2blog all rights reserved.
Customized by GUIDING-STAR Template by FC2ブログのテンプレート工房
FC2ブログ 紹介予定派遣
Customized by GUIDING-STAR Template by FC2ブログのテンプレート工房
FC2ブログ 紹介予定派遣