FC2ブログでカテゴリの記事一覧を表示する方法

せっかく作ったブログなので来てくれた人にできるだけ長く滞在してもらいたいものです。

では、どのようにすればよいのか?方法はいろいろあると思いますが、分かりやすいサイト構造で求めているコンテンツが見つけ易かったりすれば滞在時間も長くなるはずです。

ここではカテゴリページに記事一覧を表示する方法を紹介します。目次のようになって見やすいと思います

<!--topentry-->の中にならないように下のタグを挿入すれば表示されます。メインコンテンツが入るボックス内の上の方がいいのかなと思います。

<!--category_area-->
  <div class="free_category">
    <p>カテゴリ:<%sub_title> の記事一覧</p>
    <ul>
      <!--topentry-->
        <li><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></li> 
      <!--/topentry-->
    </ul> 
    <p class="content-nav" align="center">
      <!--prevpage-->
        <a href="<%prevpage_url>" title="前のページへ">≪新しい記事一覧へ </a>
      <!--/prevpage-->
        | |
      <!--nextpage-->
        <a href="<%nextpage_url>" title="次のページへ"> 古い記事一覧へ≫</a>
      <!--/nextpage-->
    </p>
  </div>
<!--/category_area-->

表示される記事数はコードでは操作できませんので、環境設定で変更する必要があります。

一番上にそのカテゴリに属する記事一覧が表示されます。タイトルを囲むPタグとリストタグにはスタイルシートを利用しています。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
「記事一覧表示」で検索しましたが、こちらのサイトが一番分かりやすかったです。どうもありがとうございました。
【2009/05/04 21:34】 | ねりま99 #bUOqhcfc | [edit]
☆初めまして☆
カテゴリの一覧表示はできないものかと常日頃から思っていたところ、
今日こちらに辿り着くことができました!!
早速タグを挿入し、一覧表示されたのを見て、
ものすごく感激感動しましたo(≧∀≦o)(o≧∀≦)o!!!!
本当に嬉しいです!!ありがとうございます(pд<。)。゜。

ちなみになのですが、記事検索フォームの結果も
同じく一覧表示できる方法はありますでしょうか???
もしありましたら、ぜひぜひ教わりたいです(*´・ω・`)ゞ
【2009/11/02 23:02】 | yun #NetAmKeg | [edit]
はじめまして。

私は検索にGoogleのものを使っているので試したこともないですが

<!--search_area--> ~ <!--/search_area-->

内に記述すると一覧表示できると思います。

知っていたらごめんなさいですがFC2ブログのカスタマイズは
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html
を見ると便利だと思います。
【2009/11/04 05:54】 | 管理人 #E2ywrYdA | [edit]
お返事ありがとうございます!!
一覧表示できましたヽ(≧▽≦ヽ)(ノ≧▽≦)ノ

私もGoogleの検索を使っていたのですが、
こちらで知ることができたカテゴリ一覧表示の方法での、
一覧表示がとても気に入りましたので、
早速、検索結果も同じ形にさせて頂きました♪
本当に嬉しいです!ありがとうございます☆

FC2のカスタマイズのページ、知りませんでした(*´`*)ゞ
教えて頂きありがとうございます☆
【2009/11/04 11:03】 | yun #NetAmKeg | [edit]
このコメントは管理人のみ閲覧できます
【2010/01/10 21:14】 | - # | [edit]
1ページに1記事の表示ページ上部にカテゴリ別一覧を表示する事は可能でしょうか?

ということですがこのブログの記事の下にあるカテゴリ一覧ような感じでしょうか?
それでしたらGoogle AJAX Feed APIを使用しています。
【2010/01/18 23:39】 | 管理人 #E2ywrYdA | [edit]
参考になりました。
ありがとうございます。
【2010/04/29 10:19】 | - #- | [edit]
このコメントは管理人のみ閲覧できます
【2010/10/03 09:26】 | - # | [edit]
このコメントは管理人のみ閲覧できます
【2010/10/03 22:15】 | - # | [edit]
カテゴリー別の目次を表示させたくてこちらにたどり着きました。
参考にさせていただきます。
現在5件分のリスト表示になっていますが、
表示件数をもっと増やすにはどうしたらいいでしょうか。
もしくは、全件数表示するには?

教えてください。
【2011/06/15 21:39】 | geneonni #F04RIMms | [edit]
おはようございます。

表示件数はコードで変更するのではなく
ブログの設定で変更します。

環境設定の変更 ⇒ ブログの設定 ⇒ 記事の設定 と進むと
「記事(カテゴリ別)」というところがありますので、
そこで表示記事数の変更を行います。

ちなみに最大30件となります。
【2011/06/16 08:17】 | 管理人 #E2ywrYdA | [edit]
カテゴリ別に表示することはできたのですが、
そのとき下の方にカテゴリ別になってない記事が出てしまいます。
これを消すにはどうすればいいんでしょうか?
よろしくお願いします。
【2011/07/06 02:15】 | sirotakok #- | [edit]
カテゴリ表示でここに辿り着いた者です。

この方法は今見ている記事のカテゴリーの記事一覧表示で合ってますよね?

自分が探してるのは今見ている記事ではないカテゴリーの記事一覧表示というものなのですが少しいじれば出来ますでしょうか?

いきなりで失礼ではございますが宜しくお願い致します。
【2011/07/12 23:22】 | cider #- | [edit]
はじめまして。

カテゴリーのページに記事一覧を表示するページですので、
個別記事にカテゴリーの記事一覧を表示する方法ではありません。

仰られる方法でしたら、FC2ブログの変数だけでは
対応できないかもしれません。
【2011/07/19 08:13】 | 管理人 #E2ywrYdA | [edit]
はじめまして!
カテゴリ別に記事を一覧表示にできる方法を探していたら、こちらのサイトにたどりつきました。
早速行ってみたところ、簡単にできました!
ありがとうございます!

ただ、1つだけ気になることがあります。
表示される記事の題名が左端にピッタリ寄ってしまいます。
これは直す方法があるのでしょうか?
【2011/08/13 19:09】 | YU #- | [edit]
YUさん、はじめまして

全体が
<div class="free_category">
に入っていますので、スタイルシートで
余白を指定するといいと思います。

.free_category {
padding:20px
}

って感じですね。
【2011/08/13 22:53】 | 管理人 #E2ywrYdA | [edit]
できました!すごい!

とても見やすくなりました。

ありがとうございます!
【2011/08/14 17:20】 | YU #- | [edit]
うまくいってよかったです。

また、お立ち寄りくださいね。
【2011/08/14 19:20】 | 管理人 #O66mkpt. | [edit]
カテゴリのクリックするとカテゴリの記事一覧が表示されるようにはなったのですが、その一覧の下に記事が表示されてしまいます。
不格好なので記事一覧のみをひょうじさせたいのですがどのようにすればいいですか?
【2011/12/28 13:13】 | YUI #- | [edit]
テンプレートによって方法は変わってくると思いますが
以下のページを参考にして、カテゴリのページに記事を
しないようにすることは可能だと思います。

http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html
【2012/01/04 08:02】 | 管理人 #E2ywrYdA | [edit]
こんにちは!
早速使わせていただきたいと思います。

うまく表示できたのですが、この部分だけ文字が大きくなってしまいます。
色や大きさを変える方法を教えてもらえますか。

初歩的な質問で申し訳ありません。
【2012/04/16 22:04】 | jj #SFo5/nok | [edit]
jjさん

お役に立ててよかったです。
サイトを見ていないので何とも言えませんが、

.free_category {
font-size:12px;
}

という風に指定してあげると、フォントの大きさは
自由に変えられると思います。
【2012/04/16 22:55】 | 管理人 #E2ywrYdA | [edit]
お返事ありがとうございます!
私はFC2でサイトを作っているのですが、
.free_category {
font-size:12px;
}
をどの部分に挿入したらいいか教えて頂けますか?
ほんと、初心者すぎで申し訳ありません、、、、、
【2012/04/17 23:20】 | jj #- | [edit]
jjさん

テンプレートの編集で
スタイルシートのところに追加してあげるといいと思いますよ~。
【2012/04/18 20:35】 | 管理人 #E2ywrYdA | [edit]
すごい!できました!ありがとうございます^^
【2012/04/18 23:48】 | jj #- | [edit]
jjさん

うまくいってよかったです~
【2012/04/19 07:26】 | 管理人 #E2ywrYdA | [edit]
はじめまして

お騒がせます

全くの初心者の私で申し訳ないのですが質問させていただいてもよろしいでしょうか

まず、"<!--topentry-->の上に下のタグを挿入するだけです。"
とあるのですがどこの<!--topentry-->の上に挿入すればよいのでしょうか?

あと、top画面に新着順の記事覧をつくりたいのですが、管理人さんのようにタイトルを囲ったりリストタグをつけたいのですが、スタイルシートをどのように使えばそのようなことができるのでしょうか?


ずっと調べているのですが頭が乏しいもので見つかりません...

いきなり質問ばかりしてご迷惑とは思いますがお力をおかりしてもよろしいでしょうか

【2012/05/02 15:36】 | panda #- | [edit]
pandaさん、はじめまして

"<!--topentry-->の上に下のタグを挿入するだけです。"
というのは、<!--topentry-->内に設置すると表示されないという
意味で書いたものです。

テンプレートによって挿入すべき位置も違うと思いますので
<!--topentry-->内にならないように気をつけて色々試してみればいいと思います。



2つ目のご質問については

 ・サイドバーのリンクをdisplay:blockにしてみた
  http://weboook.blog22.fc2.com/blog-entry-105.html

 ・リストに1pxのラインを追加するだけで、印象がぐっとよくなる
  http://weboook.blog22.fc2.com/blog-entry-310.html

あたりが参考になるかもしれません。


説明べたですいません。。
私も欧州サッカー大好きですのでぜひがんばってください。
【2012/05/03 05:26】 | 管理人 #E2ywrYdA | [edit]
ありがとうございます!!!!

おかげさまで一つ目の質問は無事、解決することができました!
ありがとうございます

2つ目の質問のことなんですが、私が想像してた装飾のしかたにピッタリあいました!
でも、”・リストに1pxのラインを追加するだけで、印象がぐっとよくなる”
で書かれていたリンクを貼る方法ですが、どのようにして、新着記事をリンクできるようにするのでしょうか

初歩的な質問でお手間をとらしてすいません
【2012/05/03 23:26】 | panda #- | [edit]
すいません追記です

スタイルシート編集の一番下にスタイルシート用の値をペーストすれば変わるのでしょうか?


カイテゴリーの記事一覧を装飾しようと思ったさい、なにも変化がなかったのですが、、、、

またまた初歩的な質問ですいません
【2012/05/03 23:42】 | panda #- | [edit]
いつもお世話になります。

最新記事の一覧についてはこれで大丈夫だと思います。

<ul>
<li>
<!--recent-->
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
<!--/recent-->
</li>
</ul>

FC2ブログの変数については次のページで確認することをおすすめします。
http://fc2blogmanual.blog60.fc2.com/blog-entry-160.html


追記のほうは、
スタイルシート編集のどこに入れても大丈夫です。
変わらないのであれば、セレクタの指定方法等が間違えていると思います。


この種のご質問に回答するようになるとキリがありませんの
これ以上のご質問はご容赦いただければと思います。
インターネット上にはブログやホームページ作成に関する情報は
山ほどありますのできっとご自分で解決できると思います。

趣味の海外サッカーのブログということで
今後も期待していますのでがんばってくださいね!
【2012/05/04 06:54】 | 管理人 #E2ywrYdA | [edit]
はじめまして。(長文ぎみ)

FC2ブログカスタマイズでつまづくことがあり、検索でこちらに辿りつきました。
とても勉強されているんですねー、
分かりやすいサイトですばらしいなと思います。

何かヒントでもわかれば教えていただきたいのですが、
【ブログのトップページにカテゴリ別の新着情報一覧を表示したい】
と考えています。

かなりカスタマイズを加え、
トップページはブログのようではなく
webサイトのトップのようになっていて
<!--not_index_area-->で区切ってブログは生きています。
他、固定ページがいくつかあります。


ブログ内にカテゴリが二つあり
『ニュース』と『イベント告知』、その他があります。

トップページに
ブログ全体での新着記事一覧、ではなく
『ニュース』だけの新着一覧、
『イベント告知』だけの新着一覧を
別々のリストで表示したいです。

何か方法はありますでしょうか?

ここで紹介されているアイデアを応用しようと思いましたが、
カテゴリページであることが前提ですよね?

他、APIkeyを使う方法も参照しましたが、
keyの取得がすんなりとはできず、固まってしまいました。。。
APIを使わずカテゴリ別rssフィードを読み取って表示させる?
なんてことは無理でしょうか?


どんな小さなこと、関連なさそうなことでも構いません。
教えていただけますと大変助かります。

よろしくお願いいたします。
【2012/09/13 00:00】 | kami #WvluZl6. | [edit]
kamiさん

はじめまして。
コメントありがとうございます。

ご質問の件ですが以前記事にした
「Google AJAX Feed APIでRSSフィードを表示」
http://weboook.blog22.fc2.com/blog-entry-35.html

の方法が一番いいかなと思います。

カテゴリごとのフィードは「カテゴリの編集」で
確認できます。

こんな感じのアドレスになります。
http://weboook.blog22.fc2.com/?xml&category=2

お役に立つかどうか分かりませんが
私ならこの方法をとると思います。
【2012/09/13 15:31】 | 管理人 #E2ywrYdA | [edit]
管理人さま

上記のトラブル、無事に解決しました!

Google AJAX Feed APIで、見事表示!
(表示までの道のりは長かったですが・・・)
表示内容のカスタマイズも成功し、
思い描いていた通りのページができました★

検索しまくって疲れ果てた先に
こちらのサイトがあり、
随分前の記事へのコメント・・

すぐにお返事をいただけると思っていなかっただけに
解決したこと以前に、真摯な対応をしていただけたことに
感動しています。。
本当に助かりました。

ありがとうございました。

【2012/09/14 00:00】 | kami #WvluZl6. | [edit]
kamiさん

すごい困っている様子が伝わりましたので
何かお役に立てればと思いお返事させていただきました。
うまくいって本当によかったです。

ぜひまたお立ち寄りください!
【2012/09/14 05:00】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加