Blogger:関連記事一覧を自動的に表示させる方法

ラベル名をもとに現在見ている関連記事一覧を表示させるJavaScriptをみつけて格闘していたのですがどうしてもうまくいかずそれは断念しました。検索してみるともっと簡単にいける方法がありました。

テンプレートのHTMLをいじらずに簡単設置。でもオプションがいっぱい。

Smarter Related Posts Widget for Google Blogger - v2.0のRelated Posts Widget for Google Blogger v2.0 - Setupから設定を行います。

左上のOptionの枠を埋めていきます。

Blog URL　ブログのURLを入れます。http://p--q.blogspot.jp/。


ラベルが同じ記事一覧だけでなく、最近の記事一覧や特定のラベルの記事の一覧の表示も選べます。

ラベルがついていない記事を表示させているときは代わりに最近の記事一覧が表示されるようです。

ほかにもいろいろオプションが設定できますが、変更必須の項目はRelated TitleとRecent Titleでしょう。

ここはそれぞれ「関連する記事」、「最近の記事」などと日本語に設定しておきます。

ほかは表示記事数Max Posts、1タグあたりの表示記事数Posts Per Tagぐらいでしょう。

Post thumbnail is usually the first image you insert in the post and it is automatically extracted by Google Blogger and that image must be uploaded to PicsaWeb - directly or through Blogger post editor.
Smarter Related Posts Widget for Google Blogger - v2.0

わざわざPicasaWebの画像しかサムネイルになりませんと書いてあるのでGoogle+にアップデートするとサムネイル表示されないのかもしれません。

Show Thumbs?をnoにするとサムネイルは表示されません。

サムネイルを表示する場合はThumb Sizeでサイズが選べます。

デフォルトはs72-cです。-cは元画像を勝手に切り取ります。切り取ってほしくないときはs72とだけ入力します。

切り取る場合は32, 48, 64, 72, 104, 144, 150, 160の各ピクセルが選択でき、切り取らない場合は94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600から選択できます。

他の項目もいじってみましたが変化がよくわかりませんでした。

レイアウト画面にガジェットが追加されてあとはそれをいじるだけ

オプションが決まったら右下にあるボタンをクリックします。

すると下のCodeの欄にコードが表示されますのでその右上のをクリックします。

Bloggerにログインしていない状態ですとログイン画面が現れます。


ログインするとページ要素の追加画面がでてきますので追加するブログを選択します。

タイトルは「関連記事表示」とでもつけておいた方があとでレイアウト画面での設定でわかりやすいです。

「コンテンツを編集」の中が空っぽのときがありそのときは「ウィジェットを追加」をクリックしてもエラーが出ます。

ログインした状態でもう一度やり直すとうまくいきました。既にログインした状態でもエラーが出る場合はブラウザの戻るボタンでいったん戻って再度をクリックするとうまくいきました。
追加が成功するとレイアウト画面に移行します。


サイドバーの上に「関連記事表示」ガジェットが追加されていました。

表示させたい部分に移動後「配置を保存」します。


ブログにはこのように表示されます。タイトルが重なっていますね。

ガジェットの編集でガジェットのタイトルを削除すると「RELATED POSTS」のみ残ります。

既にオプションで変更している場合はそれが表示されているはずです。

再設定にはもう一度Related Posts Widget for Google Blogger v2.0 - Setupへ戻ってコードを取得してガジェットの編集でコンテンツを入れ換えればよいです。

私は以下のようにしました。

<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!-- {
 blog_url:'http://p--q.blogspot.jp'
 ,max_posts:10
 ,posts_per_tag:10
 ,related_title:'関連する記事'
 ,recent_title:'最近の記事'
 ,thumb_size:'s160-c'
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

投稿の最初に画像を入れておくときれいにみえますね。

記事内容とは一切関係のない画像ばかりですけど、、、

参考にしたサイト

Smarter Related Posts Widget for Google Blogger - v2.0
開発元。