関連記事を表示させよう



「関連記事」を表示させよう


前回、ニュースサイトを見たときウォール・ストリート・ジャーナルの記事の最後には「関連記事」や「ピックアップ」が掲載されていたのはわかりましたか?



この「関連記事」を表示させるようにいくつか変更を行っていきます。

「関連記事」は記事と記事のつながりを作成していくんです。


ところで、「関連記事」と「ピックアップ」の2つ表示させるのはちょっと手間が多いかもしれませんので、「関連記事」を「ピックアップ」のように表示するようにしてみましょうか。

このような感じにしてみましょう。

関連記事を表示させるのはちょっと難しい


ガジェットが用意してあると簡単なのですが、「関連記事」を表示させるガジェットは無いのです!

そこでテンプレートを修正して「関連記事」が表示されるように変更します。


テンプレートから「HTMLの編集」を選択すると


文字が大量に並んだウィンドウになります。

テンプレートはこのように呪文のようなコードで構成されているんです。

「関連記事」を表示させるためにこのコードに追加・修正を加えます。

この方法も英語の記事が既にありますのでその記事を見ると方法は分かるんです。

(英語の方が情報量が圧倒的に多いので、英語ができるとちょっと便利。 内容は難しく無いのでちょとだけわかれば十分読めるんです。)




英語の記事はこんな感じに紹介しています。

コードを修正します!


先ほどの「HTMLの編集」を使ってコードを修正します。

はじめにCSSコードの組み込み



コードを追加する場所を確認します。

</head>より上にCSSコードとプログラムの呼び出しを追加します。

追加するコードは:
<!-- related post -->
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<!-- end of related post -->

関連記事を表示するコードを追加

次は場所を探すのが難しいけど、<data:post.body />の次に追加します。

注意するのは、シンプルテンプレートの場合<data:post.body />は2箇所あるので2番目が個々の記事を表示する際に使われるコードになるのでそこへ追加します。



追加するコードは:

<!-- 関連記事 -->
 <!-- Related Posts with Thumbnails Code Start-->
<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 expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>&#12304;関連記事&#12305;</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- 関連記事 -->
これで関連記事が表示されるようになります。

関連記事の「関連」は何かと言うと、ラベルが同じ場合に関連記事になります。


これでまた少し枠組みができてきました。

ブログの本質は記事にあるのですが、書いた記事を効果的にアピールする方法を整備することも必要なんです。

ウェブデザイナーという職業(デザインとプログラムとあります)というのがあるのもわかりますね。


あと欲しい拡張機能としては・・・・「ピックアップ」でしょうか。

次回は「ピックアップを追加しよう」