- Tweet
- トップへ
こんちくわ。
今日も楽しくブログ更新している@conchikuwaです。ブログ最高(^^♪
ブログで商品のレビューを書いてその商品のリンクを貼りたい場合にメッサ便利なブックマークレット「カエレバ」があります。今回はその「カエレバ」をCSSカスタマイズしてみたのでご紹介させていただきます。
カエレバについては↓
商品紹介ブログパーツ カエレバ
いつも使わせて頂いております！
「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です！
他ではあまり見かけない、Yahoo!オークションと「もしもDS」のリンクもご用意しました。Yahoo!オークションは知る人ぞ知る高コンバージョンアフィリエイト案件で、「もしも」は高報酬率が狙えます！
デザインは「amazlet」や「G-tools」といった人気ツールに準拠しています。それらのパーツ利用に慣れている方でも安心して利用できると思います
なにはともあれ、まずは上のキーワード検索フォームから、お好みの商品を検索して、ブログパーツを作ってみてください(見本を作れます)
ようは簡単に商品リンクをアフィリエイトタグ付きで整形して出力してくれるチョー便利ツールでございます！
カエレバの使い方
↓ Amazonアソシエイトや楽天アフィリエイトのIDを持っていればそのIDを入力し、
↓ 「カエレバブックマーク」をブラウザのブックマークに追加します。
↓ ブログで紹介したい商品のamazon、楽天、Yahooショッピングのページを開いて、追加した「カエレバブックマーク」をクリックします。
↓ カエレバのサイトに移動するのでデザインを選択して、生成されたhtmlタグをコピペしてブログに貼り付けます。
実際に貼り付けると↓な感じになります。
そのままでも綺麗に表示されるのですが、一つ気になる点があります。それはまたstyleタグを直接要素に指定しているので、htmlタグが長くなってソースが汚くなってしまう点。
カエレバで作成されるhtmlタグは↓な感じです。
（アフィリエイトID部分は削除しています。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"> <div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4777516520/conchikuwa-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51Epqikz7OL._SL160_.jpg" style="border: none;" /></a> </div> <div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"> <div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4777516520/conchikuwa-22/ref=nosim/" rel="nofollow" target="_blank">Webクリエイターズガイドブック―「HTML」「CSS」の基礎を固めて、思い通りのWebデザイン表現 (I/O BOOKS)</a> <div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a> </div> </div> <div class="kaerebalink-detail" style="margin-bottom:5px;">Mana 工学社 2011-12-24 </div> <div class="kaerebalink-link1" style="margin-top:10px;"> <div class="shoplinkamazon" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <a href="http://www.amazon.co.jp/gp/" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a> </div> <div class="shoplinkrakuten" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <a href="http://pt.afl.rakuten.co.jp/" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a> </div> <div class="shoplinkyahoo" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <a href="http://ck.jp.ap.valuecommerce.com/" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2739017&pid=" height="1" width="1" border="0"></a> </div> <div class="shoplinkseven" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <a href="http://click.linksynergy.com/" rel="nofollow" target="_blank" title="セブンネットショッピング" >7net</a> </div> <div class="shoplinkkakakucom" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_02.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <a href="http://kakaku.com/" rel="nofollow" target="_blank" title="kakakucom" >価格.com</a> </div> </div> </div> </div> |
商品リンクが一つだけならまだいいのですが、複数になるとかなり見づらいソースになってしまいます。表示は綺麗にされるので問題はないのですが、やっぱり少し気になります。
で、気になる人の為に「カエレバ」にはCSSカスタマイズ用にHTMLタグを生成できる機能があります！
素晴らしい！！
CSSカスタマイズの仕方
↓ 上記HTMLタグを見るとdivタグにclassタグとstyleタグが付加されているので、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"> <div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"> <div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"> <div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"> <div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%"> <div class="kaerebalink-detail" style="margin-bottom:5px;">Mana 工学社 2011-12-24 </div> <div class="kaerebalink-link1" style="margin-top:10px;"> <div class="shoplinkamazon" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <div class="shoplinkrakuten" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <div class="shoplinkyahoo" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <div class="shoplinkseven" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> <div class="shoplinkkakakucom" style="margin-right:5px;background: url('http://img.yomereba.com/tam_k_02.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"> |
↓ それを外部スタイルシート化して、style.phpに追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.kaerebalink-box{ text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden; } .kaerebalink-image{ float:left;margin:0 15px 10px 0; } .kaerebalink-info{ line-height:120%;/zoom: 1;overflow: hidden; } .kaerebalink-name{ margin-bottom:10px;line-height:120%; } .kaerebalink-powered-date{ font-size:8pt;margin-top:5px;font-family:verdana;line-height:120% } .kaerebalink-detail{ margin-bottom:5px; } .kaerebalink-link1{ margin-top:10px; } .shoplinkamazon{ margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap; } .shoplinkrakuten{ margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap; } .shoplinkyahoo{ margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap; } .shoplinkseven{ margin-right:5px;background: url('http://img.yomereba.com/tam_k_01.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap; } .shoplinkkakakucom{ margin-right:5px;background: url('http://img.yomereba.com/tam_k_02.gif') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap; } |
↓ あとはカエレバのリンク作成時に「CSSカスタマイズ用」を選択し、生成されたhtmlタグをコピペしてブログに貼り付けます。
実際に貼り付けると↓な感じに。ちゃんと外部CSSが適用されております。
Mana 工学社 2011-12-24
「CSSカスタマイズ」のソースは↓ divタグにstyleタグが付加されていないので、若干見やすくなっております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="kaerebalink-box"> <div class="kaerebalink-image"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4777516520/conchikuwa-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51Epqikz7OL._SL160_.jpg" style="border: none;" /></a> </div> <div class="kaerebalink-info"> <div class="kaerebalink-name"> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4777516520/conchikuwa-22/ref=nosim/" rel="nofollow" target="_blank">Webクリエイターズガイドブック―「HTML」「CSS」の基礎を固めて、思い通りのWebデザイン表現 (I/O BOOKS)</a> <div class="kaerebalink-powered-date">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a> </div> </div> <div class="kaerebalink-detail">Mana 工学社 2011-12-24 </div> <div class="kaerebalink-link1"> <div class="shoplinkamazon"> <a href="http://www.amazon.co.jp/gp/" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a> </div> <div class="shoplinkrakuten"> <a href="http://pt.afl.rakuten.co.jp/" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a> </div> <div class="shoplinkyahoo"> <a href="http://ck.jp.ap.valuecommerce.com/" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2739017&pid=" height="1" width="1" border="0"></a> </div> <div class="shoplinkseven"> <a href="http://click.linksynergy.com/" rel="nofollow" target="_blank" title="セブンネットショッピング" >7net</a> </div> <div class="shoplinkkakakucom"> <a href="http://kakaku.com/" rel="nofollow" target="_blank" title="kakakucom" >価格.com</a> </div> </div> </div> </div> |
またアフィリエイトのアイコンは@tamkaiさん、@kazwoo215さん、@muusan31さんが作成されていますので、お好みに合わせて利用できます。
@tamkaiさん作 http://img.yomereba.com/tam_k_01.gif
@kazwoo215さん作 http://img.yomereba.com/kz_k_01.gif
@muusan31さん作 http://img.yomereba.com/mu32_k_01.gif
まとめ
いかがでしょう。
外部スタイルシートにするだけで、かなりソースも綺麗になって、いい感じでございます。
見た目上は要素に直接記述しても外部化しても変わりませんが、GoogleさんやYahooさんのような検索エンジンのロボットから見れば綺麗ソースの方がいいでしょうしね。
また外部スタイルシート化した方がスタイルシートを一箇所修正するだけで全てに適用できるので、後々のカスタマイズも楽チンです。
ご興味がある方は是非是非お試し下さいませ。
そういえばこの記事の読了時間が28分ってなってるけど、ソースを貼り付けると記事の長さの割に時間長くなっちゃうなぁ。仕方ないかぁ。。。
ではでは。。。
コンチクワブログのRSS ＆ ソーシャルページ