ebay輸出のことや、Amazonプライムビデオのおすすめ作品などをヨッタさんへ教えるブログ

前略、ヨッタさんへ

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

このページは に更新されました。

3column-ebay

スマホ対応 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. にタイトル変わってる!(内容も)

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

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

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

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

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

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

HTML + CSS はこちら

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

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

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

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

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

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

レスポンシブ動作のイメージとしては、パソコンからだと3カラム表示画面小さいパソコン and タブレットだと2カラム表示。そしてスマホで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枚だけになります。

画像を増やす方法

ここに本文を記述画像はHTMLコード145~150行目で操作しています。

用意されたURLを146行目の<img src="〇〇">部分に変更してください。〇〇を任意のURLへ

4枚以上画像をプラスする場合は、<img srcのコードごと増やしたらOKです。

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

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

cool

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

toy

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

sakura

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

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

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

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

-ebay テンプレート

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.