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

Active content を使わずにActiveなebayテンプレート(アコーディオン編)

      2016/11/19

Accordion

アコーディオンっぽく動くebayテンプレートを作ってみました。

ebayがOKとしているHTMLとCSSのみで作ってるので、今後のポリシーにも今のところ対応してます。

ベーシックなタイプなのでどんな商品にも使えるのではないでしょうか。

アコーディオンっぽく動くebayテンプレートはこんな見た目

今回のテーマはebayが今後アウトにしてるアクティブコンテンツを使わないけど、ちょっと動的に見えるebayテンプレートです。

【クリックでデモページへ】accordion-temp

>> アコーディオン ebayテンプレートのデモページはこちら

Information部分をタップすると動きが分かり易いです。

さらにスマホにも対応してるので、パソコンからご覧の方はデモページをブラウザのサイズ変化させるとスマホ対応の内容が分かります。

コレは最高だぜ!すぐ使いたいぜ!という方は、次のソースをどうぞ

スポンサーリンク

HTML + CSS はこちら

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

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

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

テンプレートの機能や内容について

Action

ebayは来年からDescriptionで使用するテンプレートやebay Storeのデザインへ Active content(JavaScript, Flash, plug-ins, form )の使用を許可しないと発表しています。

>> アクティブコンテンツの禁止ルールについてはこちらどうぞ

画像が変化したり、メニューがタブ動作したりするアクティブなテンプレートの事です。

そんなわけで今回のテンプレートを作ってみました。

Active content なしで”動く”テンプレートの機能と内容

ebayは HTMLとCSSはオッケー♪と言ってるので、このテンプレートは動きっぽい部分をCSSにしてます。

テンプレートのInformation部分のことcss-action

デモページで、実際に項目をタップやクリックして頂くと、それぞれの説明がアコーディオンっぽく表示されると思います。

それだけと言えばそれだけなんですが、そういう事です。応用すればもっといろんな事もできるよという話。

アコーディオンの動き以外の機能、仕様

  1. スマホで1カラムへ変化します。
  2. 画像におしゃれな影が入ります
  3. 画像は1枚だけ使うことをおススメ。以上でも以下でもない1枚
  4. アイコンをウェブフォントにした

ベースで使えるようシンプルにしてますので、適当に改造されるともっとそれらしくなるかもしれません。

ご使用にあたって

暇を持て余した素人が作ってます。

ご使用は自己責任をお願いするとともに、このテンプレートを用いたことで売れなくなったなどは受け付けません。もっと頑張ってください。なるべくルールに沿って売れるように作ってます。

細かな環境考慮はしておりませんので、見る人によって正常に動作しない場合も考えられます。何かお気づきの点はお問い合せよりご連絡頂ければ対応するかもしれません。

ようは”かもしれません”テンプレートをご了承くださいませ。

最終的には

いつも書いてますけど、オリジナルを目指す方は、最終的にはプロにテンプレートを作ってもらってくださいね。

その際は、ルールを把握することや、自身がある程度のHTMLやCSSに対する知識を持っておく必要があります。知識は1冊の本があれば理解できます。

今回のebayが言ってるルール把握についてはこちらをどうぞ

テンプレートを安く作るには

ココナラ ならかなり安く作れると思います。


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

 - ebay テンプレート