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

Google フォントでebayテンプレートをよりオリジナルに仕上げる方法

      2016/11/20

Typography

前回、ebay上の編集で12種類のフォントを選ぶことを紹介しました。今回はウェブフォントを使って、もっとオリジナルなebayテンプレートを作る方法についてです

ウェブフォントは Google Fonts を使います。

スポンサーリンク

Google Fonts を ebayテンプレートで使う方法

Web

細かい仕組みなどはさておき、Google Fontsは名前の通りGoogleが提供しているウェブフォントです。800種類以上のフォントから自由に選んで、テンプレートに使用することができます。

ebay上では12種類のみだったので、800種類あれば更にオリジナル化できる事は想像するに容易いと思います。

【 変更手順の大まかな流れ 】

  1. テンプレートでGoogle fontsを使うと宣言し、リンクする記述をコピペ
  2. 使いたい部分にCSSの記述をコピペ

基本、コピペで大丈夫です。

というか、当サイトのテンプレートではGoogleフォントをすでに使用中なのです。

例えば、第4弾ebayテンプレートで使ってるウェブフォントは、超ベーシックな “Open Sans” と、”Roboto Condensed” という2種類のフォント使ってる。

具体的には、テンプレートの4と5行目がGoogle fontsを呼び出す記述です。

【 3-4行目詳細↓ 】

この記述がテンプレート内に入っていれば、あとは使いたい場所にCSSを当てるだけで、テンプレートのデザインにフォントが反映されます。

簡単なのでやってみますね。第4弾テンプレートのソースはこちら

フォント:Roboto Condensed から Coming Soon に変更してみる

standard-tab【デフォ:Roboto Condensedを使ったタイトル】

現在タイトルには、Roboto Condensedというフォントが適用されていますが、これを Coming Soon という手書き風なフォントへ変更してみる。

タイトルに「Item Title Item Title ~~」と並んでるだけだと変化が分かりづらかったので、「Ninja Star “Shuriken” Japanese traditional Buki NARUTO」にタイトルをまずは変更してみました。

ninjastar-font-roboto

① Coming Soonを使うためにGoogleから呼び出すためのリンクを加える(変更する)

上記ソースの 4行目の記述を以下に変更する。

 

これでComing Soonを呼び出す準備が完了。

② Coming Soonを使いたい部分へCSSを適用する

呼び出しリンクのコピペができたら、次はCSSで Roboto Condensed を使っていた部分を Coming Soon に変更します。

テンプレートの12行目がタイトル部分のCSS記述です。なんとなく Robotoが指定されてる事がお分かりいただけると思います。

 

11~12行目がRobotoを適用している部分なので、12行目を以下の内容へコピペ変更!

これでオッケー!

するとebayのプレビューでこのように変化したことが確認できます。
タイトル文も変更しました

comingsoon

 

テンプレートをコピペ変更でフォントが変わりました。

いくつかGoogle fonts使ってタイトル変えてみた

いくつか特徴的なものをピックアップし、変更してみました。

タイトルはすべて「Ninja Star “Shuriken” Japanese traditional Buki NARUTO」です。

Pinyon Script

pinyonscript

 

Sigmar One

sigmarone

 

Tillana

tillana

 

Bungee Shade

bungeeshade

 

Cabin Sketch

cabinsketch

 

Monoton

monoton


 

と、まあこんな感じです。

タイトルのフォントが変わるだけでも印象が異なってくるのがお分かりいただけますでしょうか。

今回はタイトル部分だけの変更でしたが、全体を変更するともっと印象が変わりますし、色を変えるだけでも違ってきますよ。

 

自身のオリジナルショップebayテンプレートには、是非ウェブフォントを使ってみてはいかがでしょう

まとめ

  1. Google Fonts から好きなフォントを選ぶ
  2. テンプレートでフォントを呼び出すための記述をコピペ
  3. テンプレート内でフォントを適用させるためのCSS記述をコピペ

以上

フォントはこちらから選べます。

https://fonts.google.com/

当サイトのオリジナルテンプレートであれば、「font-family:」から始まる部分をそれぞれのCSS内容へ変更すると、対応する部分の書体が変化すると思います。

コピペで使えるebayテンプレート集はこちらから


すべて無料で使えるテンプレートです。

ショップオリジナルとまではいきませんが、よろしければ。

余談:ブランドイメージとフォントについて

フォントにこだわりある有名企業の一つに、化粧品メーカーとしてトップブランドを確立している資生堂 ( SHISEIDO )があります。

資生堂のフォントは、自社のオリジナルフォントです。最初の “S” を見ただけでも SHISEIDOのブランドが浮かぶぐらいの美しい唯一無二の書体。

ebay含めてEコマースはまだまだ読み物の枠にあります。フォントは読み手へ与える印象が大きい部分なので、せっかくならばこだわっていきましょう!

長期的にブランドイメージを作りたいセラーさんは、こだわって損することのない部分ではないでしょうか。

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

 - ebay テンプレート