Blogger で 関連する記事 を 表示する 方法

0 件のコメント

Blogger で 関連記事を表示する 方法がもう少し簡単にならないかと試行錯誤した結果…結局作ってしましました。 実装は JavaScript で Google Feed API を利用しています。

関連記事表示モジュールの設置手順

  1. メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。

  2. <b:widget type='blog'> の子要素で <b:includable /> の並びに以下のコードを追加します。

    <b:includable id='related-posts' var='post'>
      <div class='RelatedPosts'>
        <p><h2>関連記事</h2></p>
        <div id='blogger.relatedposts.label'>
          <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>
        </div>
        <div id='blogger.relatedposts.output'></div>
      </div>
      <script type='text/javascript'>
    var RELATEDPOSTS_SETTINGS = {
      BlogURL: 'garafu.blogspot.jp',
      MaxResults: 5,
      TitleVisible: true,
      ThumbnailVisible: true,
      SnippetVisible: true,
      NoThumbnailImageUrl: 'http://4.bp.blogspot.com/-9mCCaXTpn9I/VN4hDMsFXlI/AAAAAAAAC6U/i84N2Ng37Ik/s1600/noimage.png',
      NoRelatedPostsMessage: 'No Related Posts...',
    };
      </script>
      <script type="text/javascript" src="//www.google.com/jsapi"></script>
      <script type="text/javascript" src="//garafu.github.io/blogger.relatedposts/release/0.0.1/blogger.relatedposts.min.js"></script>
    </b:includable>
    
  3. 以下の設定を変更します。
    BlogUrl
    Bloggerのドメインを設定します。
    MaxResults
    表示する最大記事数を設定します。
    TitleVisible
    記事タイトルを表示するかどうかを設定します。
    ThumbnailVisible
    記事中最初の画像(サムネイル)を表示するかどうかを設定します。
    SnippetVisible
    記事の最初の本文120文字程度を表示するかどうかを設定します。
    NoThumbnailImageUrl
    ThumbnailVisible=true のとき、記事中最初の画像がない場合に表示する画像のURLを設定します。
    NoRelatedPostsMessage
    関連する記事が見つからなかった場合に表示する文字列を設定します。
  4. 関連記事を表示したい位置に以下のコードを追加します。 ここでは、本文の直後に挿入することにします。

  5. 保存して公開します。

ブログ記事を確かめてみると関連記事が表示されると思います。 CSSの設定がないので、任意に設定いただければ良いかなと思います^^

ちなみに、記事最初にあるようなスタイルで表示するには、以下のCSSを利用していただければ表示できます。

.RelatedPosts {
    margin: 5em 0;
}

.RelatedPosts h2 {
    padding: 10px;
    color: #222222;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2em;
    margin-bottom: 6px;
    text-transform: uppercase;
    border-bottom: 1px solid #D3D3D3;
    margin-top: 5px;
}

.RelatedPosts ul {
    list-style-type: none;
    margin: 0 !important;
}

.RelatedPosts .item-content {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
    -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
    box-shadow: 1px 1px 2px 0 #d0d0d0;
    border-radius: 4px;
}

.RelatedPosts .item-thumbnail {
    float: left;
    margin: 0 5px 5px 0;
}

.RelatedPosts img {
    border-radius: 10px;
    padding: 3px;
}