新型コロナウイルス感染症の影響

日本郵便(郵便局)からの「国際郵便」は、現在大幅な遅延が発生しているのに加え、多くの国・地域で引受け停止措置が講じられています。

Due to the COVID-19 coronavirus
The international mail has been terrible delayed or stopped due to the reduction in airline flights.

https://www.post.japanpost.jp/int/information/index.html

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

2016年11月7日

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

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

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

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

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

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

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

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

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

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

HTML + CSS はこちら

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
section,aside,footer, ul, li,p{
font-family: 'Open Sans', sans-serif;
}
h1{
font-family: 'Roboto Condensed', sans-serif;}
h2{
text-align: center;
font-size:18px;
}
#pagewrap {
padding: 5px;
width: 960px;
margin: 5px auto;
}
header {
height: 100px;
padding: 0 15px;
}
#content {
width: 430px;
float: left;
padding: 5px 15px;
}
#middle {
width: 45%;
margin: 0px 0px 5px 5px;
float: right;
padding: 5px 15px;
}
#main {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
footer {
padding: 5px 15px;
background:#bebebe;
}
.dec_img img{
max-width:100%;
margin-bottom:10px;
box-shadow: 3px 3px 5px rgba(102,102,102,1);
-webkit-box-shadow: 3px 3px 5px rgba(102,102,102,1);
-moz-box-shadow: 3px 3px 5px rgba(102,102,102,1);
}
.accordion label {
font-family: 'Roboto Condensed', sans-serif;
display: block;
margin: 10px 0px;
padding: 1em;
background-color: #f6f6f6;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
color: #333;
font-size:20px;
}
#main input {
display: none;
}
#main input + label div {
opacity: 0;
padding: 0px 0px;
height: 0px;
font-weight: 100;
overflow: hidden;
}
#main input:checked + label div {
opacity: 1;
padding: 5px 0px;
height: auto;
font-weight: 500;
}
#main div {
transition: all 0.3s ease-out 0s;
}
label:before {
font-family:"FontAwesome";
content:"\f25a";
color:#57CC37;
font-size:20px;
margin-right:10px;
}
label#shiharai:before {
font-family:"FontAwesome";
content:"\f1ed";
}
label#hasso:before {
font-family:"FontAwesome";
content:"\f0d1";
}
label#tyuui:before {
font-family:"FontAwesome";
content:"\f071";
}
/* MEDIA QUERIES */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 45%;
}
#middle {
width: 43%;
margin: 0px 0px 5px 5px;
float: right;
}
header,
footer {
padding: 1% 4%;
}
}
@media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
}
@media screen and (max-width: 480px) {
header {
height: auto;
}
h1,h2 {
font-size: 1.3em;
}
.dec_img img:not(:first-child){
display:none;
}
}
header,
#content,
#middle,
#main {
margin-bottom: 5px;
}
</style>
<div id="pagewrap">
<header>
<h1>Item Title Item Title Item Title Item Title Item Title Item Title Item Title Ite</h1>
</header>
<section id="content"><h2>Product Description</h2>
<div vocab="https://schema.org/" typeof="Product"><span property="description">
こちらに商品説明を入力してください。This paragraph contains almost 800 characters of text to be displayed in the mobile item description. And the text in this paragraph through this sentence contains 250 characters, which is the amount we will display without any actions on your part. When you tag a paragraph with these HTML breaks, the content will be displayed to shoppers looking at your item.
This will allow the shopper to see the key information you want to display, without them having to click through to the complete description. If your complete description is 800 characters or less and uses basic HTML we will display the entire description without any action on your behalf the best practice is to keep it within 800 characters.</span></div>
</section>
<section id="middle">
<h2>Product Images</h2>
<div class="dec_img">
<img src="https://bvb-arigato.com/wp/ebay-template/images/lsh0012-004.jpg" alt="bvb1">
</div>
</section>
<aside id="main">
<h3>Information</h3>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1A" checked="">
<label for="accordion1A" id="shiharai">Payment (+ tap to open)<div>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1B">
<label for="accordion1B" id="hasso">Shipping (+ tap to open)<div>こちらに発送方法を入力してください。Your Shipping Details will be inserted here</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1C">
<label for="accordion1C">Terms of Sale (+ tap to open)<div>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1D">
<label for="accordion1D">About Us (+ tap to open)<div>こちらに出品者概要を入力してください。Your About Us information will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1E">
<label for="accordion1E" id="tyuui">
International Buyers - Please Note: (+ tap to open)<div>Import duties, taxes, and charges are not included in the item price or shipping cost. These charges are the buyer's responsibility. Please check with your country's customs office to determine what these additional costs will be prior to bidding or buying.</div>
</label>
</div>
</aside>
<footer>
<h3>Footer</h3>
<p>Footer text</p>
</footer>
</div>

一部変更:
写真の枠線を消して、影が入る部分を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 テンプレート

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

© 2022 前略、ヨッタさんへ