カエレバなどの商品紹介用のブログパーツでは、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 c
