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

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

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

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

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

早速コードをコピペする(HTMLへ移動▼)

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

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

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

Information部分をタップするとそれぞれの説明が開きます。

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

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

HTML + CSS はこちら

一部変更:
写真の枠線を消して、影が入る部分をrgba指定しました。古いアンドロイド用。タップする部分に文言追加。

実際に使用して頂ける方は、ebayのHTMLテンプレート入力するところにそのままコピペして内容を商品に沿ってご変更ください。使用している画像は必ず変更してください(参考で使っている画像は保護のためリダイレクトかけてます)

参考

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

Copy押した後にコピーすると、そのままコードだけ正しくコピーできます。

copy

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

Action

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

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

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

ルール施行された現在は、アクティブコンテンツ入りテンプレートは"正しく表示されない"事で対応されました。

「See Description」と表示される

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

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

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

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

デモページで、実際に項目をタップやクリックして頂くと、それぞれの説明が開きます。アコーディオン動作と言われているCSS記述方法の一つです。

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

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

  1. スマホで1カラムへ変化
  2. 画像にファビュラスな影が入る
  3. 画像は1枚だけ使う仕様
  4. アイコンがウェブフォント(fontawesome)

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

改造例

実際にカスタマイズしてみました。samurai-blue日本代表 SAMURAI BLUE ebayテンプレート 【スマホ対応】 スポーツ用品や日本風の商品に向けて

アクティブコンテンツなくてもできる事は沢山あります。

コードをコピペする(HTMLへ移動▲)

ご使用にあたって

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

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

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

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

最終的には

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

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

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

僕のおススメはココナラです。
ココナラは外注にて最強!外注費500円からソフトやイラストを依頼してるよ


アンケート




あなたが知っている「ebay輸出ブログやサイト」を教えてもらえませんか?

自薦・他薦は問いません。リンク集が作りたいので、あまり知られていないけど良いサイトだよ!な所をぜひ

ニックネーム

URLやサイト名、良い所などを添えて頂ければ助かります。ついでに当サイトに対するご意見も募集中です



-ebay テンプレート

関連記事とスポンサーリンク

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