カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)
2016/01/21 後で読む
以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホからの表示がいまいちということもあり、下記の記事を参考にさせてもらってカスタマイズを進めることにしました。
ちょっとだけ、調整をして、ほとんどそのまま使わせて頂いております。ありがとうございます。
また、今回は新しくアイコンフォントを自分で作成して追加するというのをやってみました。各ECサイトへのリンクの前にそれっぽいアイコンフォントを配置してユーザーさんに見やすい形にするのを心がけました。
で、どうしてアイコンフォントを入れようかなと思ったのかというと、ちょうど先ほど紹介したサイトの他の記事を見つけたからです。これです。
まぁ、使い方はこちらを見ていただければわかると思いますので今回はカエレバのカスタマイズ用に追加したコードだけ書きますね。「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のカスタマイズはいっぱいあるので無知な自分にもいじりやすくて大助かりです。(今回あんま関係ないどね。)
アイコンフォントは画像と違って軽いのでちょっとづつ入れ替えていこうかなと思います。それにしても、どんな仕組みでアイコンフォントに変換してるのかがよくわからないけど凄い便利ですね。ちょっとづつ勉強していきます。
てな感じで。
関連記事
-
-
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ
STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …
-
-
【アクセス数報告】2014年9月のPVと収益を公開します
今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …
-
-
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】
2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …
-
-
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか
最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …
-
-
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ
今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …
-
-
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件
ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …
-
-
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか
早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …
-
-
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法
今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …
-
-
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする
「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …
-
-
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置
なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …