入口 > テンプレ - カスタマイズ > カテゴリ画面で同カテゴリの最新記事リスト(最大30件)を表示する

カテゴリ画面で同カテゴリの最新記事リスト(最大30件)を表示する

こちらでできませんとお答えしたのですが、別件で調べものをしてたら似たことができそうな記事を発見したので、軽くまとめてみました。(この あたりを参考にさせていただきました。)
ただ、私の知識が追いつかず、スタイルの面などで不自由な点が多いです。またそれを何とかしたいというご相談にも対応することは難しいと思います。予めご了承ください。
なお、RSSを存分に吐き出す設定にしなくてはなりませんので、隠れてブログをしたいという場合にはやらない方がいいカスタマイズだと思います(参考)。そのあたりもお含みおきください。
1.ブログ管理画面「環境設定の変更」→「ブログの設定」→「RSSの設定」で、「表示件数」をカテゴリ画面に表示させたい件数以上に設定しておく(タイトルとリンクだけでいいなら「全文」でも「一部」でも構わないと思います)。


2.テンプレHTMLのヘッダ部分(</head>の上など)に

<!--category_area-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://xxxxxx.blog.fc2.com/?xml&category=<%cno>");
feed.setNumEntries(30);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("li");
var a = document.createElement("a");
a.href = entry.link;
var date = new Date(entry.publishedDate);
a.appendChild(document.createTextNode(entry.title + "(" + date.toLocaleDateString() + ")" ));
div.appendChild(a);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

</script>
<!--/category_area-->

と入れ、赤字の数字を表示させたい件数(30以下)に、青字をブログIDに変更しておく。


3.テンプレHTMLの「■目次(カテゴリ別)ページ■_▼▼▼全て曰記風にするならここから削.除」から「■曰記(カテゴリ別)ページ終■」の間のお好きな位置一箇所

<ul id="feed"></ul>

と入れる。
  • ◎例えばこちらのカスタマイズをしておいて「サブカラムコンテンツ」のところに上記タグを入れれば、右カラムにそのカテゴリの記事タイトル一覧(最新30件まで)が表示される形になります。
  • ◎あるいは、「■目次(カテゴリ別)ページ■_▼▼▼全て曰記風にするならここから削.除」の数行下の「<h3><span class="h3"><%topentry_title></span></h3>」と「<div class="topentry_body">」の間に上記タグを入れ、手順2の赤字は4〜7ぐらいにしておいて、手順4のスタイル指定時に最下行に「#feed li:first-child { display: none; }」と付け足せば、目次記事の上部に目次記事自身を除いたそのカテゴリの新着記事数件が載るかたちになります。(作品数が多くなって、目次にいっぱい並んだリンクの中から新しいのを探してもらうのが大変になってきたら、かつ表示数とか表示順とか表示位置とかの関係でtopentryによる最新記事表示が難しければ、こういうのがあるとなかなか便利なんじゃないかと思います。うちではカスタマイズカテゴリで使ってみました。)
  • ◎特定のカテゴリでだけこれが欲しい場合については後述。



4.カテゴリ画面では

<ul id="feed"><li><a href="http://xxxxxx.blog.fc2.com/blog-entry-xx.html">記事タイトル(dd/mm/yyyy)</a></li><li><a hr……設定した数だけ繰り返し……/a></li></ul>

のように出力されるので、スタイルシート最下部で適当にスタイルを設定して(例えば以下など)

/*RSSFeed用*/
#feed { text-align:left; }
#feed li { display:block;margin-bottom:0.5em; }
#feed li:before { content:"● "; color: #ccc; }

出来上がり。



以上です。

日付が不要な場合は黄字部分を削除してください。
手順3でも少し書いていますが、記事リストの一番上だけを非表示にしたければスタイルシートの一番下に「#feed li:first-child { display: none; }」」と入れてください。二つ目、三つ目の記事を隠したいといったことも、これに加えて隣接セレクタとか使えば何とかなるかもしれません。
特定のカテゴリでだけこれが欲しい場合は、手順2で使うコードを

<!--category_area-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

var catno = "<%cno>";
if(catno==X)
{


google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://xxxxxx.blog.fc2.com/?xml&category=<%cno>");
feed.setNumEntries(30);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("li");
var a = document.createElement("a");
a.href = entry.link;
var date = new Date(entry.publishedDate);
a.appendChild(document.createTextNode(entry.title + "(" + date.toLocaleDateString() + ")" ));
div.appendChild(a);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);

}

</script>
<!--/category_area-->

のようにピンク背景部分2箇所(</script>の上の閉じカッコを忘れずに!)が加わった形にし、「X」を表示させたいカテゴリ番号に書き換えてください。そういったカテゴリが複数ある場合は「if(catno==X || catno==Y || catno=Z)」のように「||」で区切って必要数指定してください。
リスト冒頭の記号は手順4のスタイルシートで適当に変えてください。ハートとかドクロとか、ちょっとマイナーめな記号を使いたい場合は数値文字参照を使って記述する必要があるようです。個人的にこちらの「16進数値文字参照 変換スクリプト」がとても使いやすくて愛用させて頂いてます。
表示順を変えたいとか上記以外の特定の記事だけ隠したいとか日付だけ小さくしたいとか日付だけ色を変えたいとか日付の表示形式を変えたいとかいった場合はご自分で適宜改変をお願い致します。(私もトライはしたのですがうまくできませんでした。こうしたらできたよ! などありましたらぜひぜひご教授ください。)
2013-01-27