2017.7.31
e-bay用のレスポンシブ(PC・スマホ対応)のテンプレートです。
無料でダウンロードしてお使いいただけます。
必要な箇所を修正し、ご利用ください。
http://jiriki.co.jp/download/index.html
<meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style type="text/css"> .main-container { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); overflow: hidden; width: 100%; } .img img { width: 100%; margin-bottom: 10px; } section { margin: 40px auto; } .row { margin: 20px auto; } h3.title { border-left: 8px solid #dd3300; padding-left: 10px; } .feature-icon-large i { display: block; height: 104px; width: 104px; border: 2px solid #e74c3c; border-radius: 50%; text-align: center; color: #e74c3c; font-size: 40px; padding-top: 31px; margin: 0 auto; margin-bottom: 32px; } .center { text-align: center; } .icon-documents:before { content: "\e006"; } .icon-basket:before { content: "\e027"; } .icon-gift:before { content: "\e017"; } .icon-caution:before { content: "\e03d"; } h1{ position: relative; display: inline-block; padding: 0 55px; } h1:before, h1:after{ content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: black; } h1:before {left:0;} h1:after {right: 0;} h3{ position: relative; padding: 0.25em 0; } h3:after { content: ""; display: block; height: 4px; background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent); background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent); background: linear-gradient(to right, rgb(230, 90, 90), transparent); } h4{ position: relative; border-top: solid 2px #e74c3c; border-bottom: solid 2px #e74c3c; background: #f4f4f4; line-height: 1.4; padding: 0.4em 0.5em; margin: 2em 0 0.5em; } h4:after {/*タブ*/ position: absolute; font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif; content: '\f0a7\ Return'; background: #e74c3c; color: #fff; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 5px 7px 3px; font-size: 0.7em; line-height: 1; letter-spacing: 0.05em; } </style> <div class="main-container"> <section> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center"> <h1>タイトルを入れます</h1> <p class="lead"> 商品説明を書きます </p> </div> </div> <!-- 商品画像1+説明 商品3つ並び --> <div class="row"> <div class="col-sm-7 img"> <img alt="" src="https://placehold.jp/650x450.png"> </div> <div class="col-sm-5 img"> <h3>写真のメインの説明タイトル</h3> <p> 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア 商品説明エリア </p> </div> </div> <div class="row"> <div class="col-sm-4 img"> <img alt="" src="https://placehold.jp/350x250.png"> </div> <div class="col-sm-4 img"> <img alt="" src="https://placehold.jp/350x250.png"> </div> <div class="col-sm-4 img"> <img alt="" src="https://placehold.jp/350x250.png"> </div> </div> <!-- ここまで --> </div> </section> <section class="duplicatable-content"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 center"> <div class="feature feature-icon-large"> <i class="fa fa-file-text" aria-hidden="true"></i> <h5>Description</h5> <p>商品説明分を記載します</p> </div> </div> <div class="col-md-6 col-sm-6 center"> <div class="feature feature-icon-large"> <i class="fa fa-credit-card-alt" aria-hidden="true"></i> <h5>Payment</h5> <p>支払い方法を記載します</p> </div> </div> <div class="col-md-6 col-sm-6 center"> <div class="feature feature-icon-large"> <i class="fa fa-truck" aria-hidden="true"></i> <h5>Shipping</h5> <p>発送方法を記載します</p> </div> </div> <div class="col-md-6 col-sm-6 center"> <div class="feature feature-icon-large"> <i class="fa fa-check-square" aria-hidden="true"></i> <h5>Term of Sale</h5> <p>取引事項を記載します</p> </div> </div> </div> <h4>返品規定を書く</h4> </div> </section> <section> <div class="container"> <div class="row clearfix"> <div class="col-sm-12 col-xs-12 pull-left"> <h3 class="title">International Buyers - Please Note:<br></h3> <p class="lead">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> </div> </div> </section> </div>