ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

カエレバをアイコンフォントを使ってカスタマイズ(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 , ,

  関連記事

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

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

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

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

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

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

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

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

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

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

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

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

Loading Facebook Comments ...

Message

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