花鳥風月: bloggerブログに関連した記事を見れるようにするには～やったことまとめ

2012年4月17日火曜日

bloggerブログに関連した記事を見れるようにするには～やったことまとめ

今まではブログを読んでもらっても関連した記事を探せなかったのですが、関連記事が表示されるようにしました。
やったことを忘れないためにも紹介します。

Googleのブログサービス”blogger”はシンプルなデザインゆえに愛用者も多いのですが、機能も少ないのがたまにキズです。
残念ながら現在のところ関連記事の表示は初期設定のままではできません。
さて、表示方法はいくつかあるのですが、
Blogger で「関連記事」リストを表示する 2 つの方法｜クリボウの Blogger Tips
使用テンプレートによっては上手くいかない場合もあるようです。
私も試行錯誤した結果、この方法で表示させました。
①Blogger で関連記事を表示するウィジェット - Smarter Related Posts Widget for Google Blogger - v2.0｜Happy-Go-Lucky
②LinkWithinをBlogger,WordPress,アメブロなどのブログに見出し付きで導入する方法 | 某氏のたわごと NEXT

①Smarter Related Posts Widget for Google Blogger - v2.0を使って関連記事を表示させる。

●上記ページの中の ”easy setup wizard”を開く。こちらをクリック。
”Blog　URL”欄にブログのURLを入力します。

●各種パラメータを編集します。
主にいじるのはこの辺ではないでしょうか。
[Mode]：関連記事を表示させるか、最近の記事を表示させるか、同ラベルを表示させるか。
[Max Posts]：表示記事数
[Show Titles?]：タイトルを表示するかどうか。
[Show Thumbs?]：サムネイルを表示させるかどうか。”NO”を選ぶとサムネイルを表示させません。
[Thumb Size]：サムネイルのサイズを変更できます。デフォルトは72×72ピクセルです。数字を変えるとサムネイルのサイズの変更を出来ます。

●”Update Demo & Code”をクリックし、”Add to Blogger”をクリック。

レイアウト画面に「HTML/JavaScript」が表示されるので、表示させたい個所に移動させればOK。
知識がある人は、コードをHTMLに組み込んでもOK。
こんな風に表示させています。

②LinkWithinを使って関連記事を表示させる。

●まず上記ページLinkWithin - Related Posts with Thumbnailsに移動する。

必要項目を入力する。
[Email]：メールアドレス
[Blog　Link]：ブログURL
[Platform]：Blogger WordPress Typepad Otherから選択する。Bloggerを選択した場合、レイアウト設定画面でウィジェットとして配置されます。任意の場所に挿入するときはOtherを選択する。
[Width]：項目数を選択する。後からの変更は不可能なので、変更したい場合はやり直し。ただし、コードの書き換えは不要。
[My blog has light text on a dark background]：ブログの背景色が暗く、文字を明るい色にしている場合はチェックする。
Get Widget!をクリック。
今回は[Platform]：Otherを選択し、記事の下部に表示させました。

●コードをHTMLに張り付ける。
Blogger管理画面で”レイアウト”→”HTMLの編集”→”ウィジェットテンプレートを展開”をクリック。
ブラウザの検索機能（Ctrl＋F）で<div class='post-footer'>を探し、
直前に表示されたLinkwithinのコードを挿入する。