ブログパーツを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="商品ＵＲＬ" 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="商品ＵＲＬ" 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="商品ＵＲＬ" 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="商品ＵＲＬ" target="_blank"><img alt="楽天市場" src="ロゴＵＲＬ" 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="商品ＵＲＬ" 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="商品ＵＲＬ" target="_blank"><small>ショップ名</small>
</a
</div>
</td>
</tr>

タイプ6
<tr>
<td class="r-main1">
<a href="商品ＵＲＬ" target="_blank"><img src="商品画像ＵＲＬ" /></a>
</td>
<td class="r-main2" 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>
<a href="商品ＵＲＬ" 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="商品ＵＲＬ" target="_blank">
<img src="商品画像ＵＲＬ"/>
</a>
</div>
<div class="r-sub2">
<a href="商品ＵＲＬ" target="_blank">商品名</a>
</div>'+'<div class="r-sub3">
<b><font color="#990000">○○○円</font></b><br>
<a href="商品画像ＵＲＬ" target="_blank">
<small>ショップ名</small>
</a>
</div>
</td>

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