Blogger Tips:「Smarter Related Posts Widget for Google Blogger v2.0」を設置する | neputa notes

日常のログをつらつらと

Blogger Tips:「Smarter Related Posts Widget for Google Blogger v2.0」を設置する

0 件のコメント
スポンサーリンク
今回はBloggerのテンプレート「Vaster」を色々カスタマイズした一連の二つ目(参照:Blogger 色々カスタマイズ)として、関連記事ウィジェットを変更した作業についてまとめる。

作業対象のブログはこちら → 読書感想BLOG

なぜ「Vaster」の関連記事ウィジェットを変えるのか?


Bloggerテンプレート「Vaster」に組み込まれている関連記事ウィジェットも十分に使い勝手が良いのだが、私のブログにおいては1点、仕様が合わなかった。

Vasterの関連記事ウィジェットは「1記事・1ラベル」であれば問題ないのだが、「1記事・複数ラベル」の場合、最後のラベルをターゲットに関連記事を取得する仕様となっている。つまり最後のラベル以外はターゲット外となってしまう。

対象のブログは各記事に複数のラベルを持ち、いずれかのラベルにヒットする記事を関連記事として抽出してほしいので、それが可能なウィジェットがあったのでそちらに変更することにした。

Smarter Related Posts Widget for Google Blogger v2

「Smarter Related Posts Widget for Google Blogger v2(以降Smater)」は細かな設定が可能なウィジェット。参照するタグの数、ひとつのタグから取得する記事の数などを定義することができ、自分のブログにぴったりである。

参考にしたのはこの2つの記事

Smaterについて詳しく知りたい方は「オススメガジェットは~」の記事に設置方法や各オプションの説明が細かく書かれている。
クリック率UP!関連記事を~」の記事には、5つの表示サンプルとソースがあるので、すぐに設置したい場合はこの中から選んで使用するとよい。

自分の場合は「関連記事サンプル3」に手を入れて使うことにした。
サンプルは横長のサムネイルを対象としているいるのだが、自分のブログは書籍の縦長に合わせるため主にcssの方に手を入れた。

HTMLの設置

HTMLの方はそのまま使うことができるが、jqueryのリンク「http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js」は、ヘッダなどで1.4.2以上のバージョンを呼び出している場合は不要である。

Vasterの関連記事ウィジェットを設置する場所は1箇所でわかりやすい。
テンプレート>HTML編集で<!-- 関連記事-->を検索し、下の図の<b:if>タグの内側を書き換えればよい。

<!-- 関連記事-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
~~ここを書き換える~~
</b:if>
<!--関連記事ここまで-->

  • 修正前
<!-- 関連記事-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast != &quot;true&quot;'>
      </b:if>
      <script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>
      var currentposturl=&quot;<data:post.url/>&quot;;
      var maxresults=8;   //関連記事数
      var relatedpoststitle=&quot;<h3>関連記事</h3>&quot;;
      removeRelatedDuplicates_thumbs();
      printRelatedLabels_thumbs();
    </script>
  </div>
  <div style='clear:both;'/>
</b:if>
<!--関連記事ここまで-->

  • 修正後
<!-- 関連記事-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/>
  <!-- required HTML -->
  <div class='related-posts-widget'>
  &lt;!-- {
    blog_url:&#39;http://book-reports-blog.blogspot.com/&#39;
   ,max_posts:6
   ,posts_per_tag:6
   ,related_title:&#39;関連記事&#39;
   ,recent_title:&#39;最新記事&#39;
   ,thumb_size:&#39;s144&#39;
   ,post_page_only:1
  } --&gt;
  </div>
</b:if>
<!--関連記事ここまで-->

cssの設置

もともとある関連記事用のcssは不要となるため、/*   関連記事 で検索し、該当する部分を差し替える。ちなみに、下の変更後のソースは縦長のサムネイルに合わせて一部修正をしている。

  • 変更前
/*   関連記事
-------------------------------------- */
#related-posts{
   float:left;
   width:auto;
}
#related-posts a{
   border-right: 1px dotted #eaeaea;
   color:#666;
   transition:0.3s;
}
#related-posts a:hover{
   color:#fff;
   background:#ff8c00;
}
#related-posts h2{
   margin-top: 10px;
   background:none;
   font-size:18px;
   color:#999999;
}
#related-posts .related_img {
   margin:5px;
   border:2px solid #f2f2f2;
   width:120px;
   height:120px;
   transition:all 300ms ease-in-out;
   border-radius: 5px;
}
#related-title {
   padding: 0px 5px 10px;
   font-size:12px;
   width:120px;
   height: 40px;
}
#related-posts .related_img:hover{
   border:2px solid #E8E8E8;
   opacity:.7;
   filter:alpha(opacity=70);
}
/*    ページナビゲーション
------------------------------------------------ */

  • 変更後
/*   関連記事
-------------------------------------- */
.related-posts-widget h2,
.related-posts-widget ul,
.related-posts-widget li {
    margin:0!important;
    padding:0!important
}
.related-posts-widget li {
    list-style-type:none!important;
    overflow:hidden
}
.related-posts-widget img {
    border:none!important;
    box-shadow:none!important;
    padding:0!important
}
.related-posts-widget h2 {
    font-size:16px;
    padding-left:5px;
    border-bottom:1px solid #777;
    margin-bottom:.5em!important
}
.related-posts-widget ul:before,
.related-posts-widget ul:after,
.related-posts-widget ul li a:before,
.related-posts-widget ul li a:after {
    content:"";
    display:block;
    overflow:hidden
}
.related-posts-widget ul:after,
.related-posts-widget ul li a:after {
    clear:both
}
.related-posts-widget ul,.related-posts-widget ul li a {
    zoom:1
}
.related-posts-widget ul li {
    display:-moz-inline-box;
    display:inline-block;
    /display:inline;
    /zoom:1;
    width:50%;
    height:144px
}
.related-posts-widget ul li a {
    display:block;
    padding:2% 3%;
    width:100%
}
.related-posts-widget ul li a span {
    display:block;
    float:left;
    width:102px;
    margin-right:7px
}
.related-posts-widget ul li a span img {
    max-height:144px;
    max-width:102px;
    margin:0
}
.related-posts-widget ul li a strong {
    font-size:14px;
    font-weight:400;
    padding-right:2%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4
}
/*    ページナビゲーション
------------------------------------------------ */

あともう1箇所、レスポンシブデザイン用のcssの部分も変更しておく。
#related-posts .related_img で検索し、該当部分をそっくり書き換える。

  • 変更前
#related-posts .related_img{
   width:100px;
   height:100px;
}

  • 変更後
.related-posts-widget ul li{
  height:80%
}
.related-posts-widget ul li a span{
  width:50%
}
.related-posts-widget ul li a span img{
  height:80%;width:80%
}
.related-posts-widget ul li a strong{
  font-size:80%
}

以上でこんな感じに関連記事を表示できるようになった。
デスクトップはこんな感じ

こちらはスマホ表示

次回は「ナビゲーションバーの設置」
スポンサーリンク
スポンサーリンク

0 件のコメント :

コメントを投稿