ブクログとは

ブクログとは、WEB上に自分の本棚を作成できるサービスです。レビューを記録できたり、本棚を公開できたりする（=自己紹介）のが便利なので、私も愛用しています。

ところでこのたび、その本棚をウィジェットとしてサイドバーに入れてみたのですが、デフォルトだと、改行位置とかテキトーだったりして、あまりオシャレじゃありません。というわけで改造してみました。

ブクログからAPIで本棚情報を取得する

下記のコードを「ウィジェットエリア」にテキストとして張付けましょう。
「fujimotoweb」になっているところは、ご自身のユーザー名に変えて使ってくださいね。

<script type="text/javascript">
    function booklog_minishelf(json) {
        var items = json["books"];
        var html = "";
 
        for(var i = 0; i < items.length; i++) {
            var elem = items[i];
            var text = '<ul class="bookshelf"><li class="bookImage"><a href="' + elem["url"] + '" target="_blank"><img src="' + elem["image"] + '" title="' + elem["title"] + '"width="52" height="75" alt="No Image" /></a></li><li class="bookTitle"><a href="' + elem["url"] + '" target="_blank">' + elem["title"] + '</a><div class="bookAuthor">' + elem["author"] + '</div></li></ul>';
        html += text;
        }
        document.getElementById("recent_books").innerHTML = html;
    }
</script>
<div id="recent_books"></div>
<div class="clear"></div>
 
<script src="http://api.booklog.jp/json/fujimotoweb?category=0&status=3&rank=5&count=10&callback=booklog_minishelf"></script>

 CSSの制御

下記の指定をstyle.cssに追加しましょう。デフォルトより少しだけオシャレになりますよ～。

#recent_books {
	margin: 0 auto;
	/*width: 600px;*/
}

#recent_books h2 img {
	border: 0;
	vertical-align: baseline;
}

.userInfo {
	text-align: center;
}

.userInfo span {
	display: inline-block;
	margin: 0 10px;
}

.bookshelf {
	padding: 0;
	border: 1px solid #ccc;
}

.bookshelf li {
	margin: 0;
	padding: 10px;
	/zoom: 1;
	list-style-type: none;
}

.bookshelf li:after {
	clear : both;
	display: block;
	content : '';
}

.bookshelf li:first-child {
	border: 0; 
}

.bookImage {
	float: left;
	display: block;
	margin-right: 10px;
	margin-left: 0px !important;
}

.bookInfo {
	overflow: hidden;
}

.bookTitle {
	font-weight: 700;
}

.bookAuthor {
	margin-bottom: 5px;
}

 まとめ

•  ウィジェットに改造済のタグ追加
• fujimotowebのところはご自身のユーザー名に
• CSSにサンプルコード追加しましょう