海外行ったことないけどebay輸出

ebay輸出のブログ / File exchangeの使い方 / Affinger4カスタマイズ / Amazonプライムビデオ

重要2017 Summer Seller Update で発表された新たな内容によると、2017年9月から写真/画像URLが使用不可となるようです。

したがって一部ご紹介しておりますebayテンプレートでの写真や画像URL挿入については、ドメインがebayに認められない限り使用できません。

また、商品について以外の余分な情報についても掲載を控えた方が良い可能性があります。以下はセラーアップデートの一部から引用した部分です。
Display your returns policy in the structured data fields

For the best buying experience, we recommend that you only include information about the product in the item description. Details about payment, shipping, or returns should be included in the structured data fields available for Business Policies.
余分情報については、Recommend アナウンスなので必ずではないと思いますが(制御できないだけ)、バイヤーを混乱させる独自ルールを設けるなというebayの通達だと思われます。

ebayテンプレートについての考え方はこちらで昨年書いた通りです。

参考:ユーザー規約の更新も行われており、細かく強制的な設定変更などされている可能性もあるかと思われますので、Site preferencesなどを今一度ご確認されることをおススメします。

Seller Hub > Overview > Shortcuts > Site preferences

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

投稿日:2016年11月23日 更新日:

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バージョンに合わせてます。(※httpsに変更しました)

前に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でした。

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

-ebay テンプレート

Copyright© 海外行ったことないけどebay輸出 , 2017 All Rights Reserved.