モバイルフレンドリーに対応したシンプルな無料 ebay テンプレート を公開します。
ソースコードをコピーしてebayのItem descriptionのところに張り付けたら使用可能です。
背景色などのアレンジも簡単にできるよう作りました。
HTMLソースはこちら
command
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1{
padding-left:1em;
color: #333333;
}
h2,h3{
border-left:4px solid #333333;
padding:1px 7px;
margin:10px;
margin-top:2em;
color: #333333;
}
p, .product_dec div{
margin-bottom:2em;
padding:0.5em 2em;
color: #333333;
}
article{
max-width:96%;
border:1px solid #333333;
background:#eeeeee;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-o-border-radius: 0.5em;
-ms-border-radius: 0.5em;
}
img{
max-width:100%;
}
@media screen and (min-width: 768px) {
article{
margin:0 auto;
max-width:65%;
}
}
</style>
<article>
<h1>Item Title Most Important</h1>
<section class="product_dec">
<h2>Item Description</h2>
<div vocab="https://schema.org/" typeof="Product"><span property="description">
こちらに商品説明を入力してください。Your item description will be placed here.</span>
</div>
</section>
<aside>
<h3>Payment</h3>
<p>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.</p>
<h3>Shipping</h3>
<p>こちらに発送方法を入力してください。Your Shipping Details will be inserted here. </p>
<h3>Terms of Sale</h3>
<p>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here. </p>
<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>
</aside>
</article>
すべてコピーし、ebayに貼り付けて使用します。念のためebayテンプレートの使い方も紹介しますね。
ebayでHTMLテンプレートを使用する方法
HTMLテンプレートをebayで使用する方法を紹介します。
１．まずテンプレートをコピーする。
▼ソースコードでマウスオンすると出てくる"Copy"が便利♪
２．コピーしたら、ebayのdescription入力するところに張り付けましょう。
▼HTMLと書いてあるタブのところです。※画像参照
３．コピペしたら、あとはStandardタブをクリックすれば、内容編集が可能になります。
ご自身の商品にそって項目を変更されてください。
「Payment や Shipping などの項目は必要ない」という場合は、そのまま編集画面から文字を削除されて大丈夫です。
大切なのは商品のタイトル入力と、Item Descriptionの入力なので、その二つは必ず入力されることをおススメします。当サイトで公開しているコードすべてで同じ事が言えます。
ebay モバイルフレンドリー対応済み！
モバイルフレンドリーチェッカーでもエラーはでませんので、過去の古いテンプレートを使用されている方にもおススメです。
アレンジポイント
アレンジを加えるいくつかの方法を紹介しますね。
まずは、背景色など色を変更する方法について。
テンプレートの背景カラーを変更する方法
色の変更は、HTML内のカラーコードをコピペ変更することで対応できます。
HTML内に #333333 という数字の羅列と、 #eeeeee という羅列が確認できるかと思います。シャープから始まる6ケタの数字や英字の羅列がHTMLのカラーコードです。
色によって決まったコードがありますので、それらをお好きな色のコードへ変更すればテンプレートの色が変わります。
参考例：水色の背景に変更してみる場合
例えば上記画像のような水色の背景にする場合は、水色のカラーコードである "#A9F5F2"を HTMLソース 23行目である backgounrd: という部分に指定します。
}
#article{
max-width:96%;
border:1px solid #333333;
background: #A9F5F2;
border-radius: 0.5em;こんな感じです。うん、これはくそダサいですね。
とりあえず、「 background 」が背景を操作してる部分です。
backgroundのほかにカラーコードが指定してあるのは、「color」と「border」という二ヵ所。
color : と書いてあるのは文字の色。文字の色はebayからでも変更できますね。htmlを直接変更しても、ebayから変更してもたいした違いはありません。
border : と書いてあるのは、Item DescriptionやPaymentなどの見出しの左側にある縦棒の記述です。（あと外枠の線も）
border の縦棒部分
borderの縦棒も色変更できます。例えば 背景を白 、見出しの縦棒を レッド にしてみる。
まず背景を白にする場合は、backgroundに 白のカラーコードである #FFFFFF を指定します。
続いて見出しの縦棒を変更するのは、HTMLソースの9行目 border-left : と書いてある所のコードです。#FF0000 の赤に変更してみます。
h2,h3{
border-left:4px solid #FF0000;
padding:1px 7px;
margin:10px;
margin-top:2em;
color: #333333;
}赤コードに変更すると次の画像にように見た目が変わります。
こんな感じで色変更が可能です。他にもカラーコードはたくさんあります。以下のサイトなどで調べる事ができます。
この流れで、見出しの縦棒をアンダーラインに変更してみましょう。
見出しの縦棒を変更する方法
縦棒のラインを上の画像のようなアンダーラインに変更するのも簡単です。
見出しのラインはHTMLソース 9行目 border-left : と書いてある所で指定しています。
これをアンダーラインにする場合は「 border-bottom: 」に変更したらOK
h2,h3{
border-bottom: 1px solid #333333;
padding:1px 7px;
margin:10px;こんな感じ。
border-left を border-bottom へ
シュッとしたラインに変化します。同時に指定してある数字も変更する事で、ラインの太さが変わることもお分かりいただけるでしょうか。
いろんな場所の数字もいじってみてください。いろいろ変化します。どうせいじるなら大胆にいじった方が変化が分かりやすいです。
HTMLは けして難しいものではない事が伝わってれば嬉しいです。
基本をマスターしたらプロに作ってもらう際にもスムーズに事が進みますよ！
ということでシンプルでモバイルフレンドリーな ebay テンプレート の紹介でした。ぜひ使ってみてくださいね。
その他の ebay テンプレート も公開中！
