FC2ブログで個別記事にカテゴリー記事一覧
2007年10月16日13:20
ご質問があったので、FC2ブログでも「個別記事に、カテゴリー記事一覧を表示する」をやってみました。
参考記事:livedoorBlogでカテゴリー別記事の表示に成功

とりあえず、カテゴリー別ページを自作します。

作ったページサンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="euc-jp" />
<title>タイトル</title>
<style type="text/css">
<!--
body {
width:360px;
font-size: 80%;
line-height:1.5;
}
ul {
margin:0;
padding:0;
}
ul li {
list-style-position: outside;
list-style-type: none;
margin:0;
padding:0;
}
li a{
width:330px;
margin: 0;
padding: 0 0 0 20px;
background-image: url(list-link.gif);
background-position: 0px 2px;
background-repeat: no-repeat;
text-decoration:none;
display: block;
}
li a:hover{
width:330px;
margin: 0;
padding: 0 0 0 20px;
background-image: url(list-hover.gif);
background-position: 0px 2px;
background-repeat: no-repeat;
text-decoration:underline;
}
-->
</style>

</head>
<body>
<ul>
<li><a href="http://○○○.blog△△△.fc2.com/blog-entry-6.html" target="_parent">サンプル1</a></li>
<li><a href="http://○○○.blog△△△.fc2.com/blog-entry-2.html" target="_parent">サンプル2</a></li>
</ul>
</body>
</html>


サンプル1、サンプル2が記事タイトル。
それぞれに対応したアドレスを「http://○○○.blog△△△.fc2.com/blog-entry-6.html」の部分に入れます。
適当な名前をつけて、.htmlと拡張子をつけて、文字コード「euc-jp」で保存。
これをレンタルサーバーにアップロードします。
私の場合、fc2.html と custom.html を準備して、アップロードしました。
画像も忘れずにアップロード

画像「list-link.gif」


画像「list-hover.gif」



次に、JavaScriptファイルを準備します。

内容はこんな感じ。ぐちゃぐちゃなJavaScriptです(笑)。

if (category == "FC2ブログ"){document.write("<div class='box'><iframe frameborder='0' src='http://アップロードしたサイトのアドレス/fc2.html' width='400' height='190' marginheight='0' marginwidth='10'></iframe></div>")}
if (category == "カスタマイズ"){document.write("<div class='box'><iframe frameborder='0' src='http://アップロードしたサイトのアドレス/custom.html' width='400' height='190' marginheight='0' marginwidth='10'></iframe></div>")}


FC2ブログ、カスタマイズの部分が、自分のFC2ブログに実際あるカテゴリー名です。
カテゴリー名に対応して作ったカテゴリー一覧ページのアドレスをsrcの部分に入力します。

作った文字列を「iframes.js」という名前で「euc-jp」で保存し、アップロード。
この時、保存した「iframes.js」を一旦閉じて、もう一度テキストエディタで開いてみます。
文字化けしていると作動しません。



続いて、テンプレートを編集。

<!--/more-->
</div>
この部分のしたあたりに下記のように太字部分を追加。

<!--more-->
<div class="entry_more"><%topentry_more><br clear="all"></div>
<!--/more-->
</div>

<!--permanent_area-->
<center>
カテゴリー「<%topentry_category>」内の記事
<script type="text/javascript">
<!--
var category = "<%topentry_category>";
//-->
</script>
<script src="http://sitemap.afiliate.jp/fc2/iframes.js" type="text/javascript"></script>
</center>
<!--/permanent_area-->


FC2ブログでは<%topentry_category>でカテゴリーを取得できます。
ひとつの記事に、カテゴリーはひとつしか設定できないみたいなので、変数名は「category」としました。


スタイルシートの一番下に下記のものを入れ込みました。
.box {
padding:0;
margin:0;
border:solid 1px #999999;
width:400px;
}


以上が終わったら、「更新」を押します。

テストで作ったFC2ブログがこちら。

http://fc2mania.blog122.fc2.com/

個別記事を見ると、そのカテゴリーの記事が下の方に表示されます。


しかし、このカスタマイズ、自分でいうのも変ですが、
めちゃくちゃ大変なのでやらないで下さい(^^;


JavaScriptで条件分岐して、カテゴリー別ページのRSSを読み込んで、タイトルだけをキャッシュしておいたものを表示する方が、たぶん簡単です。

やり方はわかりませんが(笑)。



この記事へのコメント
あい
はい!
やりませんwww

FC2は変数多くてSEOとりやすいって
SEOに詳しい人が以前に言っていました。

その時の私にはさっぱり意味がわかりませんでしたが
今もほとんどわかりませんw(笑ってる場合ではないですがw)

FC2ブログで独自ドメインが使えるようになったら
最強とも言ってましたよw

でも、まぁ、ブログは更新してなんぼだと思ってる私には
関係ないですがwww

afiliate
どおも〜あいさま。
聞き分けが良くてお利口さんです(笑)。

「変数多くてSEOとりやすい」の意味は私、全くわかりませんがw、FC2は今はやっぱり強いですね。利用者の声が良く反映されているというか何と言うか、細かいところに配慮が行き届いています。
デフォルトでGoogleサイトマップがあるのと、カテゴリー別RSS配信を行っているところが特にセンスが良いなと思います。
確かに独自ドメインがあれば最強かもですね。1つのIDで複数ブログ対応してくれれば言うことなしかな。

ブログは更新してなんぼ、おっしゃるとおりです。
FC2ブログ、1ヶ月放置してるとオーバーチュアが表示されて優しく更新を促してくれるそうですね。1ヶ月たってから、というところがセンスが良いなあと思います。