Bloggerで関連記事を自動表示する簡単な設定方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
突然ですが自分のブログに関連記事を表示したいと思ったことありませんか?
Bloggerは、サイドバーやフッターなど好きな位置にガジェットを追加することができます。
投稿記事に関するガジェットには「人気の投稿」や「注目の投稿」を表示するものはありますが、「関連記事」を表示するものがないんです。

「ぼく(私)は、トーマスイッチさんの「Vaster2」を使っているよ!」って方は、この記事は遠慮なくスルーしちゃって下さい(笑)
テーマによっては、最初から関連記事を表示する機能がついているものもあります。

そこで今回は、使っているテーマに関連記事を表示する機能がない方に向けて、関連記事を表示する簡単な方法についてお話します。
使用するツールはこちら!「Milliard

スポンサーリンク

Milliardの設定方法

コード取得からガジェットへ貼り付け

1. シスウ株式会社「Milliard関連ページプラグインについて」へアクセス

2. 下へスクロールすると、利用方法があるので「Bloggerをお使いの方はこちら」をクリック

3. 下の図のURLをクリック

※こちらからもアクセスできます⇒「関連記事ツール設定画面

4. 必要事項を入力 → 「コードを取得」をクリック

A. トップのURL:自分のブログのトップページのURLを入力
B. サイトタイプ:「Blogger」を選択
C. 紹介文:「こちらの記事もいかがですか」やシンプルに「関連記事」など、お好みで入力
※何も入力しない場合はデフォルトで「こんな記事も書いてます」が表示されます。
D. 並び順:表示する順番を選択
E. 表示位置:表示する位置を選択
F. PCでの表示:PCでの表示方法を選択
※「パネル」を選択した場合、「挿入箇所のスクロールを無効にする」と表示件数は設定できません。
G. スマホでの表示:スマホでの表示方法を選択
※「挿入箇所のスクロールを無効にする」にチェックすることをおすすめします。

《その理由は?》
スマホは上下にスクロールしてページを見ますよね?
ここにチェックが入っていないと(=有効)、例えばページの下へスクロールする際、Milliardの関連記事がスクロールされてしまい、なかなか下のページの内容を見ることができないため。

5. 表示されたコードをコピー → 「OK」をクリック

6. Blogger管理画面「レイアウト」 → footer-1「ガジェットの追加」をクリック

7. ガジェット「HTML/JavaScript」をクリック

8.「コンテンツ」の枠内に上記5.でコピーしたコードを貼り付ける → 「OK」をクリック
※「タイトル」欄には何も入力しない(入力するとテキストが記事に表示されるため)

※ご注意
ここからはテンプレートを直接編集していくので、必ず変更前データのバックアップをお忘れなく!

HTMLの編集

9. Blogger管理画面「テーマ」 → 「HTMLの編集」をクリック

10. 「Ctrl + F」キーで検索窓を表示 → 「<data:post.body/>」と入力 → 「Enter」キー

11. 「<data:post.body/>」のすぐ下に次のコードを貼り付ける
※複数ヒットした場合は、最後(行番号が大きい数字)の「<data:post.body/>」のすぐ下
↓貼り付けるコード
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<ins id=’ssRelatedPageBase’/>
</b:if>

12. 「テーマを保存」をクリック

おしまい!お疲れさまでした。

スポンサーリンク

さいごに

早速、自分のブログの記事ページを見てみましょう!
関連記事を表示しただけでブロガーとして一歩成長したような気がしませんか?
1人でも多くの方があなたの関連記事を見て下されば嬉しいです。

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント