Bloggerのテンプレート「Vaster」をカスタマイズ⑩ 関連記事部分を好きなデザインにカスタマイズ

このブログは「Vaster」の関連記事の部分のデザインをカスタマイズしています。『Smarter Related Posts Widget for Google Blogger v2』という関連記事ガジェットを使用していて、簡単に設置できるので、カスタマイズしてみてください。

『Smarter Related Posts Widget for Google Blogger v2』について

『Smarter Related Posts Widget for Google Blogger v2』は関連記事を表示させるのに様々な設定をすることができて、非常に便利です。元々は海外のガジェットですが、日本でBloggerを利用している方々が、詳しく説明してくれているサイトがあるので、何の問題もなく設置可能です。「Vaster」もですが、フリーで情報を公開しているサイト運営者様に感謝です。

『Smarter Related Posts Widget for Google Blogger v2』を設置するための参考サイト


『Smarter Related Posts Widget for Google Blogger v2』はサイトで設定して、コードをコピー&ペーストして設置するのですが、下記サイトを参考にすれば、もっと簡単できます。

・Blogger Tips:「Smarter Related Posts Widget for Google Blogger v2.0」を設置する
・オススメガジェットはコレ!関連記事を表示する方法

『オススメガジェットは~』では、5つの表示サンプルから選ぶことができます。当ブログは5つ目を使用していますので、カスタマイズ方法もそのコードを表示しています。設置については、『Blogger Tips:~』が「Vaster」を利用して説明されていますので、わかりやすいです。

HTMLとCSSを書き換えるだけの簡単カスタマイズ

テンプレートのバックアップ(重要!)をとり、エディタで開いたら、文字列【関連記事】検索します。そして、HTMLとCSSを下記のように変更します。

HTML変更前
<!-- 関連記事--> <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> <!--関連記事ここまで-->

HTML変更後
<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://neverenough777.blogspot.jp/&#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変更前
/*   関連記事 -------------------------------------- */ #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); }

CSS変更後
/*   関連記事 -------------------------------------- */ .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; } .related-posts-widget img { border: none !important; box-shadow: none !important; padding: 0 !important; } .related-posts-widget h2 { font-size: inherit !important; margin-bottom: .5em !important; } .related-posts-widget ul:before , .related-posts-widget ul:after { content: ""; display: block; overflow: hidden; } .related-posts-widget ul:after { clear: both; } .related-posts-widget ul { zoom: 1; } .related-posts-widget ul li { float: left; width: 33%; } .related-posts-widget ul li a { display: block; padding: 5%; } .related-posts-widget ul li a span { display: block; } .related-posts-widget ul li a span img { height: auto; width: 100%; } .related-posts-widget ul li a strong { display: block; }

長いですが、コピー&ペーストするだけです。これでパソコンでもスマホでも関連記事がカスタマイズされ表示されるようになります。関連記事をカスタマイズすると雰囲気も変わるので、ぜひ挑戦してみてください。

スポンサーリンク

スポンサーリンク

0 件のコメント :

コメントを投稿