カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブWebデザインのヘッダー部

上部メニューはそれぞれ、「テキスト」から左上のアイコン（画像）に切り替わります。

グローバルメニューは、右上の「3 本線アイコン」に格納されます。クリックすると、メニュー項目が展開します。

▼管理画面でのブロック配置

【ヘッダー】ログイン、グローバルナビ、２つのブロックはソースコードに埋め込んでいますので、配置しないでください。

上部メニュー（ポップアップ）の変更方法

（1）CSS → common.css →「ヘッダー上部ポップアップ」

（2）メニュー項目の増やし方と削除■ data/Smarty/templates/default/header.tpl

【ポップアップを表示させず直接リンクを設定する場合】①　<script> 内、---------------------------------if (!$.contains($(".popup_mypage")[0], event.target)) { $(".popup_mypage").slideUp("200");}---------------------------------②　<header> 内、---------------------------------<!-- ▼ MY ページ --><li class="nav_btn mypage"><a onclick="location.href='<!--{$smarty.const.TOP_URLPATH}-->mypage/'"><img src="<!--{$TPL_URLPATH}-->img/icon_header/ico_white_mypage.png" alt="MY ページ " /><div class="txt">MY ページ </div></a></li><span class="no_popup"><div class="popup popup_mypage"></div></span>---------------------------------

【メニュー項目を削除する場合】

左記の①と②を削除する。

※　②を削除しただけでは、ポップアップ「外側」クリックで閉じる動作が行われない。

スマホ用メニューバーの色変更

①　■ html/user_data/packages/default/img/icon_header　　　上記フォルダにアイコンが入っています。

②　■ data/Smarty/templates/default/header.tpl画像名（色）を変更します。---------------------------------ico_white_logout.png↓ico_blue_logout.png---------------------------------

③　■ html/user_data/packages/default/css/responsive_nav.css---------------------------------/* ナビメニューバーの背景色と高さ */ .mean-container .mean-bar { background: #0c1923; height:45px; } /* ×印 */ .mean-container a.meanmenu-reveal { color: #fff; } /* 3 本線 */ .mean-container a.meanmenu-reveal span { background: #fff; }---------------------------------

背景色 :#DFEFFF×印：#0071BE3 本線：#0071BE

背景色 :#D9F0E6×印：#0071BE3 本線：#0071BE

背景色 :#0c1923×印：#F5D4173 本線：#F5D417

/* メニュー項目の文字色 */ .mean-container .mean-nav ul li a { color: #333; } /* メニュー項目のオンマウス時の文字色 */ .mean-container .mean-nav ul li a:hover { color: #fff; } /* メニュー項目の背景色 */ .mean-container .mean-nav { background-color: #eee; } /* メニュー項目のオンマウス時の背景色 */ .mean-container .mean-nav ul li:hover { background-color:#ccc;}

グローバルナビゲーション（メニュー項目・デザイン）

商品カテゴリーが自動的に表示されます。

■ data/Smarty/templates/default/site_frame.tpl----------------------------------------------<!-- ▼グローバルメニュー --> <link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/globalnav-1.css" type="text/css" media="all" />----------------------------------------------

frontparts/bloc/global_nav----------------------------------------------<!-- ▼グローバルメニュー --> <link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/globalnav-2.css" type="text/css" media="all" />----------------------------------------------

スタイルシートを 2 種類用意しています。

globalnav-1.css

globalnav-2.css

<!-- ▼メニュー項目の作成例 --> <li> <a href="#">1 階層 </a> <ul class="global_nav_menu_sub"> <li> <a href="#">2 階層 </a> </li> <li> <a href="#">2 階層 </a> </li> <li><a href="#">2 階層★ </a> <ul class="global_nav_menu_sub"> <li> <a href="#">3 階層★ </a> <ul class="global_nav_menu_sub"> <li> <a href="#">4 階層 </a> </li> <li> <a href="#">4 階層 4 階層 4 階層 4 階層 4 階層★ </a> <ul class="global_nav_menu_sub"> <li> <a href="#">5 階層 </a> </li> <li> <a href="#">5 階層 </a> </li> <li> <a href="#">5 階層 5 階層 5 階層 5 階層 5 階層 5 階層 </a> </li> </ul> </li> </ul> </li> <li> <a href="#">3 階層 </a> </li> <li> <a href="#">3 階層 </a> </li> </ul> </li> <li><a href="#">2 階層★ </a> <ul class="global_nav_menu_sub"> <li> <a href="#">3 階層 </a> </li> </ul> </li> </ul> </li> <!-- ▲メニュー項目の作成例 -->

■ data/Smarty/templates/default/frontparts/bloc/global_nav.tpl

作成例を記述しています。メモとして保存した後、削除してください。

商品カテゴリーの 1 階層の数が多い場合は、メニューバーの領域からはみ出してしまいます。その時は、読み込みのソースコードを削除して、左記を参考にコードを記述してください。▼削除するコード--------------------------------------< ! - - { i n c l u d e f i l e = " ` $ s m a r t y. c o n s t . T E M P L AT E _R E A L D I R ` f r o n t p a r t s / b l o c / g l o b a l n av _ t r e e _ 1 . t p l " children=$arrTree treeID="" display=1}-->--------------------------------------

グローバルナビゲーション（商品カテゴリーの商品数表示）

システム設定＞パラメーター設定GLOBAL_MENU_NUMグローバルナビのカテゴリ商品件数の表示（true: 表示する , false: 表示しない , 1:1 階層のみに表示 , 2:2 階層以下に表示）

値：trueすべての階層に表示されます。

値：11 階層のみに表示されます。

値：22 階層以下に表示されます。

カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブWebデザインの商品を表示するブロック

デザイン管理＞レスポンシブ Web デザイン＞商品表示ブロックの設定以下のブロックの表示パターンを変更することができます。

・おすすめ商品・ピックアップ商品・新商品・最近チェックした商品

PC 表示 スマホ表示

表示パターン 1

表示パターン 2

表示パターン 3

フリック機能：稼働 フリック機能：非稼働

フリック機能を実現するために、jQuery プラグインのflipsnap.js（version 0.6.2）http://hokaccha.github.io/js-flipsnap/を利用しています。サポートしているブラウザ

（Mobile）は下記の通りです。■ iOS Safari (iOS4+)■ Android Browser (Android 2.1+)■ Android Firefox Mobile 9.0+■ Android Opera Mobile 11.50+■ Window8 IE10+

カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブWebデザインの商品詳細ページ

その他の画像（サブ情報として登録した画像）、規格画像をオンマウスすると、メイン画像が入れ替わります。クリックすると、拡大画像が表示されます。

規格が２つ設定されている場合

規格が 1 つ設定されている場合

規格が設定されていない場合

スマホ画面

メイン画像とその他の画像（サブ画像）が一緒にフリック機能で表示されます。

規格画像がフリック機能で表示されます。

マトリクス表示にその他の商品情報を表示

システム設定＞パラメーター設定で、次の項目の表示・非表示を設定できます。

■通常価格■ポイント■商品コード■在庫数■一度に購入できる数■規格画像確認リンク

←左図はすべて表示した場合です。

左図のように、パラメータ設定でプルダウン形式を設定した場合は、商品情報は表示されません。

システム設定＞パラメーター設定CLASS_PULL_TABLE

（true: テーブル表示ラジオボタン　false: プルダウン形式）

テンプレートファイル（detail.tpl）の記述

■ data/Smarty/templates/default/products/

detail_template フォルダの中に、PC 表示用、スマホ表示用のテンプレートが入っています。ファイル名は、PC → _pc_、スマホ→ _sphone_ で区別しています。それぞれの端末でアクセスした時に表示される仕組みになっています。（ブラウザ幅の伸縮では確認できませんので、実際の端末で確認してください）タブレットでのアクセスは PC 表示になります。

detail.tpl では次のような記述で各テンプレートファイルを読み込んでいます。

<!--【PC】メイン画像 --> <!--{include file="`$smarty.const.TEMPLATE_REALDIR`products/detail_template/detail_pc_image.tpl"}-->

detail.tpl の記述

読み込みコードの位置を入れ替えるなどして、レイアウトを変更することが可能です。

カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブ Web デザインの商品ステータスのテキスト表示

商品一覧ページ 商品詳細ページ

システム設定＞マスターデータ管理mtb_status が反映されます。

システム設定＞マスターデータ管理mtb_status_image は無視されます。画像登録は不要。

システム設定＞パラメーター設定STATUS_IMAGE_TEXT の値を、true に設定すると通常の画像表示に戻ります。

カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブWebデザインの規格画像を現在のカゴの中で表示

規格を選択し、「カゴに入れる」ボタンをクリックすると、現在のカゴの中のページで、規格画像を表示します。

規格画像が登録されていないときは、通常のメイン画像が表示されます。

入力内容のご確認ページでも表示されます。

カスタマイズダウンロード版の新バージョン（2.13.3 ～）マニュアル

レスポンシブWebデザインのカテゴリごとのランキング

商品一覧ページに「ランキング」ブロックを配置したとき、カテゴリー内のランキングを表示することができます。

左図の例では、「ベッド」カテゴリーの中の「すのこベッド」カテゴリーを開いた時に、そのカテゴリの中のランキングが表示されています。商品登録画面で、下図のようにカテゴリーを設定した商品となります。

親カテゴリー「ベッド」でもランキングを表示したい場合は、商品登録の際、商品カテゴリに親カテゴリを含める必要があります。

商品一覧ページでも、すべての商品のランキングを表示したい場合は、システム設定＞パラメーター設定、RANKING_CATEGORY の値を falseに設定します。