Blog

e-bay用テンプレート

2017.07.31 | Webデザイン | 37views


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>




このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。グロースハック実績ではGROWTH HACKER AWARDS 2017にて、スマートフォン賞・不動産賞を頂いています。

著書:4冊ほどPythonフレームワーク本をKindleで出しております。

LLC JIRIKI