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

スマホ対応の3カラムebayテンプレート を公開するよ!第3弾

      2016/11/19

スマホ対応 ebay テンプレート第3弾。今回は3カラムです。項目が3段に分かれてるタイプ。

使う使わないは別として、ebayのHow to replace active contentで説明されてる方法で作ってみたので、パソコンからご覧の方はデモページ触って頂けると分かり易いかと思います。

というか前は「Best practices for replacing active content in eBay listings」という名目で紹介されていたebayページがいつの間にか、How to replace “active content” in eBay listings using HTML and CSS. にタイトル変わってる!(内容も)

>> ebayの active content 新ルールをご存じない方はこちらどうぞ

第3弾はこんなテンプレートです

今回はパソコンから見ると3カラムなテンプレート

【クリックでデモページ】bvb-3column

改造する前提なので相変わらずな見た目ですが、ebayページ開いた最初の画面サイズによってそれなりに環境適応します

>> 3カラムのebayテンプレート デモページ

パソコンからご覧の方は、デモページを開いてブラウザのサイズを動かしてみると変化がより分かり易いと思います。

スポンサーリンク

第3弾 テンプレートの内容

3column-ebay【ebay の How to guide: Implementing responsive design の紹介部分】

今回は、ebayが紹介してるResponsive LayoutのHTMLを使って、ちょこちょこと自分の好きなようにいじった内容です。

レスポンシブ動作のイメージとしては、パソコンからだと3カラム表示画面小さいパソコン and タブレットだと2カラム表示。そしてスマホで1カラムになる。

とりあえず使って頂けるという方は次のソースをどうぞ

HTML + CSS はこちら

もし実際に使用して頂ける方は、ebayのHTMLテンプレート入力するところにそのままコピペして商品に沿って内容をご変更ください。画像は必ずご変更ください。

>> ebayでHTMLテンプレートを使う方法はこちら

プレビュー押すと所々で違和感ある表示になるかもしれませんが、アップすると問題なく機能すると思います。イレギュラーあれば使用されないようお願いします!そして厚かましくもその事をお問い合わせより教えて頂ければ非常にありがたいです。

 

HTMLとCSSは難しくないので、基本的な内容は本が1冊あればバッチリですよ!

機能的なもの

レスポンシブの他にオリジナルで付け足したのは、次の2つ

  1. 見出し部分の容易な変更
  2. 画像表示の可変対応

見出しについて

Product DescriptionとかImagesとかPaymentとかの部分を見出しと言ってます。

【見出し部分】h2-midasi-henkou

この部分をコピペでいくつかのパターンに変更可能です

例えば、

おしゃれなアンダーライン

solid

おしゃれな〇付き

maru

おしゃれ?な花びら付き

sakura-border

 

実際におしゃれかどうかはさておき、見出しに変更を加えるだけでソレっぽくなりますのでおススメです。

画像表示の可変対応

henka-3colum

今までのVer.1テンプレートVer.2テンプレートは画像なしでもOKでしたが、今回は画像使用する方に向けたテンプレートです。3カラムはそれぞれ独立してますので、真ん中の所にそこそこの枚数の写真が掲載出来ると思います。<img~~を並べたらOK。

ただし、あまり枚数が多いと縦長になって見苦しくなります。縦長の写真だとなおさら。

なので、タブレットやファブレットクラスの端末であれば、画像は2枚だけの表示になります。そして、一般的なスマホだと画像は1枚だけになります。

その辺の枚数を調節する方法については、追記もしくは記事を別に書いて補足するかも。しないかも。

 

改造後のテンプレートをいくつか用意しました

このテンプレート使っていくつかアレンジしたパターン用意してみたので、使えそうなのがあればお試しください。

cool

シュッとした3カラムebayテンプレート

toy

やさしい感じの3カラムebayテンプレート

sakura

花びら付きの3カラムebayテンプレート

売れなくなった!とか言われても何もできませんが、なんか動きが変!などについてはこちらで確認しますので、お問合せよりご連絡頂くか、そっと使用するのを辞めていただくようお願い申し上げます。見る人の環境によって少し見た目が変わります。

売れるようになった!は大歓迎です。売れるようになることをただ願ってます。

Descriptionに画像は使用しないよ!という方はこちらもどうぞ

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

 - ebay テンプレート