Bloggerで関連記事を追加する方法

公開日 : 最終更新日 :

カテゴリー :

今回はBloggerで関連記事を表示する方法を紹介します。Bloggerで関連記事を追加する方法はいくつかあります。簡単にコード3行で追加できる「brps」やブログのリンク等を入力して関連記事のコードを生成してくれるサービス「Smarter Related Posts Widget for Google Blogger – v2.0」などが有名です。画像のサムネイルを表示できたりいろいろと楽しそうですが、ラベルごとに関連記事を表示できなさそうだったので使いませんでした。そこで僕がやったラベルごとに関連記事を表示する方法は以下の通りです。

テンプレートの改修

  1. 「テンプレート」→「HTMLを編集」→「続行」をクリックしてHTMLの編集画面を表示
  2. 「ウィジェットのテンプレートを展開」にチェックをする
  3. ブラウザの検索等でを見つける
  4. 3で検索したコードの1つ上の行で以下のコードを入れる
  5. ブラウザの検索等でを見つける
  6. 5で検索したコードの下に以下のコードを入れる
  7. 「テンプレートを保存」ボタンをクリックして完了

表示数変更

これでラベルごとの関連記事が追加されます。自分で変更できるところとして4のところに書いてある

<h3>関連記事:</h3>
var maxNumberOfPostsPerLabel = 3;
var maxNumberOfLabels = 3;

の3つが変更できます。<h3>タグは関連記事のところのタイトルを変更できます。「 maxNumberOfPostPerLabel」はラベルに対応したブログ記事の数を指定できます。
「maxNumberOfLabels」は表示するラベルの数を指定できます。注意点としてテンプレートでモバイルテンプレートを使用していると5の

<div style='clear: both;'/> <!-- clear for photos floats -->

が複数になるので注意です。まぁどちらも6のコードを入れておけばいいと思います。

参考

ピンバック

コメント

  1. こんばんは(><)
    早速、活用させて頂きました!有益な投稿深謝です(^^)

    実は、モバイル版の方のみで、なぜかリストがでてきません。
    何が悪いのか、よく分かりませんが、調べたいと思います。

    • PC版は大丈夫でしょうか?モバイル版だけ表示されないのであればどこか足りないところがあるかもしれません。僕も調べてみます。

    • 回答深謝です^^
      はい。PC版は、見事に表示されて感動しました。

      私が変にいじっているからかもしれません(**;)

  2. かき方が悪かったので補則させてください。
    モバイル版では、

    h3>関連記事:
    の部分だけ、ブラウザでは表示されました。
    やはり、私が初心者なのに、変にいじったからかなぁと考えています(**;)

    • コメント遅くなってすいません。

      少し調べたところPC版は問題なくて、モバイル版で一部しか表示されないということですので、あやしいのは、4番か6番だと思います。4番の場合は、

      h3>関連記事:
      と表示されているのであれば「h3」が出ているのがおかしいです。そうでない場合は、javascriptがおかしいでしょう。

      6番の場合は、挿入するコードの場所がおかしいということになりますが、モバイル版で一部表示されているということなのであまり関係ないかもしれません。

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>