オススメガジェットはコレ!関連記事を表示する方法

オススメガジェットはコレ!関連記事を表示する方法

ZenbackやLinkWithinなど関連記事を表示するためのガジェットはいくつかありますが、その中でも私のオススメはSmarter Related Posts Widget for Google Blogger - v2.0。他のガジェットと違い、レイアウトが崩れたり表示が遅かったりということもなくほんとオススメ!

そこで今回は、当ブログでも活躍中のガジェット「Smarter Related Posts Widget for Google Blogger - v2.0」を使って関連記事を表示する方法をご紹介:)

SPONSORED LINK

関連記事ガジェットを作成する

まずは以下のサイトにアクセスします。

Smarter Related Posts Widget for Google Blogger - v2.0

画面真ん中あたりにある「easy setup wizard 」

「easy setup wizard 」をクリック。

細かい設定は「Options」にする

「Options」に細かい設定をします。

項目が多いので、最低限必要な「基本設定」と、こだわる人向けの「こだわり設定」に分けて説明します。

基本設定

Blog URL
ブログのURLを入力します。
Mode

「関連記事」と「最新記事」どちらを表示するか選択します。

Related Posts Widget (default):関連記事を表示する(デフォルト)

Recent Posts Widget:最新記事を表示する

Related Posts by Fixed Tags:指定したタグの関連記事を表示する

Max Posts
リストに表示する記事数を入力します。
Show Titles?

記事のタイトルを表示するか選択します。

yes:表示する(デフォルト)

no:表示しない

Show Thumbs?

記事のサムネイル画像を表示するか選択します。

yes:表示する(デフォルト)

no:表示しない

Related Title

関連記事を表示するときのタイトルを入力します。

例:「関連する記事」、「あわせてこちらの記事もどうぞ」など

Recent Title

最新記事を表示するときのタイトルを入力します。

例:「最新の記事」、「新着記事」など

Post Pages Only?

投稿ページにだけリストを表示するか選択します。

yes:投稿ページのみ表示する

no:投稿ページ以外も表示する(デフォルト)

こだわり設定

Fixed Tags?

「Mode」で「Related Posts by Fixed Tags(指定したタグの関連記事を表示)」を選んだとき、指定するタグをここに入力します。

指定方法:['タグ名1','タグ名2','タグ名3']

Max Tags
関連する記事か判断するためのタグ数を入力します。
Posts Per Tag

1タグあたりの表示記事数を入力します。

私のように「1記事=1タグ」としている方は、「Max Posts」に設定した記事数と同じにしないとうまく表示されません。

Thumb Size

サムネイル画像のサイズを入力します。

例:s72-c(72px x 72pxの正方形)、s72(長辺が72pxの画像)

末尾に「-c」を付けると正方形になり、付けないと縦と横で長いほうが指定した値になります。

Posts Per Transition

アニメーション表示するとき、1度に表示される記事数を入力します。

「0」を入力するとアニメーション表示なしのリストになります。

Stay Time

アニメーション表示するとき、リストが表示されている時間を入力します。

例:5000(5秒)、2500(2.5秒)

Enter Time

アニメーション表示するとき、リストがフェードインする速度(時間)を入力します。

例:200(0.2秒)、1000(1秒)

Exit Time

アニメーション表示するとき、リストがフェードアウトする速度(時間)を入力します。

例:200(0.2秒)、1000(1秒)

Animate what?

どんなアニメーションで表示するか選択します。

opacity:透明度を変化させて表示(デフォルト)

height:高さを変化させて表示

width:横幅を変化させて表示

font size:フォントサイズを変化させて表示

line height:行間を変化させて表示

Loop Animation?

アニメーションを繰り返すか選択します。

yes:繰り返す(デフォルト)

no:繰り返さない

「Update Demo & Code」をクリック

設定が終わったら「Update Demo & Code」をクリック。

プレビュー確認後、コードをコピー

プレビューを確認し問題がなければ「Code」に表示されたコードをコピーします。

Bloggerに関連記事を追加する

サイドバーに関連記事を追加する

「ガジェットを追加」をクリック

Blogger管理画面より「レイアウト」→サイドバー一番上の「ガジェットを追加」をクリック。

「HTML/JavaScript」をクリック

一覧から「HTML/JavaScript」をクリック。

「HTML/JavaScript の設定」画面に設定をする!

「コンテンツ」の入力エリア右上が「リッチテキスト形式」となっている状態で先ほどコピーしたコードを張り付けます。

もし設定項目の「Post Pages Only? 」を「投稿ページのみ表示する」にした方は、「loading..」を削除したほうがうまく表示されます。

最後に「保存」をクリックして完了。

表示位置を変更するにはドラッグ

関連記事の表示位置を変更したい場合は「レイアウト」画面でガジェットを上下にドラッグし、最後に「配置を保存」をクリックすれば簡単に変更できます。

記事の下に関連記事を追加する

記事の下に関連記事を追加する場合、先ほどコピーしたコードを一部変更する必要があります。

例えばコピーしたコードがこんな感じだった場合、

- 省略 -

<div class="related-posts-widget">
<!-- {
  blog_url:'ブログURL'
  ,related_title:'関連記事'
  ,recent_title:'最新記事'
  ,post_page_only:1
} -->
loading..
</div>

- 省略 -

このように変更します。

- 省略 -

<div class="related-posts-widget">
&lt;!-- {
  blog_url:'ブログURL'
  ,related_title:'関連記事'
  ,recent_title:'最新記事'
  ,post_page_only:1
} --&gt;
</div>

- 省略 -

また、設定項目の「Post Pages Only? 」を「投稿ページのみ表示する」にした方は、「loading..」を削除したほうがうまく表示されます。

変更する箇所はこれだけ!

それでは早速記事の下に追加してみましょう。

「テンプレート」-「HTML の編集」をクリック

Blogger管理画面より「テンプレート」→「HTML の編集」をクリック。

<data:post.body/>を検索します

ソースの中から<data:post.body/>を探します。

探し方が分からない方はこちらの記事を参考にどうぞ。

以前の記事:カスタマイズ初級編!HTMLを編集する方法

見つかったすべての下に張り付け!

全部で3つ見つかるので、それぞれの下にコードを張り付けます。

「テンプレートを保存」をクリック

最後に「テンプレートを保存」をクリックして完了:)

まとめ

というわけで、Bloggerガジェット「Smarter Related Posts Widget for Google Blogger - v2.0」を使って関連記事を表示する方法のご紹介でした。

まだ設置していなかった方は是非お試しくされ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)