スマホ対応の3カラムebayテンプレートを公開するよ！第３弾

スマホ対応 ebay テンプレート第３弾。今回は3カラムです。項目が３段に分かれてるタイプ。

使う使わないは別として、ebayのHow to replace active contentで説明されてる方法で作ってみたので、パソコンからご覧の方はデモページ触って頂けると分かり易いかと思います。

というか前は「Best practices for replacing active content in eBay listings」という名目で紹介されていたebayページがいつの間にか、How to replace "active content" in eBay listings using HTML and CSS. にタイトル変わってる！（内容も）

k関連記事

ebayの active content 新ルールをについてはこちらどうぞ

第３弾はこんなテンプレートです

今回はパソコンから見ると３カラムなテンプレート

【クリックでデモページ】

改造する前提なので相変わらずな見た目ですが、ebayページ開いた最初の画面サイズによってそれなりに環境適応します。

>> 3カラムのebayテンプレートデモページ

パソコンからご覧の方は、デモページを開いてブラウザのサイズを動かしてみると変化がより分かり易いと思います。

HTML + CSS はこちら

<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">
<style>
section,aside,footer, ul, li{
font-family: 'Open Sans', sans-serif;
}

h2{
font-family: 'Roboto Condensed', sans-serif;
padding: .15em .85em;
color: #333;
background-color: #f6f6f6;
border: 1px solid #ccc;
border-radius: 4px;
}

#pagewrap {
padding: 5px;
width: 960px;
margin: 5px auto;
}

header {
height: 100px;
padding: 0 15px;
}

#content {
width: 290px;
float: left;
padding: 5px 15px;
}

#middle {
width: 294px;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}

#main {
width: 270px;
padding: 5px 15px;
float: left;
}

footer {
clear: both;
padding: 5px 15px;
background:#bebebe;
}

.dec_img img{
border: 1px solid #ccc;
width:100%;
}

/* MEDIA QUERIES */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 45%;
}
#middle {
width: 43%;
margin: 0px 0px 5px 5px;
float: right;
}
#main {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
header,
footer {
padding: 1% 4%;
}
.dec_img img{
border: 1px solid #ccc;
max-width:100%;
}
.dec_img img:nth-child(n+3){
display:none;
}
}


@media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
#main {
width: auto;
float: none;
}
}


@media screen and (max-width: 480px) {
header {
height: auto;
}
h1,h2 {
font-size: 1.5em;
}
#main {
display: none;
}
.dec_img img:not(:first-child){
display:none;
}
}

header,
#content,
#middle,
#main {
margin-bottom: 5px;
}
</style>
<div id="pagewrap">

<header>
<h1>Item TitleItem TitleItem TitleItem TitleItem TitleItem TitleItem TitleItem Title</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/wp-content/uploads/2016/06/bvb-temp.png" alt="bvb1">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" alt="bvb2">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" alt="bvb3">
<img src="https://bvb-arigato.com/wp/wp-content/uploads/2016/06/bvb-temp.png" alt="bvb4">
</div>
</section>
<aside id="main">
<h2>Payment</h2><p>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.
</p>
<h2>Shipping</h2><p>こちらに発送方法を入力してください。Your Shipping Details will be inserted here
</p>
<h2>Terms of Sale</h2><p>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here. </p>
<h2>About Us</h2><p>こちらに出品者概要を入力してください。Your About Us information will be inserted here. 
</p>
<h2>
International Buyers - Please Note: </h2><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>
<footer>
<h3>Footer</h3>
<p>Footer text</p>
</footer>
</div>

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

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

HTMLとCSSは難しくないので、基本的な内容は本が１冊あればバッチリですよ！

いちばんやさしいHTML5&CSS3の教本人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)