カエレバをアイコンフォントを使ってカスタマイズ（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点です。

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

ヤガイ おやつカルパス 50本

posted with カエレバ

ヤガイ

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

ヤフオク!で探す

カルパスって美味しいよね！

まぁ、それは置いておいて。「before」の要素はかなり便利ですね。しっかりとこの辺りをマスターしていつか使いこなせるようになりたい。。そして、それっぽいフォントとかで適当に作ってみたけど以外と完成度が高くて満足しています。

必要な方はDLしてみてください。

まとめ

いやーほんとにSTINGER5のカスタマイズはいっぱいあるので無知な自分にもいじりやすくて大助かりです。（今回あんま関係ないどね。）

アイコンフォントは画像と違って軽いのでちょっとづつ入れ替えていこうかなと思います。それにしても、どんな仕組みでアイコンフォントに変換してるのかがよくわからないけど凄い便利ですね。ちょっとづつ勉強していきます。

てな感じで。