ネットショップ運営担当者のブログ

au payマーケットplusテンプレート取扱説明書!ファイルの作成、アップロードまで

このページは当サイトが販売している
au payマーケットplus用トップページレスポンシブテンプレートの説明書になります

au payマーケットplus用トップページのテンプレート作りました!初心者でも簡単

この記事では、本テンプレートの初期設定の方法などを解説します

始めに

テンプレート商品内容は以下になります

  1. index.html - au payマーケット店舗トップページのhtmlファイルになります
  2. css - それに不対するcssファイルです
  3. 画像データ ー 仮で入れている画像データになります
  4. 説明書テキストファイル - 初期設定や使い方の説明書のURL、注意事項が書いております

このページでは
主に本商品内のファイルを
店舗用に書き換えたり、記入をして完成させる手順の説明になります

まず、設定する前に
準備としてトップページに必要な画像がない場合は用意しておくといいでしょう
(バナーや店舗ロゴなどです)

準備が整いましたら
本商品内の
index.html
をコーディングできるソフト(htmlファイルを編集できるソフト)で開きます

au Payマーケットのリンク、画像URLについて

au PAY マーケットへのリンクであっても、フルパスで指定されますと外部リンクエラーが
出ますのでお気を付けください

リンク

商品ページ   /item/ロットナンバー

トップページ /user/会員番号

カテゴリーページ /user/会員番号/list/?categ_id=カテゴリー番号

画像URL

Wow!manager の中の 画像管理 に入れた画像のURL
*管理画面(画像管理)からもURL確認できます
https://image.wowma.jp/会員番号/ext_cabinet/ファルダ名/画像ファイル名.jpg

plusのサーバ内の画像を使う場合の画像URL
images/画像ファイル名.png

head部分の設定

head部分(6行目辺り)の設定をします

  <meta charset="utf-8">
  <meta name="description" content="メタディスクリプションを入力してください">
  <meta name="keywords" content="***,***,***,***,***,***">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>タイトルを入力してください</title>
  1. メタディスクリプション
    content=”メタディスクリプションを入力してください”の箇所にショップの説明を入れてください
  2. メタキーワード
    content=”***,***,***,***,***,***”>の箇所にショップのキーワードを入れてください
  3. タイトル
    <title>タイトルを入力してください</title>の箇所にショップ名を入れてください

ヘッダー部分の設定

ヘッダー部分の設定をします

店舗ロゴ部分

店舗ロゴ部分(28行目辺り)

<div class="logo">
<a href="/user/******" class="" title=""><img src="images/logo_240_120.png" alt="logo"></a>
</div>
  1. ショップのロゴマークを用意します。背景がホワイトは透明が望ましいです
    また、240×120pxくらいの大きさ(縦横比率)を推奨します。
    画像をテンプレート内のimagesのフォルダ内にアップします(上記画像URLの場合)
  2. 上記/user/******の部分に会員番号を入れます
    logo_240_120.pngのところに画像URL(画像ファイル名)を入れます

最上部テキストエリアの設定

最上部テキストエリア(31行目辺り)

<p class="text-tax">3,980円以上お買物で送料無料</p>

<p class=”text-right”>3980円以上で送料無料</p>
最上部にテキストを入れることができます。送料以外の事でも何でも大丈夫です

トップメニュー

トップメニュー(33行目辺り)

<ul id="nav">
        <li><a href="/bep/m/dm40?user=******">メルマガ</a></li>
<li><a href="/bep/m/kmem?user=******">会社概要</a></li>
<li><a href="/shops/******/reviews?user=******/">お店の評価</a></li>
 </ul>

上記******の箇所に会員番号を入れます

 

ヘッダーのカテゴリー

ヘッダーのカテゴリー(66行目辺り)

<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ5</a>
</li>
</ul>
</div>

カテゴリーを5つ入れられます
カテゴリ名とhref=”#”にカテゴリのURLを入れます
カテゴリのURLは下記のように入れます(51番に振られたカテゴリー)
/user/会員番号/list/?categ_id=51

商品ページの下の方にカテゴリー一覧がありますので
そこからURLをお調べください

カテゴリではなく、新作やタイムセールなど特集などをいれても結構です

検索ボックス、買い物かごの設定

検索ボックス、買い物かごの設定をします

検索ボックスの設定

検索ボックスの設定箇所は3か所あります

  1. 41行目辺り
  2. 96行目辺り
  3. 313行目辺り

3か所とも同じ様に設定してください

<form id="search-form-upper" action="/bep/m/klist2" method="get" accept-charset="Shift_JIS">
<input type="hidden" name="e_scope" value="O" />
      <input type="hidden" name="user" value="******" />
     <input type="text" name="keyword" value="キーワードを入力" class="searchbox_input_side" />
<button type="submit" class="search-waku"><img src="images/search.png" class="searchbox_btn" alt="" width="25" height="25" /></button>
</form>

value=”******”
******に会員番号を入れます

メインエリアの設定

メインエリアの設定をします。

スライダー部分

スライダー部分(112行目辺り)

<div class="col-xs-12 col-sm-12 col-md-10 col-lg-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" background-color="#333">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="First slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="Second slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="Third slide"></a>
</div>
</div>

デフォルトではバナーを3つ入れられます
*どんな縦横比でもはいりますが700×400pxを推奨します

バナーは増やしたり減らしたりすることができますが、その際
<li data-target=”#carouselExampleIndicators” data-slide-to=”2″></li>
この部分もバナーと同じ数にしてください

バナーの画像URL(アップロードする必要あり)、リンクURLをそれぞれ入れる必要があります
URLの入れ方が分からない場合は前述した「au Payマーケットのリンク、画像URLについて」
をお読みください

お店の説明部分

お店の説明部分(148行目辺り)を設定します

<div id="store-description">
<h1>*********について</h1>
<br>
<p>お店の説明お店の説明お店の説明お店の説明お店の説明お店の説明</p>
<p>お店の説明お店の説明お店の説明お店の説明お店の説明お店の説明</p>
<p>お店の説明お店の説明お店の説明お店の説明お店の説明お店の説明</p>
</div>

どんなお店なのか、お店の説明を書くことができます

<h1>*********について</h1>
*********の部分にショップ名を入れます

お店の説明の部分にお店の説明(どんなお店なのか、どんな商品を売っているのか)を書きます

新商品

新商品エリア(159行目辺り)

<div class="col-6 col-sm-6 col-md-6 col-lg-3 ">
              <div class="new-item">
                <div class="item-image">
                  <a href="#"><img src="images/item_640_640.jpg" alt="new-item1"></a>
                </div>
                <p class="new-tag">NEW</p>
                <a href="#"><p class="item-name">商品名商品名商品名商品名</p></a>
                <p class="price">3,000円</p>
              </div>
            </div>

デフォルトでは新作商品を4商品入れられます
上記範囲が1商品となります。増やしたり減らしたりすることで入れられる商品数も変えられます

商品画像URL(アップロードする必要あり)、リンクURL、商品名、価格を1商品ごとに入れます

新作エリアの下部のもっと見るの部分も設定します
<a href=”/bep/m/klist2?ipp=40&user=******&e_scope=O&srm=Y&sort1=start,D”>もっと見る</a>
*****の部分に会員番号を入れて下さい

ランキング

ランキングエリア(208行目辺り)

<div id="ranking">
          <font size="5" color="black">ランキング</font>
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-3 ">
              <div class="ranking-item">
                <div class="ranking-image">
                  <img src="images/rank1.png" alt="rank1">
                </div>
                <div class="item-image">
                  <a href="#"><img src="images/item_640_640.jpg" alt="new-item1"></a>
                </div>
                <a href="#"><p class="item-name">商品名商品名商品名商品名</p></a>
                <p class="price">3,000円</p>
              </div>
            </div>

デフォルトではランキング商品を4商品入れられます
上記範囲が1商品となります。ランキングの画像があるため、商品を減らすことはできますが、4商品以上増やすことはできません

<img src=”images/rank1.png” alt=”rank1″>
の部分にランキングを数字を入れます

後は新作エリアと同じように
商品画像URL(アップロードする必要あり)、リンクURL、商品名、価格を1商品ごとに入れます

コンテンツ

コンテンツエリア(262行目辺り)
コンテンツエリアでは特集やイベント、商品紹介などに使うことができます

<div class="card mb-3">
<div class="row g-0">
<div id="image" class="col-md-5">
<div class="img" >
<a href="#"><img src="images/item_640_640.jpg" alt="..." style="max-height: 200px;"></a>
</div>

</div>
<div class="col-md-7">
<div class="card-body">
<h5 class="card-title">****について</h5>
<p class="card-text">ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="see-more">
<a href="#">もっと見る</a>
</div>
</div>
</div>
</div>
</div>

デフォルトではコンテンツを2商品入れられます
上記範囲が1商品となります。増やしたり減らしたりすることで入れられるコンテンツ数も変えられます

****について
コンテンツ名を入れます

<p class=”card-text”>あああああああ…</p>
コンテンツの説明を入れられます

<a href=”#”>
コンテンツのURLを入れてください
URLいてる箇所は2か所あります

レフトナビの設定

レフトナビの設定をします

レフトナビのカテゴリー、インフォメーション

レフトナビのカテゴリー、インフォメーション(323行目辺り)

<div class="menu">
            <font size="4" color="black">カテゴリー</font>
            <br>
            <a href="#">カテゴリ1</a>
            <a href="#">カテゴリ2</a>
            <a href="#">カテゴリ3</a>
            <a href="#">カテゴリ4</a>
            <a href="#">カテゴリ5</a>
            <br>
            <br>
            <font size="4" color="black">インフォメーション</font>
<a href="/bep/m/kmem?user=******">会社概要</a>
<a href="/bep/m/dm40?user=******">メルマガ</a>
          </div>

カテゴリーやインフォメーションの設定をします
カテゴリー数や項目数は増減可能です

・カテゴリー
カテゴリ名とhref=”#”にリンクURLを入れます

・インフォメーション
<a href=”/bep/m/kmem?user=******”>会社概要</a>
******に会員番号を入れます

<a href=”/bep/m/dm40?user=******”>メルマガ</a>

******に会員番号を入れます

フッターの設定

フッターの設定をします

お買物ガイド

  1. お買い物ガイド
  2. 返品交換について
  3. プライバシーポリシー
  4. お問い合わせ

などを設定することができます
こちらに関しては
店舗の概要やルールと照らし合わせながら、自由に記述ください

フッター内下記の箇所
<a href=”/bep/m/kmem?user=******”>お買物ガイド</a>(367行目辺り)
****にストアアカウントを入れます

コピーライト

コピーライト(412行目辺り)

©︎************Co.,Ltd.の箇所に
コピーライトを入れることができます

au PAY マーケット Plusにアップロードする

入力がすべて完了し、ページが完成しましたら
トリプルへアップロードを行います

手順といたしましては以下の通りです

  1. au PAY マーケット Plusディスクスペース提供オプションに申し込む(済んでいる方は次)
  2. au PAY マーケット Plusにファイルをアップロードする
  3. 表示できているか確認する
  4. トップページに設定する(リダイレクト設定)

上記の方法全て、別ページの記事で解説がありますのでこちらを参考にアップロードください
FTPの設定方法もこちら

au payマーケットplus使い方?アップロード方法などを解説

以下、本テンプレート用に補足させていただきます

②au PAY マーケット Plusにファイルをアップロードする

FTPを使ってHTMLファイルや画像をau PAY マーケット Plusにアップロードします

アップロードするファイルは以下になります

index.html
css - フォルダごと。中身のファイルもです
images - フォルダごと。中身の使う画像ファイルも全てです

↑FTPのサーバ内もこの3つのファイル(フォルダ)が一番上の階層になるように注意が必要です

以上でau payマーケットplusテンプレートの初期設定方法の解説終了となります
お疲れ様でした

テンプレートの注意事項

本商品ご購入に関する利用規約になります。ご購入の前に必ずお読みください。
お客様がご購入された場合、本規約にご同意頂いたものとみなします。

  • データをダウンロードしている為、商品の性質上、購入後返金はできません。
  • ご自身、またはご自身の所属する法人または団体の運営するサイトで利用してください
  • テンプレートの内容を自由に編集してから利用できますが、その際、自己責任でお願いいたします。必ずバックアップをしてからご利用ください。当サイトは編集後の商品に一切の保証を持ちません。
  • 当テンプレートの利用または改変に関連して利用者または第三者に生じた損害について、当社はいかなる場合においても責任を負わないものとします。
  • 当テンプレートは購入時の売り切りとさせていただきます。商品をバージョンアップをする可能性がございますが、既に購入後のお客様は、バージョンアップのサポートを受けられません
  • 制作代行に利用することは可能ですが、改編してもテンプレートとしての販売はできません。
  • 当テンプレートに含まれる画像、HTML、CSS、Javascript等にかかる著作権を含む知的財産権は、加工の有無を問わず、すべて当サイトまたは当サイトに使用許諾を与える第三者に帰属します。

本規約に違反すると当社が判断する場合、当テンプレートの使用の差し止めを請求することができるものとし、利用者はすみやかに当該請求に従うものとします。

 

テンプレート自体に不具合等がございましたら
こちらまでお問い合わせください

お問い合わせ