photo credit: Travis Isaacs via photo pin cc

iTunes StoreやApp Storeのランキングを表示できるサービス「iTunesLinker」。下記のページで紹介されていました。

iPhone,Macブロガー必見の神ブログパーツｷﾀｺﾚ!! iTunes/App Storeのランキングを自動更新して商品を紹介できるサービス「iTunesLinker」がスゴイ！！！ | OZPAの表4

[Å] iOS / Macアプリのランキング TOP5をブログのサイドエリアで紹介 | あかめ女子のWebメモ

設定方法は、上記2つの記事でわかりやすくまとめているので、そちらを御覧ください！

で、さっそく設置してみたのですが。。。

間隔が狭い気がするので、微調整が必要！とhtmlソースを見るとJavaScriptを埋め込んでいるため、htmlソースが表示されていない！

ということでちょいと調べました。

htmlソースは下記。

※アプリ名や値段等、変動項目は削除しています。

<!-- 大枠のブロックエリア　-->
<div class="iTunesLinker-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">

<!-- 各々のランキングブロックエリア　-->
<div class="iTunesLinker-list" style="clear: both;">

<!-- アプリ画像部分　-->
<div class="iTunesLinker-image" style="float:left;margin:0px 12px 5px 0px;"><a href="" target="_blank" rel="nofollow"><img src="" style="border: none;"></a></div>

<!-- 右側ブロックエリア　-->
<div class="iTunesLinker-info" style="margin-bottom: 10px">

<!-- アプリ名　-->
<div class="iTunesLinker-name" style="margin-bottom:1px;line-height:120%"><a href="" rel="nofollow" target="_blank">アプリ名</a></div>

<!-- 制作会社や値段等　-->
<div class="iTunesLinker-detail"><br>価格:0000円<a href="" rel="nofollow" target="_blank"><img src=""></a></div>

</div>

</div>

</div>

htmlのソースがわかったので、
あとはCSSを設定するだけ！

▼CSS設定後はこんな感じになりました。

▼あまり詳しくないかたは、とりあえず、下記のコードをコピペすればいい感じになるはずです。

/* アプリランキング */
.iTunesLinker-list{
	font-size: 90%;
	margin-bottom: 15px;
	line-height: 100%;
	border-bottom: dotted 1px #ddd;
	padding-bottom: 15px;
}

.iTunesLinker-info{
	padding-top: 8px;
}

最後に

リリースされたばかりらしいので、ソースなどが公開されたり、変更になったりするかもしれませんので、何か表示がおかしいな〜という時は、チェックしてみたほうがいいと思います！

作者様、ステキなツールの作成ありがとうございます！

iTunes/iPhoneアプリランキングリンク作成ツール～iTunesLinker～