ねっと雑貨屋さんでFC2ブログでのカテゴリーを利用した関連記事の表示の仕方を紹介されていましたが、「タグからでもできるよ」といったことをコメントで書き込みしたところ、「記事、期待してます」との返信をいただきましたので、以前私が運営していたブログからの転載をします。
複数のタグを細かく設定しておけば、カテゴリーから呼び出すよりも精度が高く、より大きな効果が得られると思います。
タグを使ってますか？
まず、この方法で関連エントリーを表示させるにはタグを使ってブログを管理していることが前提となります。
普段タグを使っていない人はすべての記事にタグを付け直すか、ねっと雑貨屋さんの方を参照してカテゴリーから関連記事を表示する方法を試してみてください(さすがにカテゴリーは使ってますよねｗ)。
関連エントリー表示用のHTMLを作成
インラインフレームで関連エントリーを呼び出すため、HTMLファイルを作成します。
FC2の管理ページ→「テンプレートの編集」から適当なテンプレートを複製して、その内容を全て消してから、テンプレートの名前を「kanren_tag」にしてHTMLには以下の通り記入。
CSSの方は各自、自分のブログにあったスタイルを適用してあげてください。
指定しないと、リンク青色下線あり、12pxとなります。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" href="<%css_link>" type="text/css" />
<title>関連記事</title>
</head>
<body>
<ul>
<!--topentry-->
<li><a target="_top" href="<%topentry_link>"><%topentry_title></li>
<!--/topentry-->
<div class="ad">
</div>
</ul>
<noscript><%ad></noscript><noscript><%ad2></noscript>
</body>
</html>
テンプレートができたら、次はブログで使ってる方のテンプレートのHTMLの任意の位置に以下のHTMLタグを入れます。
普通は(追記)の後ですね。
<iframe scrolling="no" frameborder="0" src="<%url>?q=<!--tag_list--><%topentry_tag_list_parsename>+<!--/tag_list-->& or&template=kanren_tag&page=1" width="450" height="130">
</iframe>
width(横幅)とheight(縦幅)はCSSで設定したフォントサイズにあわせて設定してください。
大きすぎると余白だらけに、小さすぎると関連記事全部がうまく表示されません。
最後に
この方法をブログで使っていただく際に、この記事を紹介していただけるとありがたいです。
紹介していただけるなら、以下のコードをお使いいただくと楽かもしれません。
<a href="http://toolog.net/web-design/fc2-similarposts.html" target="_blank">FC2ブログに関連エントリーを表示させる(タグから) | Toolog.net</a>
この方法についての質問や不具合などありましたら、コメントなどくださるとありがたいです。
直ちに対応させていただきます。
僕の場合はタグリストをGoogle Feed API使って表示させてます。
http://fromaffili.blog22.fc2.com/blog-entry-19.html
まぁ、一番の難題は上のページの追記部分を探すという部分なんですけどね。
Google Feed APIもいいですねー
WordPressを使っているから今はそれとは無縁なんですよねー
それに私がFC2使っていたころはそれがなかったのかもしれない…
なんか、わがまま言って書いてもらったみたいで恐縮です
本当にわざわざ記事にしていただいてありがとうございます
早速使ってみました
でもちょっと色だけうまくいかないですね…
リンク色とかはCSSとかになってくるので勉強しなきゃダメかなとかは思います
いえいえ、全然そんなことないですよ～
むしろ書き方が下手でそんな印象を与えてしまったなら謝ります＞＜
CSSですか?ねっと雑貨屋さんのCSSにあわせて作ってみましたよっ！
a:link,a:visited {
color:#446196;
text-decoration:underline;
}
a:hover {
color:#DD3333;
text-decoration:none;
}
body {
font-size: 13.12px;
color: #333333;
line-height:1.7;
padding: 0;
margin: 0;
text-align: left;
background-color: #ffffff;
font-family: Verdana,arial,sans-serif;
}
と…書いてみたが、今ねっと雑貨屋さん見に行ったらちゃんとできてた件orz
仕事速すぎです…ｗ
あと、記事ありがとうございました！お役に立てたようで嬉しいです。
わざわざ作ってもらって……
ありがとうございます！
kanren_tagでプレビューしたときは思い通りになるのですが、ブログで見るとリンク色が紺じゃなくて灰色になってる
ってな感じです
これはこれでいいかな、なんて思ってます
私の環境では他のリンク色と同じ色で良い感じですよ。(すでに直してあるのかもしれないけど…)
あと下がすこし切れてるのが気になります。
heightをもう少し大きくしてみては？
今見たら、直ってました
下切れてるの気づかなかった…←
色々とアドバイスありがとうございました
おお～これで完璧ですね。
恐らく色が変わってなかったのは、キャッシュのせいです。
ブログをデザインする際などに、プレビューするときはブラウザのキャッシュを削除してからプレビューするということを覚えておくと便利です。
これからも何でも聞いてください(なんでもは知らないわよ知ってることだけっ)
はじめまして。コード大変感謝します。(拙いですが)ブログにこのページの記事を載せさせていただきました。
一つ困ったことがあります。
Aという記事の関連記事にAも含まれてしまうのですが、これの対処の仕方ないですかね？
お使いいただきありがとうございます。
このコードの件ですが、ずいぶんと前に、それも昔のブログから引っ張ってきた記事なので時間のあるときに見させていただきます。
FC2は現在一切使っておりませんのであまり期待しないでください＞＜ｗ
私が死んでしまうまでが期限なので、気長～に期待してますね。
これからはちょくちょく覗かせてもらいますね。それでは