ebay輸出のブログ / File exchangeの使い方 / 海外ブログ / 海外ネットショップ作り

Font Awesomeで画像いらずなebay テンプレートを目指す!

   

font-awesome-top

Awesome! 僕この言葉が好きです。その万能さ。とりあえずAwesome!使っとけーみたいな。

今回は、ebayテンプレートにもAwesomeに使える”Font-Awesome“の紹介です。

スポンサーリンク

Font-Awesomeで何ができるのか

ウェブフォントなのですが、見た目が「アイコン」になってるのがFont-Awesome。テキスト扱いできるので、CSSで色を変えたりサイズを変えたりとデザイン指定ができ、まさにAwesomeなフォントです。

サーバーでのホスティングも必要ありません。なぜならBootstrap CDNで呼び出せるから。今のウェブサイトでFont-Awesome使ってないところは見つからないぐらいネット上に浸透してます。

まー仕組みはそこそこに、ebayテンプレートにFont Awesomeを使う方法について紹介していくよ!

Font-Awesomeでフォントを変更してみる

さっそくアイコンを変更してみましょう!

サンプルとして当サイトの第4弾ebayテンプレートを使用します。すでにFont Awesome使ってるので、変更が分かりやすいから

テンプレートでFont Awesome使ってるのは、Information部分です。4-use-fontawesome

これを2ステップのコピペで変更してみましょう。

1、まずはFont Awesomeのサイトに行く。

font-awesome-top

>> Font Awesomeはこちら

Downloadって書いてますが、Downloadしなくても使えます。

つづいて、Iconsの所から、フォント一覧にいくicon-tab

ずらずらーっと並んでる中から好きなアイコンを選ぶ。選んだらアイコンクリックします。ポチawesome-icons

とりあえず意味もなくサッカーボールにしてみました。football

いろいろ情報がありますが、使うのはUnicodeです。

football2

サッカーボールのコードは、”f1e3″。これをコピーします。

2、テンプレートのソースにある記述を変更する

先ほどコピーしたユニコードをすでに指定しているコードと書き換えます。

第4弾テンプレートでは、ユニコードは97行目から118行目にいくつかそれらしいのがある。content:”~~”って部分。

とりあえず

content:”\f25a”;

って書いてある部分の\後ろを書き換え!

content:”\f1e3″;

はい、これで完了。

テンプレートをebayで見ると、サッカーボールマークが表れます。

change-football

やっべ、簡単じゃないですか?

簡単なのは、すでにFont Awesomeを使う準備がテンプレートに用意してあるから

上の方で「Bootstrap CDN」で呼び出せる!って書きましたが、自分のところに置いてないデータ(キャッシュ)を使うのが今回やってる方法です。

したがって、呼び出すための記述さえあれば、簡単にテンプレートでFont Awesomeが使用可能になるのです。

自分のテンプレートでFont Awesomeを使うには

自身のテンプレートにFont Awesomeを使う場合は、テンプレートにFont Awesomeを呼び出すための記述が必要です。以下の1行をコピペでOK!

現在のFont Awesomeバージョンに合わせてます。

以前、Google フォントを使ってテンプレートをもっとオリジナルにする方法で使ったやり方とほぼ同じです。

この1行をテンプレートの<head>と</head>の中に書き込めば、Font Awesomeが呼び出せるようになる。

あとはCSSの記述方法さえわかれば、どこにだって表示できるよ!

なぜなら Font だから! Wow, Awesome!!

見出しにFont AwesomeのCSSを当ててみる

せっかくサッカーボールのアイコンを見つけたので、スポーツ商品に向けたebayテンプレートを作ってみた。

昨日のチャンピオンズリーグ見ながら作ったので勢いだけのテンプレート。(#ダブル シンジおめでとう!)

foot-temp

デモページはこちら

※細かい修正してからテンプレート一覧に加えます。

さて、Font Awesomeを使っているの分かりますか?

foot-awesome

それぞれの見出しの前にサッカーボールのアイコンをつけてます。

Fontだからサイズ変更も色変更も自由自在

要素の前とか後ろとかにCSS指定するのは、:beforeや:afterを使います。

今回はこんな感じでHの見出しに対してサッカーボールアイコンをくっつけました。

positionとz-index使って、背景にどかーんとFont Awesomeも指定できるし、使い方次第でデザインの幅が広がるFont Awesomeでした。

どのテンプレートでも使用できると思うので、上記コードをコピペしてお使いください。

The following two tabs change content below.
海外行ったことないし英語もできないけど海外オークション ebay をエンジョイしてます。ebay 楽しいので、みんな始めたら良いと思ってる。続いてる理由のすべてがこのブログの中にあるよ。

 - ebay テンプレート