「あわせて読みたい」はブログ読者が読んでいるブログを表示するサービスで、似た話題を書いているブログを新しく知るきっかけにもなりとても面白いサービスなのですが、いかんせんデザインが野暮ったい(^_^;)。サイドバーに設置すると変に目立つ（それが目的なのかもしれないけど、目立つと言うより浮いてる感じ？）ので、テキストベースのブログパーツをadiaryに設置してみました。
利用したのは、Salad Days Riderのはっさくさんが公開している「あわせて読みたい JS版」をBlogger用にotherさんがカスタマイズしたものをお借りしました。
サイドバーに溶け込んでいい感じになりました(*^_^*)。
以下にadiaryでの設置方法をご紹介しておきます。
目次
■ ソース
<!--
「あわせて読みたい」javascript版 adiary ver.
Edited by hitoxu
https://hitoxu.com/
このプラグインは「あわせて読みたい」(http://awasete.com/)のブログパーツを、公開されているAPIをもちいて、Salad Days Rider(http://sdr200.blog113.fc2.com/)のはっさくさんがfc2blogのプラグインとして製作されたものをベースにother(http://other-webscrap.blogspot.com/)さんがBlogger用に改変したものを利用させていただき、hitoxuがadiary用に微調整をしたものです。
改造・再配布については、はっさくさんが規定したガイドラインに準拠します。
詳しくは『始めに登録が必要です - 「あわせて読みたい JS版」』(http://sdr200.blog113.fc2.com/?no=423&style2=22_latte)をご覧下さい。
-->
<!--あわせて読みたい=====================================-->
<div class="hatena-module" id="side-category-list">
<div class="hatena-moduletitle">あわせて読みたい</div>
<div class="hatena-modulebody">
<style type="text/css">
<!--
.awasete_yomitai ul {
margin: 0 !important;
}
.awasete_yomitai li {
overflow: hidden;
margin: 0;
background: 0 top no-repeat;
list-style-image: none !important;
list-style-type: none !important;
list-style-position: outside;
font-size: 0.9em;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.awasete_favicon {
list-style-image: none;
list-style-type: none !important;
list-style-position: outside;
}
.awasete_favicon li {
padding: 0 0 0 20px;
}
.awasete_provided {
text-align: right;
font-family: Arial, sans-serif;
}
-->
</style>
<div id="awasete_yomitai"></div>
<script type="text/javascript">
<!--
function awasete_yomitai(v){
var list_max=5; // 表示行数の最大値 1-10
var favicon_visible=1; // リンク先のfaviconの表示 1=有 / 0=無
var elmRoot = document.getElementById('awasete_yomitai');
var elmUl = document.createElement( 'UL' );
if (favicon_visible == 1){
elmUl.className='awasete_favicon';
}
elmRoot.className='awasete_yomitai';
elmRoot.appendChild(elmUl);
if(list_max<1 || 10<list_max){list_max=5;}
var max = Math.min(list_max, v.length);
for (var i = 0; i < max; i++){
var liElement = document.createElement( 'LI');
if (liElement){
var d = v[i];
if (favicon_visible == 1){
liElement.style.backgroundImage='url('+d.favicon+')';
}
elmUl.appendChild(liElement);
var aElement = document.createElement('A');
aElement.href=d.url;
aElement.target='_blank';
aElement.appendChild(document.createTextNode(d.title));
liElement.appendChild(aElement);
}
}
document.write('<div class="awasete_provided"> by <a href="http://awasete.com/show.phtml?u=https://hitoxu.com/" target="_blank">'+'awasete.com'+ '</a></div>');
}
//-->
</script>
<script charset="utf-8" src="http://api.awasete.com/showjson.phtml?u=(対象となるブログトップページのURL)" type="text/javascript"></script>
</div> <!-- hatena-modulebody -->
</div> <!-- hatena-module -->
■ 設置手順
- 「あわせて読みたい」であなたのブログを登録してください。（すでに登録済みの方は登録は不要です。）
- /diary.user.skel/ に _sidebar.html があればローカルにダウンロードしテキストエディタで開きます。ない場合は /diary.skel/ の _sidebar.html をダウンロードしてテキストエディタで開きます。
- 表示させたい箇所に、上のソースを貼り付けます。
- 「(対象となるブログトップページのURL)」の部分をあなたのブログのURLに変更します。
- 上書き保存後、_sidebar.html を /diary.user.skel/ にアップロードします。
- サイドバーに正常に表示されるか確認をします。
以上です。1で「あわせて読みたい」にはじめて登録した方は、約1日程度表示されません。少し間を置いて表示を確認するようにしてください。（また、1で登録後に表示されるブログパーツを確認用に表示させておき正常に表示が確認できたら外すという手順を踏んでもいいかもしれませんね。）
