２０２４.９.１８公開：　顧客接点を増やすチャンス！特別感が顧客の心を掴むバースデーメール

「レスポンシブ（上級者）－ブラウン」のテーマを編集する

TOP > 制作 > 全体

■本テーマの利用条件


本テーマを利用するには、ＨＴＭＬやＣＳＳの知識が必要です。
ＨＴＭＬ や ＣＳＳ の記述方法については、弊社でサポートいたしかねます。
貴社で制作が難しい場合は、貴社担当者までご相談ください。

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

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

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

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

■サンプルのＨＴＭＬ編集方法

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

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

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


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

1-1 ヘッダを編集する

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

■ヘッダ ＞ お店ページ ＞ HTMLを編集

お店ページ、商品ページ、フリーページ・店長日記、カートのテンプレートをすべて編集します。

■最上部ヘッダーラインの編集箇所

最上部のヘッダー左端にある「お店のキャッチコピー」の編集箇所と、右端の「ログイン」と「カート」のアイコン画像と文言の編集箇所です。

<div id="header-liner" class="pc">
<div id="header-liner-inner">
<p>毎日のコーヒーをもっとおいしく、今よりもっと楽しいコーヒーライフを。</p>
<p>
<a class="header-mypage" onclick="javascript:openPage('{$stores.cartUrl}/login.cgi','mypage'); return false;" href="/_ga/login.cgi" title="マイページ"><img src="{$stores.storeDomain}/pic-labo/responsive2_header_login_icon.png">マイページ</a>
<a class="header-cart" onclick="javascript:goCart();return false;" href="/_ga/cart.php" title="カート"><img src="{$stores.storeDomain}/pic-labo/responsive2_header_cart_icon.png">カート</a>
</p>
</div>
</div>

■店舗ロゴの編集箇所

<div id="logo">
<h1>
<a href="/" title="{$hfdesign.shopName|escape}"><img src="{$stores.storeDomain}/pic-labo/responsive2_header_logo.png" alt="{$hfdesign.altLogo|escape}"></a>
</h1>
</div>


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

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

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

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

ヘッダメニューの文言やアイコン画像の編集箇所です。

<ul>
<li>
<a
href="<!--{if $breadCrumbs.url != ''}--><!--{$breadCrumbs.url|escape|literal}--><!--{else}--><!--{$stores.storeDomain}--><!--{/if}-->"
title="トップ"><img src="<!--{if $baseType == 'shop'}--><!--{$stores.storeDomain}--><!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_header_menu_icon.png">トップ</a>
</li>
<li>
<a href="<!--{if $baseType != 'shop'}--><!--{$stores.storeDomain}--><!--{/if}-->/hpgen/HPB/shop/shopguide.html"
title="お店について"><img src="<!--{if $baseType == 'shop'}--><!--{$stores.storeDomain}--><!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_header_menu_icon.png">お店について</a>
</li>
<li>
<a href="<!--{if $baseType != 'shop'}--><!--{$stores.storeDomain}--><!--{/if}-->/hpgen/HPB/shop/shoppinguide.html"
title="ご利用ガイド"><img src="<!--{if $baseType == 'shop'}--><!--{$stores.storeDomain}--><!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_header_menu_icon.png">ご利用ガイド</a>
</li>
<li>
<a href="<!--{if $baseType != 'shop'}--><!--{$stores.storeDomain}--><!--{/if}-->/SHOP/rating_list.html"
title="お客様の声"><img src="<!--{if $baseType == 'shop'}--><!--{$stores.storeDomain}--><!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_header_menu_icon.png">お客様の声</a>
</li>
<li>
<a onClick="javascript:openPage('<!--{$stores.shortCartUrl}-->/FORM/contact.cgi','form'); return false;"
href="/_ga/FORM/contact.cgi" title="お問い合わせ"><img src="<!--{if $baseType == 'shop'}--><!--{$stores.storeDomain}--><!--{else}--><!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_header_menu_icon.png">お問い合わせ</a>
</li>
</ul>


初期状態では、「お客様の声一覧ページ」がリンク先に指定されています。「お客様の声」を集めていない場合は、他のページにリンク先を変更しましょう。


スマートフォンのドロワーメニューに、PCヘッダメニューで編集した内容は反映されません。スマートフォンの編集箇所は、「3-2 ドロワーメニューの文言を変更する」でご案内しています。

■大きいバナー画像の編集箇所

お店で取り扱っている商品イメージ画像を掲載しましょう。

<div id="top-image" style="display: none;">
<img src="{$stores.storeDomain}/pic-labo/responsive2_top_image.png ">
</div>


1-3 バナー画像を変更する

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

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

■バナーの編集箇所

おすすめ商品のバナーを用意しましょう。
商品一覧ページなど、任意のリンク先を指定します。

var bannerArea =
'<section class="cont w100">' +
'<div class="freeArea2 freeTop freeNoBg">' +
'<nav id="top-bnr">' +
'<p><a href="{$stores.storeDomain}/SHOP/XXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive2_top_banner_01.png"></a></p>' +
'<p><a href="{$stores.storeDomain}/SHOP/XXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive2_top_banner_02.png"></a></p>' +
'<p><a href="{$stores.storeDomain}/SHOP/XXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive2_top_banner_03.png"></a></p>' +
'<p><a href="{$stores.storeDomain}/SHOP/XXXX/list.html"><img src="{$stores.storeDomain}/pic-labo/responsive2_top_banner_04.png"></a></p>' +
'</nav>' +
'</div>' +
'</section>';
$("#main-column").prepend(bannerArea);


1-４ フッタを編集する

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

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

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

■フッタの店舗ロゴ画像の編集箇所

<div id="footer-background">
<img src="{$stores.storeDomain}/pic-labo/responsive2_footer_logo.png">
</div>

■「お支払について」「送料について」「店舗情報」の編集箇所

サンプルの内容が入力されています。お店運営に合わせて編集してください。

<div id="footer-inner">
<div class="footer_gnavi">
<section>
<h3>お支払について</h3>
<p>
　代引き、銀行振込、郵便振替、コンビニ払を用意してございます。ご希望にあわせて、各種ご利用ください。<br><br>
振込でお支払いの場合は、下記口座に合計金額をお振込みください。<br><br>
○○銀行　○○○支店<br>
普通：12345678<br>
名義：○○○○○株式会社<br><br>
お支払期限については、<br>
代引きは商品引渡時、<br>
銀行振込、郵便振替、コンビニ払はご注文確定後から7日以内となります。
</p>
</section>
<section>
<h3>送料について</h3>
<p>
送料は下記の通りです。一箇所につき商品合計5,000円以上お買い上げの場合は送料が無料となります。<br><br>
北海道：1276円<br>
青森、秋田、岩手：946円<br>
宮城、山形、福島：825円<br>
茨城、栃木、群馬：825円<br>
埼玉、千葉、東京、神奈川、山梨：825円<br>
新潟、長野、福井、石川、富山：825円<br>
静岡、愛知、三重、岐阜：825円<br>
大阪、京都、滋賀、奈良、和歌山、兵庫：946円<br>
岡山、広島、山口、鳥取、島根：990円<br>
香川、徳島、愛媛、高知：990円<br>
福岡、佐賀、長崎、大分：1276円<br>
沖縄：1441円
</p>
</section>
<section>
<h3>店舗情報</h3>
<p>
昭和初期の米蔵を改装<br>
木の温もりに包まれた落ち着いた空間<br>
窓からは、春はクロッカス、夏は蔦翠、秋は秋桜、冬は雪華と、四季折々の風景が展開します。<br>
コーヒーの芳醇な香りとともに、静かでゆったりとした時間をお愉しみください。<br><br>
ADDRESS：東京都港区虎ノ門〇〇〇<br>
TEL/FAX：03-〇〇〇〇-〇〇〇〇<br>
営業時間：10:00 - 20:00<br>
定休日：火曜　※ 祝日の場合は営業<br>
最寄駅：〇〇駅から徒歩5分<br>
駐車場：有（5台）
</p>
</section> </div>
</div>

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

<ul class="nav">
<li class="nav__item"><a href="{$stores.storeDomain}/hpgen/HPB/shop/policy.html"
title="個人情報の取り扱いについて">個人情報の取り扱いについて</a></li>
<li class="nav__item"><a href="{$stores.storeDomain}/hpgen/HPB/shop/business.html"
title="特定商取引法に関する表示">特定商取引法に関する表示</a></li>
<li class="nav__item"><a href="{$stores.cartUrl}/FORM/contact.cgi" title="お問合わせ" target="_blank">お問合わせ</a></li>
</ul>

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

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

<span id="copyright">&#169;COFEE BREAK</span>

1-5 デザインパーツ画像を変更する

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

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

■検索フォームのアイコン画像

#sub-column #searchbox .searchSubmit {
background: #521e10 url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_search_icon.png") 9px 8px no-repeat;
}

■カテゴリのアイコン画像・下ライン画像

#sub-column .category > h2 {
background-image: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_category_icon.png"), url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_line.png");
}

■店長紹介のアイコン画像・下ライン画像

#sub-column .shopDiary > h2 {
background-image: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_pot_icon.png"), url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_line.png");
}

■カレンダーのアイコン画像・下ライン画像・矢印画像

#sub-column div#subc_calendar h2 {
background-image: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_calendar_icon.png"), url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_leftside_line.png");
}
#sub-column div.cal_wrapper table.cal tr th input.prev {
background: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_arrow_left.png") no-repeat left bottom;
}
#sub-column div.cal_wrapper table.cal tr th input.next {
background: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_arrow_right.png") no-repeat right bottom;
}

■「おすすめ商品」「新着商品」「お知らせ」のアイコン画像・下ライン画像

#main-column .pickup h2,
#main-column .newItem h2,
#main-column .news h2 {
background-image: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_contents_coffee_icon.png"), url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_contents_line.png");
}

■フッタの背景画像

#footer-background {
background-image: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_footer_logo_bg.png");
background-repeat: repeat-x;
text-align: center;
}

■フッタの見出しライン画像

#footer-inner .footer_gnavi section h3 {
background: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_footer_line.png") 0 bottom no-repeat;
}

■全体背景の画像

body {
background: url("<!--{if $pg =='shop'}-->{$stores.storeDomain}<!--{else}-->https://cart<!--{$setNumber}-->.shopserve.jp<!--{$stores.userWeb|literal}-->/docs<!--{/if}-->/pic-labo/responsive2_background.png");
}

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

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

<span class="news-date">2020.08.05</span>
<span class="news-title">オンラインショップ夏季休暇のお知らせ</span>
<br>
誠に勝手ながら、以下の期間を夏季休暇とさせていただきます。<br>
2020年8月8日(土)～2020年8月16日(日)　※8月7日(金)PM12:00ご注文分（入金確認）まで発送可能です。<br>
大変ご不便をお掛け致しますが、何卒ご了承の程よろしくお願いいたします。

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

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

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

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

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


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

2 サイドバーを編集する

「レスポンシブ（上級者）－ブラウン」のサイドバーの編集箇所をご案内します。

2-1 商品カテゴリの名称を変更する

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

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

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

■「商品カテゴリ」の名称を変更します

<!-- SIDEBAR-OBJECT CATEGORY-LIST BEGIN -->
<section>
<div class="category">
<h2>商品カテゴリ</h2>



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

■画像を挿入します

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





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

2-3 定休日カレンダーを設定する

■定休日の設定をします

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


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

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

  1. 「利用中のテーマから作成する」または「編集中のテーマから作成する」をクリックします。
    レスポンシブ（上級者）のテーマのCSSの編集画面が開きます。

  2. 該当箇所を修正します。
    変更例）定休日カレンダー、営業日カレンダー、カレンダー
  3. 「保存して適用」をクリックします。

■CSS修正箇所

#sub-column div#subc_calendar h2::after {
bottom: 0;
content: "カレンダー";
font-size: 80%;
height: initial;
left: 0;
line-height: initial;
position: absolute;
right: 0;
top: 39px;
}

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

タブレット、スマートフォン表示の際に、ドロワーメニューの表示がでます。
スマートフォン用アイコン（マイページ・カート）や、検索フォーム、メニューは、ＰＣサイト表示の際は「非表示」になります。

3-1 ドロワーメニューのアイコンを変更する

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

■スマートフォン用アイコン画像の編集箇所（マイページ・カート）

var loginCart =
'<ul id="icon-navi" class="sp">' +
'<li>' +
'<a onClick="javascript:openPage(\'https://cart<!--{$setNumber}-->.shopserve.jp/{$stores.storeName}/login.cgi\',\'mypage\'); return false;" href="/_ga/login.cgi">' +
'<img src="{$stores.storeDomain}/pic-labo/responsive2_drawer_login_icon.png">' +
'</a>' +
'</li>' +
'<li>' +
'<a onClick="javascript:goCart();return false;" href="/_ga/cart.php" title="カート" >' +
'<img src="{$stores.storeDomain}/pic-labo/responsive2_drawer_cart_icon.png">' +
'</a>' +
'</li>' +
'</ul>';
$("#sub-column").prepend(loginCart);



右上にあるハンバーガーメニューのアイコンは、画像ではなくCSSで記述しています。管理画面メニュー「デザイン設定 ＞ テーマ ＞ CSSのカスタマイズ」で編集できます。

3-2 ドロワーメニューの文言を変更する

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

　　

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

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

■メニューの編集箇所

<section class="sp" id="sp-menu">
<div class="category">
<h2></h2>
<section>
<nav>
<ul>
<li><a href="{$stores.storeDomain}">トップ</a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/shop/shopguide.html">お店について</a></li>
<li><a href="{$stores.storeDomain}/hpgen/HPB/shop/shoppinguide.html">ご利用ガイド</a></li>
<li><a href="{$stores.storeDomain}/SHOP/rating_list.html">お客様の声</a></li>
<li><a onClick="javascript:openPage('<!--{$stores.shortCartUrl}-->/FORM/contact.cgi','form'); return false;" href="/_ga/FORM/contact.cgi">お問い合わせ</a></li>
</ul>
</nav>
</section>
</div>
</section>
<style type="text/css">
#sub-column #sp-menu .category > h2:after {
content: "メニュー";
}
</style>


管理画面メニュー「デザイン設定 ＞ トップページ ＞ 全体のレイアウト」で、「商品のカテゴリ」を非表示にすると、スマートフォンのドロワーメニューから非表示になります。


PCサイトのヘッダメニューと、スマートフォンのドロワーメニューの、メニューは編集箇所が異なります。

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

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

4-1 返品詳細のアイコン画像を変更する

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

商品詳細ページに表示している「返品についての詳細はこちら」の先頭にあるアイコン画像を変更できます。

■返品アイコン画像

#itemDetail-wrap #pi_cart .cancel a {
background: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_item_cancel_icon.png") left center no-repeat;
}


「返品についての詳細」のテキストは、管理画面メニュー「お店設定 ＞ お店情報 ＞ 特定商取引法の表示編集」で「返品期限・条件 ＞ 表示名」で編集できます。

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

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

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

#to-cart a,
#to-cart a:hover {
background: url("<!--{$stores.storeDomain}-->/pic-labo/responsive2_go_cart_area.png");
}

■上へ戻るボタン画像

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

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