ガジェニュー

~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 , ,

  関連記事

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

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

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

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

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

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

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

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

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

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

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

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

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

Loading Facebook Comments ...

Message

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