bloggerの関連記事表示にRelated Posts Widgetを使ってみた

bloggerでの関連記事表示に結構手こずったので参考までに表示までの経緯を書いておく。
最終的にはタイトルの通り、Related Posts Widgetを使う事にした。

他の関連記事表示方法について

関連記事の表示方法については、ググればそれなりに情報が出てくる。けど、古い情報も多い。
有名なサイトは多分ここ。
クリボウの Blogger Tips: Blogger で「関連記事」リストを表示する 2 つの方法

ただ、俺が何か間違えていたのかもしれないが、１つ目の方法をやってもテンプレート保存時にエラー出ちゃうし、2つ目のやつは、ここの記事のやつは情報が古くて、多分新しいやつはこっち。
適当えんじにあ( ´д｀): Blogger 記事内に「関連のブログ記事」を挿入するには 2011年版

ここで説明されているやつが、多分新しいバージョンの説明。
こっちは一応表示されたんだけど、トップページとかだと外部へのリンクが表示されるし（bloggerのオリジナルタグで回避は可能だが）、一回表示させて、いくつかのページを見たところ、同じ２つの記事しか表示されず、そのうち増えるのかなんだか知らないが不安だったので辞めた。

そして、
Google Bloggerで使える関連記事ウィジェット５種のまとめ » Google BloggerブログHacks Tips Tweaks
ここで、5つ紹介されているんだが、1つ目は昔のバージョンを使っているとの事で、他は既に試した2つと、日本語が使えないやつと、Linkwithin。
Linkwithinは、前に使った事があるのだが、あまり性能が良いとは思えなかったので出来れば別のが良かった。

Related Posts Widgetを偶然発見

「ん～」と少し途方に暮れたが、この記事の『個別の使用感・感想』で紹介されている
Related Posts Widget for Blogger / Blogspot | Best Blog Widgets For Free
ここに行ってみた。
全部英語だよ、、と面食らうも、ちょっと下に行くとコードが書いてある。
少し頑張って英語を読んでみる。

お、めっちゃ分かりやすく書いてあんじゃん！ｗ
って事で、このRelated Posts Wodgetってやつで関連記事の表示をする事に決定！
英語だけど、説明書きは俺でも分かるｗ

1. レイアウトからhtmlの編集へ（実際にはテンプレートから”htmlの編集”へ）
2. 編集する前にテンプレートのバックアップを取っておこう（俺はせずに突っ込む）
3. 『ウィジェットのテンプレートを展開』のボックスにチェックを入れる
4. </head>タグを見つける
5. 以下のコードを</head>タグの前に貼りつける（コードは省略）
6. 次に<data:post.body/>タグを見つける。テンプレートによっては、<div class='post-body>とか、<data:post.body/>かもしれない。（２つ目の『’』は書き忘れか？）
7. 以下のコードをそのタグの下に貼りつける（コードは省略）
8. テンプレートを保存して完了

一応簡単に意訳してみた。
その通りにやると若干賑やかな関連記事が表示される。
あとは、貼りつけたコードを好きなようにいじって表示とかを変える。表示位置に付いては、7で貼りつけるコードの位置を変更する事で移動可能。
移動したい時は、上で紹介した別の関連記事表示の解説とかを読むと、どこに貼ればどこに表示される、とかちょっとは分かるかも。

関連記事表示のカスタマイズ方法

例えば、7で貼りつけたコードの中の『Related Posts : 』を『関連記事』に書き換えればそういう風に表示が変わる。
公式のブログのカスタマイズで紹介されているのは記事の表示数の変更方法。
7で貼りつけたコードの中の『5』と言う数字を書き換えれば、ラベル毎にその数だけ表示が可能になる。ただし、必ずその数表示される訳ではなく、規則性は不明だがラベルの数によって表示の数は変わる様子。
他には、俺の場合は、5で貼りつけたコードのスタイルシートを消したり加えたりして表示を変更した。一番邪魔だと思われる（？）リスト項目の先頭に付いてるRSSのマークは

background : 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3x1ZPAwYm5UTlxCLPZhHxr0ExZ7_Apk3vDAuHKj7aF31wgHzCrvmSMYmgwekZquwjsOOKyF8sqB_LLtbkF0UUDdQduX2lUZ6eFBwRgD4ft_KMkpbPTLzJvsm3-zm8QfvFcHpUGgyh_Q/") 
no-repeat 0 0;

を消せば消える。

って言うか、良く見ると5で貼りつけたコードはほとんどスタイルシートの記述なんだな。スタイルシートと、スクリプトの読み込みだけか。スタイルシートの部分は極端な話全部消しても良いかも。
俺は全部は消してないけど。

最後に

とまあ、そんな感じでした。
bloggerでの関連記事の表示方法を探している場合は試してみると良いと思います。
このブログは関連記事の表示数に関しては初期設定のままで使って見ているので、ラベルが多い記事はたくさん関連記事が表示されます。少し減らすかな。

追記

現在ラベル毎の表示数は3。だけど、表示個数についてはラベルの個数と比例している訳でもなく、関係性がイマイチ掴めず。。
表示の仕組みがイマイチ分からないし、表示数もラベル毎に設定表示数限界まで、ってわけでもなく、詳しい事は英語のホームページをもうちょっと読むか、コードを読まないと分からん。俺にはその気力は無いｗ

でも、とりあえずラベル一致してる記事は関連記事として表示されるし、一応動いてるんじゃないかな、と言う感じです。
表示中の記事も関連記事として表示されちゃうけど、とりあえずこれで良いや、と言う感じです。
無事に関連記事表示出来て良かった良かったｗ

さらに追記

こんなのも見つけた。
Happy-Go-Lucky: Blogger で 関連記事を表示するウィジェット - Smarter Related Posts Widget for Google Blogger - v2.0

Blogger ユーザ限定になってしまいますが、

てのが良く分からず、少し気になるが、こういう方法もあるようです、って事で一応紹介。モバイルとかは俺全然気にしてなかったな。。

更に更に追記

現在はzenbackも使ってみてます。割と有名だと思うけど、自分のブログの関連記事とか、他のブログとかの関連記事とか表示されます。
自分のブログ以外の記事が表示されるのを消せない、ってのが面倒だが、逆に他人のブログの関連リンクに載る可能性もあるって事で、一応表示させてみてます。
とりあえず様子見。

最後まで読んで下さって
ありがとうございます！
+1してぐぐたすで紹介してくれると泣いて喜びますｗ

Tweet