web2.0的ラボTopブログパーツ開発買物検索「楽-Yah」
ブログパーツをcssでカスタマイズ

Posted at 07/10/05 Comment(2)» Trackback(0)» ブログパーツ開発»

powerd by 楽市アド360

アフィリエイトインテリジェンスさんで、楽-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>



  RSS2.0  Atom 
RSSリーダーに登録すれば、更新がすぐにわかります。

"ブログパーツをcssでカスタマイズ"へのトラックバック
トラックバック先URL

※当サイトへのトラックバックは、当サイト内ページへのリンクがないと、受け付けない仕様になっています
"ブログパーツをcssでカスタマイズ"へのコメント

CommentData » Posted by うか at 07/10/09

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

CommentData » Posted by かん吉 at 07/10/14

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

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

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

"ブログパーツをcssでカスタマイズ"へコメントを投稿
次のようなコメントは、基本的に掲載しかねますので、ご了承ください。

・「応援してます!応援ポチ☆」のような、返答しようがないコメント。私は「応援ポチ」という言葉が嫌いです。「応援ポチ」もしくはそれに順じた言葉が書き込まれたコメントは無視させて頂きます。
・当記事と全く関係ない話題、サイトの売り込みなど。宣伝色を少しでも感じたものは削除します。
・相互リンク依頼のコメント(専用ページから申し込みください)
ブログバーツに関する質問掲示板に書き込んでください)
・その他、管理人が不適切だと感じたコメント

上の情報を保存する場合はチェック

about me


今からリンクシェア見本市に出かけます。 9hours ago

かん吉2.0
ウェブサイト作成・運営を生業としています
技術ネタを粛々と紹介してます

公開しているサービス

※日常のネタは親ブログのわかったブログ
運営ブログの新着記事を全て読めます

フィード
my bookstand
powerd by Amazon360
関連サイト: アフィリエイトゴールMovabletypeマニュアル?