『Zenback』を導入して『関連する記事』が表示されるようになった

【カテゴリ：パソコン　ブログカスタマイズの記録】

9月11日（火）に、このブログに『Zenback』を導入してみたところ、ようやく『関連する記事』が表示されるようになってきました。

↓『Zenback』により表示された『関連する記事』の箇所（例）


ところで『Zenback』とは何か？というと．．．

以下、『Zenback』のホームページからの引用です。

Zenbackは、ブログやサイトの記事下や横に設置するウィジェット（ブログパーツ）です。無料で使えます。

設置するだけで、「TwitterやFacebookなどのソーシャルボタン」「関連した内容の自分の記事」「関連した内容の他のZenbackユーザーの記事」「その記事についての最新のTwitterのつぶやき」「その記事についてのはてなブックマーク」「 その記事にFacebookでいいねを押した友達のプロフィール写真とFacebookコメント」を表示します。

というような内容です。

スポンサーリンク

なぜ、今回この『Zenback』を導入するに至ったかというと、色々なブログでよく目にする『関連する記事』を表示させたいと思ったことが発端でした。

しかし、その『関連する記事』を表示させるにあたり、残念ながらこの『Seesaa』ブログでは、そのようなサービスが提供されていませんでした。

そこで検索して探したところ、無料で使える外部ブログパーツの『Zenback』が見つかったので、今回この『Zenback』を導入する事にしたという訳です。

自分としては、単純に『関連する記事』が表示されるだけで良かったのですが表示された内容を見ると、なんと画像付きであり、かなり見栄えの良い形となっていました。

それと、『関連する記事』以外にも色々と表示されていたので、それらのおかげで一気に『今時のブログ』っぽくなったような気がしました。

ちなみに『関連する記事』などの各表示項目や、その項目内での表示数などは、『Zenback』にログインした際の『カスタマイズ』画面にて簡単に変更できるようになっています。

．．．

さて、実際に『Zenback』を『Seesaa』ブログに導入する際の方法についてですが、参考までに今回自分が行った手順を以下に例として記録しておこうと思います。

１．『Zenback』スクリプトコードの取得

『Zenback』にログインし、『ログイン管理』画面でツールの『CODE』ボタンをクリックしてスクリプトコードを取得します。



２．『Seesaa』ブログへの『Zenback』スクリプトコードの設置

『Seesaa』ブログ管理画面の『 デザイン＞ PC＞ コンテンツ 』を表示します。



『記事』のコンテンツをクリックすると以下のような画面が表示されます。



右上に表示されている『コンテンツHTML編集』をクリックします。



すると、以下のような『記事のHTML編集』画面が表示されます。



スクリプトコードの挿入箇所についてですが、まず『page_name eq 'article'』で検索します。
3箇所ほど見つかると思いますが、その次の行の先頭が『<div class="text">』となっている箇所です。
更に次の行が『<% else -%>』となっていますので、自分はこの『<% else -%>』の行の上に『Zenback』のスクリプトコードを挿入しました。

変更前の箇所（該当箇所の抜粋です）

<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>

変更後（『Zenback』のスクリプトコード挿入後）

<% if:page_name eq 'article' -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//kingpcfx.seesaa.net/&nsid=107543473099431421%3A%3A107543483568375903&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->

<% else -%>

ブログの編集画面だと見づらいので、他のテキストエディタ等を使い、そのエディタ上に全てコピー＆ペーストしてから作業すると変更しやすいかと思います。

変更が終わったら、『保存』ボタンをクリックします。



『保存』ボタンをクリックすると、以下のように『編集を完了しました。』と表示されます。



閉じて、さらに『保存』ボタンをクリックします。



『設定を変更しました。』と表示されます。



以上、今回自分が『Seesaa ブログ』に『Zenback』を導入した際の手順でした。

おわり。

【追記】2012-09-15　09:20　メモ
新たな記事として書く内容でもないので、ここに書いて記録しておくことにしました。

『Zenback』で表示された画像付きの『関連する記事』の一覧は縦に3列で表示されていましたが、ブログの記事のエリアの横幅をもう少し広げると 4列で表示できそうだったので広げてみました。

最初 20ピクセル広げても駄目でしたが、30ピクセル広げたら4列で表示できるようになりました。



30ピクセルより、もう数ピクセル少なくしても表示できそうでしたが、キリの良い数字ということで30ピクセル広げる事とし、ブログ全体を通して調整しました。

本当は、もうこれ以上横幅を広げたくなかったのですが、少しずつ少しずつ広がっていき、現在のブログの横幅はとうとう 1,110ピクセルとなりました。

ちなみに、今までは 1,080ピクセルでした。

スポンサーリンク