テキスト+CSSでamazon・楽天・yahooのアイコン風丸囲み文字

カエレバなどの商品紹介用のブログパーツでは、amazon・楽天・yahooなどのオンラインモールへのリンクの頭につけるアイコンはimgタグで表現されています。でも、サイトの表示を高速化するなら、imgタグを使わずにテキスト+CSSで表現したほうがいいのでやってみました。

アイコン風丸囲み文字

a・R・Y!

基本的な考え方

まず、ロゴの色合いを、Eye Dropperなどのツールを使いながら、amazon・楽天・yahooのページから基調となる色をピックアップするなどして決めます。

そして、テキストに角丸のスタイルを当てます。

最後に、なるべく丸囲みが円に近いキレイな形になるように、paddingを調整しました。

html

<p class="spans">
<span class="amazon_span">a</span>・<span class="rakuten_span">R</span>・<span class="yauc_span">Y!</span>
</p>

css

.spans{
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
.amazon_span{
    background-color:black;
    color:gold;
    -moz-border-radius:15.4px;
    -webkit-border-radius:15.4px;
    -khtml-border-radius:15.4px;
    border-radius:15.4px;
    font-size:12.6px;
    padding:1.4px 7px;
    font-weight:bold;
}
.rakuten_span{
    background-color:#be0000;
    color:#ffffff;
    -moz-border-radius:15.4px;
    -webkit-border-radius:15.4px;
    -khtml-border-radius:15.4px;
    border-radius:15.4px;
    font-size:12.6px;
    padding:1.4px 6.3px;
    font-weight:bold;
}
.yauc_span{
    background-color:#d9e0fd;
    color:#fe0032;
    border:0px solid black;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    -khtml-border-radius:14px;
    border-radius:14px;
    font-size:12.6px;
    padding:1.4px 4.2px;
    font-weight:bold;
}

リンクリストの頭にロゴ

• amazon
• 楽天
• YAHOOオークション
• YAHOOショッピング

:before擬似要素を使って、リストの先頭にロゴ風丸囲み文字を配置しています。

[う]カエレバ・ヨメレバ用のアイコンを作ってみた | うかブログを参考にしてうまくスタイルをあてることで、カエレバ等のブログパーツにもロゴ風丸囲み文字を導入することができると思います。

html

<ul class="affiliate_example">
<li class="amazon"><a href="#">amazon</a></li>
<li class="rakuten"><a href="#">楽天</a></li>
<li class="yauc"><a href="#">YAHOOオークション</a></li>
<li class="yshop"><a href="#">YAHOOショッピング</a></li>
</ul>

css

.affiliate_example{
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
ul.affiliate_example li{
    font-size: 14px;
        line-height:2;
    margin:1.4px 1.4px;
        font-weight:bold;
list-style:none;
}
ul.affiliate_example li:before{
    font-size:12.6px;
        margin-right:3.5px;
}

ul.affiliate_example .amazon:before{
    content:"a";
    background-color:black;
    color:gold;
    -moz-border-radius:15.4px;
    -webkit-border-radius:15.4px;
    -khtml-border-radius:15.4px;
    border-radius:15.4px;
    padding:1.4px 7px;
}
ul.affiliate_example .rakuten:before{
    content:"R";
    background-color:#be0000;
    color:#ffffff;
    -moz-border-radius:15.4px;
    -webkit-border-radius:15.4px;
    -khtml-border-radius:15.4px;
    border-radius:15.4px;
    padding:1.4px 6.3px;
}
ul.affiliate_example .yauc:before,
ul.affiliate_example .yshop:before{
    content:"Y!";
    background-color:#d9e0fd;
    color:#fe0032;
    border:0px solid black;
    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    -khtml-border-radius:14px;
    border-radius:14px;
    padding:1.4px 4.2px;
}

最後に

上記の内容は、あくまで私が「こうすればできた！！」というものなので、皆さんの環境ではこのままやってもうまくいかない場合もあります。また、ソース（特にCSS）は、本来もっとすっきり書けると思います…。