２０２４.４.２６公開：　もうリピート注文で悩まない！顧客が顧客を呼ぶ機能！？１日でできるお中元・お歳暮商戦のベストアンサー

「 レスポンシブ（上級者）－ホワイト 」のテーマを編集する

TOP > 制作 > 全体

■本テーマの利用条件


本テーマを利用するには、ＨＴＭＬやＣＳＳの知識が必要です。
ＨＴＭＬ や ＣＳＳ の記述方法については、ストアーデスクでサポートいたしかねます。
貴社で制作が難しい場合は、Ｅストアーページ制作代行をご用意しておりますので、ストアーデスクまでご相談ください。

1 トップページを編集する

「 レスポンシブ（上級者）－ホワイト 」のトップページを編集する箇所をご案内します。

テーマ編集のマニュアルの見方

こちらのマニュアルを読む前に、必ずレスポンシブデザイン対応テーマ（上級者向け）の利用手順のマニュアルをご覧ください。
＞＞本テーマ利用手順のマニュアルはこちら

■サンプルのHTML編集方法

  • 青文字
    テキスト（文字）の編集箇所です。貴社のお店ページに合った内容に編集してください。
  • 緑文字
    リンク先ＵＲＬの編集箇所です。作成したページのＵＲＬにリンク指定してください。
    ショップサーブ自動生成ページのURLは、管理画面メニュー「 サーバー ＞ URL一覧 」で確認できます。
  • オレンジ文字
    画像のファイル名の編集箇所です。画像を変更する際に編集して下さい。

■サンプル画像を上書きで差し替える方法

  • 画像を1個ずつ上書きする場合
    管理画面メニュー「 お店運営 ＞ 画像管理 ＞ 画像台帳 」で、既に登録したサンプル画像と同じファイル名の画像を上書きで保存しましょう。
    ＞＞詳しくは、オンラインサポート「058」で検索
  • 複数の画像を一括で上書きする場合
    サンプル画像と同じファイル名の画像をFTPサーバー（ 場所：/docs/pict/ ）にアップロード後、
    管理画面メニュー「 お店運営 ＞ 一括処理 ＞ 各種一括処理 」で、ファイル名を空欄にしてCSVファイル（imageupload .csv)を登録しましょう。
    ＞＞詳しくは、オンラインサポート「057」で検索


代替テキスト（alt属性）は、後から正規画像と差し替える際に、商品画像の説明する内容に変更することをおすすめします。
画像サイズの横幅はテーマごとに異なります。サンプル画像を参考にして作成してください。
＞＞テーマごとの画像サイズの横幅はこちら

1-1 ヘッダメニューを編集する

HTMLの編集画面で、貴社のサイトに合わせてテンプレートを編集しましょう。

■ ヘッダ ＞ ヘッダメニュー ＞ HTMLを編集

■ ロゴの編集箇所

<h1>
<a href="{$stores.storeDomain}">
<img src="<!--{if $baseType == 'shop'}-->{$stores.storeDomain}<!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive1_header_logo.png" alt="logo">
</a>

■ ヘッダメニューの編集箇所

テキストやリンク先URLを変更します。メニューの上にマウスをのせるとサブメニューの表示がでます。サブメニューは増減が可能です。

<div class="gnav">
<ul>
<li class="arrow">
<a href="{$stores.storeDomain}/SHOP/list.php">Clothes</a>
<div class="menu">
<ul>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Clothes01</a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Clothes02</a></li>
</ul>
</div>
</li>
<li class="arrow">
<a href="#">Accessories</a>
<div class="menu">
<ul>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Accessories01</a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Accessories02</a></li>
</ul>
</div>
</li>
<li class="arrow">
<a href="{$stores.storeDomain}/hpgen/HPB/entries/XX.html">Sale</a>
<div class="menu">
<ul>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Sale01</a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Sale02</a></li>
</ul>
</div>
</li>
<li><a onClick="javascript:openPage('https://cart<!--{$setNumber}-->.shopserve.jp/{$stores.storeName}/login.cgi','mypage'); return false;" href="/_ga/login.cgi">My page</a></li>
<li><a onClick="javascript:goCart();return false;" href="/_ga/cart.php">Cart</a></li>
<li class="search_btn">
<a id="search_trigger"></a>
<form id="header_search_form" method="get" name="search_form" action="{$stores.storeDomain}/SHOP/list.php">
<div class="innerbox">
<input type="text" name="Search" value="" placeholder="Search">
<button></button>
</div>
</form>
</li>
</ul>
</div>
<div id="header-nav-drawer"><span></span></div>
</div>
</div>

■ 検索フォーム内の文言変更

検索フォーム内のプレースホルダーを任意の文言に設定できます。

<div class="innerbox">
<input type="text" name="Search" value="" placeholder="Search">
<button></button>
</div>

■ スライダーの編集箇所

スライドする５枚の画像を用意しましょう。
商品詳細ページや商品一覧ページなど、クリックした時に遷移するページのリンク先URLを指定してください。

<!--▼スライダー-->
<div class="top_slider_block">
<ul id="top-slider">
<li><a href="{$stores.storeDomain}/SHOP/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_slider_1.png" /></a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_slider_2.png" /></a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_slider_3.png" /></a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_slider_4.png" /></a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_slider_5.png" /></a></li>
</ul>
</div>
<!--▲スライダー-->

■ バナーの編集箇所

２つのバナーを用意しましょう。
商品詳細ページや商品一覧ページなど、クリックした時に遷移するページを任意のリンク先ＵＲＬに指定してください。

<!--▼ピックアップバナー-->
<div class="top_banner_block">
<div class="wrap">
<ul>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_banner_01.png" alt="banner01" /></a></li>
<li><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_banner_02.png" alt="banner02" /></a></li>
</ul>
</div>
</div>
<!--▲ピックアップバナー-->


1-2 フッタを編集する

HTMLの編集画面で、貴社のサイトに合わせてテンプレートを編集しましょう。

■フッタ ＞ お店ページ・カート ＞ HTMLを編集

お店ページとカートのテンプレートを両方とも編集してください。

■ 店舗ロゴ画像、住所、営業時間の編集箇所

<div class="shop_footer_block">
<p><a href="{$stores.storeDomain}"><img src="{$stores.storeDomain}/pic-labo/responsive1_header_logo.png" alt="logo"></a></p>
<div>
<p><span>〒105-0000 東京都港区虎ノ門○○○</span></p>
<p><span>営業時間：月～金（祝日を除く）</span><span>午前10時～午後8時</span></p>
</div>
</div>

■ フッターメニューの編集箇所

<ul>
<li><a href="{$stores.storeDomain}/hpgen/HPB/shop/sitemap.html">サイトマップ</a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/shop/business.html">特定商取引法に関する表示</a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/shop/policy.html">個人情報の取り扱いについて</a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html">よくある質問</a></li>
<li><a onclick="javascript:openPage('https://cart{$setNumber}.shopserve.jp/{$stores.storeName}/FORM/contact.cgi','form'); return false;" href="/_ga/FORM/contact.cgi">お問い合わせ</a></li>
</ul>


「よくある質問」のメニューにサンプルのＵＲＬが入力されています。
フリーページなど、任意のリンク先ＵＲＬやタイトルに変更してください。

■「コピーライト」の編集箇所

©の後に、著作権を持っている所有者を記載します。
「社名」や「屋号（お店の名前）」に変更してください。

<div class="copyright">
&#169;&#65038;Bonita&Maril Co., LTD.
</div>

※サンプルの「Co., Ltd.」は「株式会社」の記載の１つです。特に記載が無くても構いません。英文登記した正式な社名がある場合は、それに従って記載しましょう。

1-3 アイコン画像を変更する

HTMLの編集画面で、貴社のサイトに合わせてテンプレートを編集しましょう。

■お店ページ・カート共通 ＞ headタグへの追記 ＞ HTMLを編集

■ 検索フォームのアイコン画像の編集箇所

ヘッダメニューの右端にあるボタンをクリックすると、検索フォームの表示がでます。合計3つのボタン画像の編集箇所があります。

<style type="text/css">
.shop_header_block .search_btn a,
.side_search_block button {
background: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive1_icon_search.png") no-repeat center center;
background-size: 22px 22px;
}
.shop_header_block .search_btn a.active {
background-image: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive1_icon_close.png");
}
#header_search_form button {
background: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive1_button_search.png") no-repeat center center;
background-size: 20px 20px;
background-color: #111;
}

■ スライダーのアイコン画像の編集箇所

左右の矢印のアイコン画像です。

<style type="text/css">
.slick-prev:before{
content: '';
display: block;
background: url("{$stores.storeDomain}/pic-labo/responsive1_slider_arrow_prev.png") no-repeat center center;
background-size:contain;
width: 20px;
height: 40px;
}
.slick-next:before{
content: '';
display: block;
background: url("{$stores.storeDomain}/pic-labo/responsive1_slider_arrow_next.png") no-repeat center center;
background-size:contain;
width: 20px;
height: 40px;
}

1-4 お知らせを追加する

■入力サンプルと反映イメージ

<dl>
<dt>2020.10.21</dt>
<dd>お知らせに表示させる文章</dd>
</dl>

■お知らせの「見出し」を決めます

  1. お知らせの見出しを変更します。
  2. 「設定を保存する」ボタンをクリックします。

■「入力サンプル」を使用して追加します

  1. 入力サンプルの記述をコピーします。
    「更新日」と「文章」を差し替えて入力してください。
  2. 「追加する」ボタンをクリックします。
    画面下部の「表示リスト」に追加されます。
  3. 管理画面の左上「お店ページの更新へ」ボタンをクリックします。
  4. 「利用中のテーマでお店を更新」ボタンをクリックします。

    更新が完了したら、トップページに反映されます。


お知らせの更新については、他のページで詳しくご案内しています。
＞＞オンラインサポート「008」で検索

1-5 定休日カレンダーを設定する

■定休日の設定をします

  1. 本テーマを選択している場合、カレンダーの「見出し」の編集は、こちらの入力欄は使用しません。後述する、管理画面メニュー「 デザイン設定 ＞ テーマ ＞ CSSのカスタマイズ 」で「見出し」を変更します。
  2. 配色を決めます。
    「色の変更」ボタンをクリックして２種類のカラーを選択します。
    定休日の他、臨時休業、イベント、棚卸日など自由に入力してください。
  3. 色を選択して、カレンダーの日付をクリックします。
    例えば、定休日のラジオボタンを選択し、土日の日付をすべてクリックすると右イメージのような、カレンダーになります。


    定休日の設定について、他のページで詳しくご案内しています。
    ＞＞オンラインサポート「040」で検索

■カレンダーの「見出し」をCSSで変更します

  1. 「利用中のテーマから作成する」または「編集中のテーマから作成する」ボタンをクリックします。
    レスポンシブ（上級者）のテーマのCSSの編集画面が開きます。
  2. 該当箇所を修正します。
    変更例 ）定休日カレンダー、営業日カレンダー、カレンダー
  3. 「保存して適用」ボタンをクリックします。

■CSS修正箇所

div#subc_calendar h2::before {
content: "Calendar";
font-family: "Noto Serif JP", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 100%;
text-align: left;
}

2 サイドバーを編集する

商品一覧、商品詳細ページなど、トップページ以外に表示がでる「サイドバー」の編集箇所をご案内します。
ＰＣのサイドバーを編集すると、スマートフォンのドロワーメニューの表示にも反映されます。

2-1 商品カテゴリ（サイド用）を編集する

HTMLの編集画面で、貴社のサイトに合わせてテンプレートを編集しましょう。

■商品ページ・トップページ ＞ 商品カテゴリ（サイド用） ＞ HTMLを編集

「商品ページ」と「トップページ」のテンプレートを両方とも編集してください。

■商品カテゴリの編集箇所

ここで編集した内容は、商品一覧・商品詳細ページなどのPC表示のサブページと、スマートフォン表示のドロワーメニューに反映されます。

<div class="category">
<h2>Clothes</h2>
<section>
<nav>
<ul>
<li>
<div class="sitelink">
<a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Clothes01</a>
</div>
</li>
<li>
<div class="sitelink">
<a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Clothes02</a>
</div>
</li>
</ul>
</nav>
</section>
</div>
</section>
<section>
<div class="freeArea2">
<div class="free-contents">
<p>
<div>
<h2>Accessories</h2>
<div class="category">
<nav>
<ul>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Accessories01</a></div>
</li>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Accessories02</a></div>
</li>
</ul>
</nav>
</div>
</div>
<div>
<h2><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html">Sale</a></h2>
<div class="category">
<nav>
<ul>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Sale01</a></div>
</li>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/SHOP/XXXXXX/list.html">Sale02</a></div>
</li>
</ul>
</nav>
</div>
</div>

■ Information メニューを変更する

「よくある質問」のメニューにサンプルのＵＲＬが入力されています。
作成したページなど、任意のリンク先ＵＲＬや タイトルに変更してください。

<h2>Information</h2>
<div class="category">
<nav>
<ul>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/hpgen/HPB/shop/shoppinguide.html">ご利用案内</a></div>
</li>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html">よくある質問</a></div>
</li>
<li>
<div class="sitelink"><a onclick="javascript:openPage('https://cart{$setNumber}.shopserve.jp/{$stores.storeName}/FORM/contact.cgi','form'); return false;" href="/_ga/FORM/contact.cgi">お問い合わせ</a></div>
</li>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/hpgen/HPB/shop/business.html">特定商取引法に関する表示</a></div>
</li>
<li>
<div class="sitelink"><a href="{$stores.storeDomain}/hpgen/HPB/shop/policy.html">個人情報の取り扱いについて</a></div>
</li>
</ul>
</nav>
</div>

■Pick Up バナー（サイド用）を変更する

サンプルが挿入されています。
リンク先URLとバナー画像を用意して差し替えましょう。

<section>
<div class="freeArea2">
<div class="free-contents">
<p>
<h2>Pick Up</h2>
<div class="side_banner_block">
<ul>
<li><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_sidebanner_01.png" /></a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_sidebanner_02.png" /></a></li>
</ul>
</div>
</p>
</div>
</div>
</section>

■Buyer’s Select バナー（サイド用）を変更する

サンプルが挿入されています。
リンク先ＵＲＬとバナー画像を用意して差し替えましょう。

<section>
<div class="freeArea2">
<div class="free-contents">
<p>
<h2>Buyer’s Select</h2>
<div class="side_banner_block">
<ul>
<li><a href="{$stores.storeDomain}/hpgen/HPB/entries/XXXX.html"><img src="{$stores.storeDomain}/pic-labo/responsive1_sidebanner_03.png" /></a></li>
</ul>
</div>
</p>
</div>
</div>
</section>


2-2 商品一覧ページにヘッダ画像を挿入する

■画像を挿入します

「カテゴリ専用ヘッダ（パソコン用）」に画像を挿入します。
商品一覧ページの上部に、表示がでます。





カテゴリ専用ヘッダの設定は、他のページで詳しくご案内しています。
＞＞オンラインサポート「035」で検索

3 ドロワーメニューを編集する

スマートフォンのドロワーメニューの編集箇所をご案内します。
My page（マイページ）と Cart （カート）のメニューボタンと、検索フォームはＰＣサイト表示の際は「非表示」になります。

3-1 ドロワーメニューを編集する

HTMLの編集画面で、貴社のサイトに合わせてテンプレートを編集しましょう。

■商品ページ・トップページ ＞ 商品カテゴリ（サイド用） ＞ HTMLを編集

「商品ページ」と「トップページ」のテンプレートを両方編集してください。



■「 マイページ 」「 カート 」の編集箇所（スマートフォン用）

スマートフォン表示の際に出る「 マイページ 」と「 カート 」ボタンです。

<!--▼サイド SP用のボタンー-->
<div class="side_btn_block">
<ul>
<li><a onClick="javascript:openPage('https://cart<!--{$setNumber}-->.shopserve.jp/{$stores.storeName}/login.cgi','mypage'); return false;" href="/_ga/login.cgi">My page</a></li>
<li><a href="https://cart<!--{$setNumber}-->.shopserve.jp/{$stores.storeName}/cart.php">Cart</a></li>
</ul>
</div>
<!--▲サイド SP用のボタンー-->

■検索フォーム内の文言変更（スマートフォン用）

検索キーワードの入力フォーム内の文言（プレースホルダー）を設定できます。

<!--▼サイド SP用の検索フォームー-->
<div class="side_search_block sp_only">
<form action="{$stores.storeDomain}/SHOP/list.php" method="get">
<input name="Search" class="keyword" placeholder="Search" type="text" />
<button />
</form>
</div>
<!--▲サイド SP用の検索フォーム-->

4 商品詳細ページを編集する

商品詳細ページは、商品台帳で編集してください。

4-1 フロートボタンのアイコン画像を変更する

■お店ページ・カート共通 ＞ headタグへの追記 ＞ HTMLを編集

■ 上へ戻るボタン画像

#page-top a::before {
background: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive1_button_pagetop.png");
background-size: contain;
}

■カートエリアに移動ボタン画像

#to-cart a::before {
background: url("<!--{$stores.storeDomain}-->/pic-labo/responsive1_button_tocart.png");
background-size: contain;
}

このテーマの利用手順マニュアルへ戻る