最新 ebay テンプレートを公開するよ。スマホ対応だよ 2017-2018 ver.1

内容が古くなっていたので、新しく作り直してエラーがでないタイプにしました。

スマホ対応の ebay テンプレート作ったので公開するよ！シンプルな中身なので誰でも使えます。

テーマは「誰でも改造できる ebay テンプレート」

書き方を~~2016年~~ 2017年からの最新内容にし、かつebayの求めるスマホ対応としたので今風になってると思う。もちろん最新ポリシーにも対応済み。良く言ってベーシックなタイプかと。

機能面と使い方を併せて紹介します。ではでは、まずはデザインについて

こんなテンプレートです

パソコンからebayのDescription を見た際、このように表示されます

あれ？と思った方も多いと思いますが、デザインのベースは日本人セラーの多くが使用中の「~~reproport.com~~」(閉鎖されたようです)さんで公開されているHTML。reproportさんのテンプレートは2009年に作られたもので、スマホ対応しておらず内容が古いです。

そこで、多くの人が取っつき易いよう見た目はそのままで、中身をebayに対応した最新タイプに改造してます。

最新のコードはこちら

更新日：2017年12月14日

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h1,h2,h3{font-family: 'Roboto Condensed', sans-serif;}
p,ul,li,ol{font-family: 'Open Sans', sans-serif;text-align: left;}
h1,h2,h3,p,ul,li,ol{color: #333;}

h1{
padding-left:1em;
}
h2,h3{
background: linear-gradient(transparent 70%, #a7d6ff 70%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
font-size:95%;
padding:0.3em 1em;
margin:10px 20px;
margin-top:2em;
}

h3:before {color: #555;font-size:.8em;margin-right:10px;font-family:"FontAwesome";}

.shiharai h3:before {content:"\f1ed";}
.hasso h3:before {content:"\f0d1";}
.torihiki h3:before {content:"\f27b";}
.tyuui h3:before {content:"\f071";}

p, .product_dec div{
margin-bottom:2em;
padding:0.5em 2em;
text-align:left;
}
article{
max-width:96%;
}

.dec_img{
margin: 0 auto;
max-width: 90%;
}

.dec_img img{
max-width:100%;
}

.dec_img img:not(:first-child){
display:none;
}
@media screen and (min-width: 768px) {
article{
margin:0 auto;
max-width:65%;
text-align: center;
}
h2,h3{
font-size:125%;
}
.dec_img img:not(:first-child){
display: inherit;
}
.dec_img{
display:inline-block;
}
.dec_img img{
max-width:45%;
margin:5px;
}
}
</style>
<article>
<h1>Item Title (Most Important)</h1>
<section class="product_dec">
<h2>Description</h2>
<div vocab="https://schema.org/" typeof="Product"><span property="description">
こちらに商品説明を入力してください。Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.Your item description will be placed here.</span>
</div>
</section>
<div class="dec_img">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" alt="bvb1">
</div>
<aside>
<div class="shiharai">
<h3>Payment</h3>
<p>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.</p>
</div>
<div class="hasso">
<h3>Shipping</h3>
<p>こちらに発送方法を入力してください。Your Shipping Details will be inserted here. </p>
</div>
<div class="torihiki">
<h3>Terms of Sale</h3>
<p>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here. </p>
</div>
<div class="tyuui">
<h3>International Buyers - Please Note: </h3>
<p>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.</p>
</div>
</aside></article>

---- 新しい内容はここまで ----

特徴は以下の通り

大きな特徴は３つ

タブレットで見ると、画像表示がなくなる
スマホで見ると、ebayルールに沿った商品説明だけになる
改造が比較的簡単

それぞれの詳細

2016年の内容から最新の内容へ変更しています。

１．タブレットで画像表示がなくなる

タブレットから出品ページを見た際に画像表示がなくなります。イメージですがタブレットからだとこんな表示になります。

まあ、この機能はさして重要ではないです。続いてスマホ

２．スマホで見ると商品説明だけになる

ここメイン機能です。まずスマホでItem Descriptionを見た場合このようになります。※イメージ

パソコンで見た時の商品説明部分だけが表示される仕組みです。赤い枠の部分だけがスマホで表示されます。

さらにスマホから商品を見て、Item specificsなどが並んでいる画面では「商品説明(赤枠)で書いた所から大事なところを250文字抜粋して表示」されるようになります。

これはebay最新ルールに基づいた設計

2016年春期セラーアップデートで、ebayのモバイル向け商品説明の最適化についてルールが設けられました。

モバイル向け商品説明の最適化（US, UK, DE, AU）

ざっと要約すると

今後はJavaScriptなどのアクティブコンテンツは出品の削除やブロックの対象となっていくルールで、Description内は最大800文字のテキストが推奨され、その中から250文字までを自動的に抽出してモバイル表示される仕組みとなります。

ポイントは、自動的に抽出される内容をHTMLで指定することもできる仕組みです。

このテンプレートではスマホの対応をJavaScriptを使わずにCSSで制御しています。さらに自動抽出される内容をこちら側でコントロールできるようHTMLで操作しています。

つまるところ、商品説明しっかり書けば売れるよ！ってことです。

重要なキーワードを商品説明に含めることでより検索に引っかかるし、バイヤーの視認性が上がって販売促進につながる可能性が高まるテンプレートです。

※メディアクエリ使ってるだけなので、iPhone 6 Plus より小さい物をスマホと定義してるだけの話

３．改造が比較的簡単にできる

今後のポリシーアップデートに備えて改造ができるよう作っています。ですので現時点での最適化だとお考えください。

簡単な改造例　１．テーマカラー(現在は黄色）の変更

※黄色を紫に変更したイメージ

ebayテンプレートの色変更する方法はこちら

２．スマホの表示方法を変更

スマホ画面で、商品説明にプラスして「International buyers」も表示させたい時のイメージ

スマホで見た時の表示方法を変更したい場合はこちら

改造方法については随時更新していきます。

メインの機能は以上です。続いて実際の中身について

中身(HTML)はこちら

【6月18日：67行目の一部を修正しています。不必要なpタグを除外しました。】

ルールが定まってきた現在は、Ver.2の方がエラー出ないのでおススメです！

Ver.2のオススメebayテンプレートはこちら

<!DOCTYPE html>
<html>
<head>
<title>TEST TITLE</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen" href="#">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
h1 {
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
}
.heavy {
background: #fff001;
color: #505050;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
#main h2{
font-family: 'Roboto Condensed', sans-serif;
color: #505050;
background: linear-gradient(transparent 60%, #fff001 10%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
#main_desc{
font-family: 'Open Sans', sans-serif;
margin-bottom:3em;
}
.dec_img{
margin:15px 120px;
}
section{
margin-bottom:2em;
}
ul {
font-family: 'Roboto Condensed', sans-serif;
line-height: 18px;
list-style-type: square;
color: #333;
text-align: left;
}
/* MEDIA QUERIES */
@media only screen and (max-width: 414px) {
section, h1 {
display: none;
}
.dec_img{
display: none;
}
}
@media only screen and (max-width: 767px) {
.dec_img{
display: none;
}
}
</style>
</head>
<body>
<article id="main">
<h1 class="heavy">TEST TITLE</h1>
<span class="dec_img">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" width="640px">
</span>
<div vocab="https://schema.org/" typeof="Product" id="main_desc"><span property="description">
こちらに商品説明を入力してください。Your item description will be placed here.</span></div>
<section class="shiharai"><h2>Payment</h2><p>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.
</p></section>
<section class="hasso"><h2>Shipping</h2><p>こちらに発送方法を入力してください。Your Shipping Details will be inserted here. 
</p></section>
<section class="torihiki"><h2>Terms of Sale
</h2><p>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here. </p></section>
<section class="watashi"><h2>About Us</h2><p>こちらに出品者概要を入力してください。Your About Us information will be inserted here. 
</p></section>
<section class="tyuui"><h2>
International Buyers - Please Note: </h2><ul><li>Import duties, taxes and charges are not included in the item price or shipping charges. These charges are the buyer’s responsibility. </li>
<li>Please check with your country’s customs office to determine what these additional costs will be prior to bidding/buying.</li>
<li>These charges are normally collected by the delivering freight (shipping) company or when you pick the item up - do not confuse them for additional shipping charges.  </li>
<li>We do not mark merchandise values below value or mark items as “gifts” - US and International government regulations prohibit such behavior. </li></ul></section>
</article>
</body>
</html>

これを全部コピーして使います。あなたが変更する場所は62行目から下ぐらいです。使い方を次の項目で紹介します

実際にebayでHTMLテンプレートを使う方法

紹介したテンプレートを実際にebayの出品ページで使っていきます。まずは、出品ページのItem descriptionまで行き、HTMLタブをクリック

HTMLをクリックしたら、先ほどコピーしたテンプレートの中身を貼り付けます。

こんな感じ。

あとは、HTMLタブからStandard タブに切り替えて、必要な所を出品する商品に沿って書き換えるだけの作業です。

赤枠のタブ切り替えした後に
緑枠の部分を任意の情報へ変更ください。

文字の編集方法は以上です。あとは中身にすでに入っている画像の編集が必要です。

画像のURLを変更する方法

テンプレートにはすでにこのbvb-arigato画像が入ってます。このままだと出品できないので、画像のURL変更を行います。

ちなみに Descriptionページに画像を組み込むことをebayは推奨していません。商品ページに画像は必要ないって方は、Standard タブ上で画像を選択して削除してください。もしくはテンプレート中身(HTML)の63行目から65行目を削除してください。それでオッケーです。

<span class="dec_img">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" width="640px">
</span>

画像掲載するよって方

商品ページに画像掲載する方は、HTMLタブからURLの変更をしていきます。変更するのは64行目の"＜img src "から始まる部分です。

<span class="dec_img">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" width="640px">
</span>

まずは商品画像のURLをご用意ください。自身で用意されたサーバーにアップした画像や、photobucketにアップした画像でよろしいかと思われます。

あとは、64行目のURLを書き換えるだけ

<span class="dec_img">
<img src="任意のURL" width="640px">
</span>

はい、以上です。

出品ページに画像を複数掲載したい方は、複数タグを記入したらOKです。

こんな感じになってればオッケー。

テンプレートの使い方は以上になります。

まとめ

いかがでしょうか。このテンプレートを使用した所で見た目の差別化にはつながりませんが、内容の差別化になります。

reproportさんのテンプレートを使用されている方であれば、すんなり導入できると思いますので、よかったら使ってみてくださいね。

販売促進の為にもちゃんと使ってほしいので意味不明な所があれば、問い合わせよりご連絡ください。

>> 出品画面でテンプレートを10個使い分ける方法はこちら

無料のebayテンプレート集をまとめました

テンプレートが増えてきたので、サイトで紹介してるebayテンプレートをまとめました。次のバナーからどうぞ

せどらーの歴史は罪深いのか「ブックオフ大学ぶらぶら学部」を読みました。

「ナッジ!?」を読んだ。

モラル・トライブズ（上）をちゃんと読むシリーズ１【下を読むための】

最新 ebay テンプレートを公開するよ。スマホ対応だよ 2017-2018 ver.1

こんなテンプレートです

最新のコードはこちら

大きな特徴は３つ

１．タブレットで画像表示がなくなる

２．スマホで見ると商品説明だけになる

これはebay最新ルールに基づいた設計

３．改造が比較的簡単にできる

簡単な改造例　１．テーマカラー(現在は黄色）の変更

２．スマホの表示方法を変更

中身(HTML)はこちら

実際にebayでHTMLテンプレートを使う方法

画像のURLを変更する方法

画像掲載するよって方

まとめ

無料のebayテンプレート集をまとめました

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

最新 ebay テンプレートを公開するよ。スマホ対応だよ 2017-2018 ver.1

こんなテンプレートです

最新のコードはこちら

大きな特徴は３つ

１．タブレットで画像表示がなくなる

２．スマホで見ると商品説明だけになる

これはebay最新ルールに基づいた設計

３．改造が比較的簡単にできる

簡単な改造例 １．テーマカラー(現在は黄色）の変更

２．スマホの表示方法を変更

中身(HTML)はこちら

実際にebayでHTMLテンプレートを使う方法

画像のURLを変更する方法

画像掲載するよって方

まとめ

無料のebayテンプレート集をまとめました

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

簡単な改造例　１．テーマカラー(現在は黄色）の変更