カエレバをアイコンフォントを使ってカスタマイズ（SVGファイルもあるよ）

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホからの表示がいまいちということもあり、下記の記事を参考にさせてもらってカスタマイズを進めることにしました。

ちょっとだけ、調整をして、ほとんどそのまま使わせて頂いております。ありがとうございます。

コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ ? Shufulife

また、今回は新しくアイコンフォントを自分で作成して追加するというのをやってみました。各ECサイトへのリンクの前にそれっぽいアイコンフォントを配置してユーザーさんに見やすい形にするのを心がけました。

で、どうしてアイコンフォントを入れようかなと思ったのかというと、ちょうど先ほど紹介したサイトの他の記事を見つけたからです。これです。

【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方 ? Shufulife

まぁ、使い方はこちらを見ていただければわかると思いますので今回はカエレバのカスタマイズ用に追加したコードだけ書きますね。「content」に書いてある記号に関しては変わりますので確認して入力してください。

/*アイコンフォント用
----------------------------------------------------*/

.shoplinkamazon:before{
	content: "\e600";
	font-family: "icomoon",sans-serif;
	padding:10px 4px;
	font-size:14px;

}

.shoplinkrakuten:before{
	content: "\e604";
	font-family: "icomoon",sans-serif;
	padding:10px 4px;
	color:#c20004;
	font-size:14px;
}

.shoplinkyahooAuc:before{
	content: "\e606";
	font-family: "icomoon",sans-serif;
	padding:10px 4px;
	font-size:14px;
}
	
.shoplinkyahoo:before {
	content: "\e607";
	font-family: "icomoon",sans-serif;
	padding:10px 4px;
	color:#FF0000;
	font-size:14px;

}

ショップへのリンクのクラスの前に「before」を使ってアイコンフォントを表示させています。「font-family」を設定しないと表示されなかったりとちょっとつまずきました。

こちらの設定をして、余白とか・色などを調整してもらえればOKです。

おまけとして今回作成したアイコンフォントのSVGファイルをまとめておきますので欲しい人はこちらからDLしてください。

※適当にそれっぽいものを「Inkskape」で作ってみただけなのでご利用は自己責任で。

ダウンロードしてもらって、「icomoon」でiconにしてもらうと同じように使えちゃいます。ちなみに中身は

内容物
・amazonっぽいもの
・Yahoo!っぽいもの
・楽天っぽいもの
・ヤフオクっぽいもの

以上の4点です。

で、実際に表示させるとこんな感じです。