ブログパーツをcssでカスタマイズ

   

アフィリエイトインテリジェンスさんで、楽-yahをcssでカスタマイズする方法を紹介してもらいました。

以前からcssを利用できるようにしてありました。
ところが、告知するのを忘れてました!

本家がこれではダメですね……。

アフィリエイトインテリジェンスさんの記事を読んで思い出しました。ありがとうございます!

ちなみに、楽-yahのフィールドはこんな感じになっています。
ご自分でcssを編集すれば、こんな「かっこいいデザイン」も可能になります。

他のブログパーツ(Amazon360楽市360)も同じようにidを入れてあります。その内訳は順次公開します。

タイプ1
<tr>
<td class="r-main1" style="font-size:x-small;" align="left" >
<div class="r-sub1"><a href="" target="_blank">商品名</a></div>
<div class="r-sub2">
<font size="-1" color="#636363">商品説明</font>
</div>
</td>
<td width="60" class="r-main2">
<div class="r-sub3">
<center>
<b><font color="#990000">○○○円</font></b>
</center>
</div>
</td>
<td width="50" align="center" class="r-main3">
<a href="商品URL" target="_blank">
<img alt="楽天市場" src="" border="0"/><br>
<small>ショップ名</small>
</a>
</td>
</tr>
・・・

タイプ2
<tr>
<td class="r-main1" style="font-size:x-small;" align="left" >
<div class="r-sub1"><a href="" target="_blank">商品名</a></div>
<div class="r-sub2">
<font color="#636363">商品説明</font>
</div>
<div class="r-sub3">
<b><font color="#990000">○○○円</font></b>
<a href="商品URL" target="_blank">ショップ名</a>
</div>
</td>
</tr>

タイプ3
<tr>
<td class="r-main1" style="font-size:x-small;" align="left" >
<div class="r-sub1"><a href="" target="_blank">商品名</a></div>
<div class="r-sub2">
<b><font color="#990000">○○○円</font></b><br>
<a href="商品URL" target="_blank">ショップ名</a>
</div>
</td>
</tr>

タイプ4
<tr>
<td width="60" class="r-main1">
<a href="" target="_blank"><img src="商品画像URL" /></a>
<td class="r-main2" style="font-size:x-small;">
<div class="r-sub1"><a href="" target="_blank">商品名</a></div>
<div class="r-sub2"><font size="-1" color="#636363">商品説明</font></div>
</td>
<td width="60" align="center" class="r-main3">
<div class="r-sub3">
<b><font color="#990000">○○○円</font></b>
</div>
</td>
<td width="50" align="center" class="r-main4">
<a href="商品URL" target="_blank"><img alt="楽天市場" src="ロゴURL" border="0"/><br>
<small>ショップ名</small></a>
</td>
</tr>

タイプ5
<tr>
<td width="60" class="r-main1">
<a href="" target="_blank">
<img src="" /></a>
</td>
<td class="r-main2" style="font-size:x-small;">
<div class="r-sub1">
<a href="商品URL" target="_blank">商品名</a></div>
<div class="r-sub2">
<font color="#636363">商品説明</font></div>
<div class="r-sub3"><b><font color="#990000">○○○円</font></b>
<a href="商品URL" target="_blank"><small>ショップ名</small>
</a
</div>
</td>
</tr>

タイプ6
<tr>
<td class="r-main1">
<a href="商品URL" target="_blank"><img src="商品画像URL" /></a>
</td>
<td class="r-main2" style="font-size:x-small;" align="left" >
<div class="r-sub1"><a href="商品URL" target="_blank">商品名</a></div>
<div class="r-sub2"><b><font color="#990000">○○○円</font></b>
<a href="商品URL" target="_blank">
<small>ショップ名</small>
</a>
</div>
</td>
</tr>

タイプ7,8
<td class="r-main1" valign="top" align="left" style="font-size:x-small;">
<div class="r-sub1">
<a href="商品URL" target="_blank">
<img src="商品画像URL"/>
</a>
</div>
<div class="r-sub2">
<a href="商品URL" target="_blank">商品名</a>
</div>'+'<div class="r-sub3">
<b><font color="#990000">○○○円</font></b><br>
<a href="商品画像URL" target="_blank">
<small>ショップ名</small>
</a>
</div>
</td>

最終更新日:2007.10. 5 | コメント(2) | トラックバック(0) | ブログパーツ開発 買物検索「楽や」

» ブログパーツ開発買物検索「楽や」

トラックバック

※当サイトへのトラックバックは、当サイト内ページへのリンクがないと、受け付けない仕様になっています

コメント
Posted by うか at 07/10/09

勝手に紹介させていただきましたm(_ _)m
それにしても、このセレクタ公開、すっごくありがたいです!
ただですらポップアップ機能でクリック率が高い楽-Yahに、ちょっとだけ見た目のエッセンスを加えてさらにクリック率が高まればいいなーなんて思ってます。

Posted by かん吉 at 07/10/14

>勝手に紹介させていただきましたm(_ _)m

こちらこそ、ありがとうございます。
見た目の綺麗さもクリック率に影響あると思います。今回のうかさんのTipsは、すばらしいです。

私も逆輸入で利用させて頂きますよ♪

サイト内検索
サイトマップ
最近の記事
コミュニティ

あわせて読みたい  フィードメーター - web2.0的ラボ

製品レビューポータル「MONO-PORTAL」