ガジェニュー

~iPhone・格安スマホとか~

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

      2016/01/21    後で読む

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

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

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

SPONSORED LINKS


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

まぁ、使い方はこちらを見ていただければわかると思いますので今回はカエレバのカスタマイズ用に追加したコードだけ書きますね。「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点です。

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

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

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

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

まとめ

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

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

てな感じで。

 - WordPress , ,

  関連記事

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

201509
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です