カエレバ・ヨメレバ用のアイコンを作ってみた

カエレバ、ヨメレバはすっごく便利、うかです、こんにちわ。

商品や書籍の紹介ツールとして使わせてもらってる「カエレバ」と「ヨメレバ」なんですが、各ショップのアイコン使用について、ちょっと問題が発生したようです。

ヨメレバ・カエレバで「ショップアイコン」のご利用について
ユーザーさんから連絡によると、カエレバのパーツを設置済みのブログを、アマゾンへ提携申請を出したところ、アマゾンのアイコンは商標なので素材として利用してはいけないとの指摘を受けて、手動でアイコンを外したところ、OKになったそうです。

ショップのリンクにアイコンが付くことで視認性が良くなるし、いいね!とか思ってたんですが、商標云々となるとこのままにはしておけない感じですよねー。(16×16のアイコンくらい、むしろ「使ってください!」と店側が用意してもいいじゃね?とか思ったり思わなかったりしつつ…)

というわけで、カエレバ、ヨメレバで使うための各ショップのアイコンを自作してみました。

カエレバ・ヨメレバ用アイコン

amazon

amazon

楽天市場

楽天

Yahoo!ショッピング/Yahoo!オークション

Yahoo!

セブンネットショッピング

セブンネットショッピング

価格.com

価格.com

ベルメゾン

ベルメゾン

セシール

セシール

bk1

bk1

ブックオフオンライン

ブックオフオンライン

e-hon

e-hon

図書館

図書館

CSSの指定方法

これらのiconを表示させるには、CSSでこんな感じで指定してあげます。

.kaereba-link1,
.booklink-link2 {
background-position:left;
background-repeat:no-repeat;
}
.shoplinkamazon {
background-image:url('http://dl.dropbox.com/u/6607001/kaereba/amazon.png');
}
.shoplinkrakuten {
background-image:url('http://dl.dropbox.com/u/6607001/kaereba/yahoo.png');
}
.shoplinkyahoo {
background-image:url('http://dl.dropbox.com/u/6607001/kaereba/rakuten.png');
}

「.shoplink****」は表示させるショップリンクに応じて増やしてみてください。(カエレバ・ヨメレバのソースを見ればすぐに分かります。)

本家では css spriteを使って1枚の画像として表示していたアイコン群ですが、ちょっと使い勝手が悪いので、私は個別にアイコンを作ってみました。

上にURLを記載しているとおり、ご自由に使っていただいてかまいませんし、本家同様1枚の画像にまとめてcss spriteで表示させても構いません。

ウチは近々リニューアルを予定してるので、そのタイミングで上記アイコンを使うようにしたいと思います。