スマホ用メニューバーの色変更 1 html/user_data/packages/default/img/icon_header 上記フォルダにアイコンが入っています 2 data/smarty/templates/default/header.tpl 画像名 ( 色 )を変

Size: px

Start display at page:

Download "スマホ用メニューバーの色変更 1 html/user_data/packages/default/img/icon_header 上記フォルダにアイコンが入っています 2 data/smarty/templates/default/header.tpl 画像名 ( 色 )を変"

きょうすけさくいし
9 years ago
Views:

1 カスタマイズダウンロード版の新バージョン( ~)マニュアルレスポンシブ Web デザインのヘッダー部グローバルメニューは右上の 3 本線アイコンに格納されますクリックするとメニュー項目が展開します上部メニューはそれぞれテキストから左上のアイコン( 画像 )に切り替わります管理画面でのブロック配置ヘッダーログイングローバルナビ 2つのブロックはソースコードに埋め込んでいますので配置しないでください上部メニュー(ポップアップ)の変更方法 (1)CSS common.css ヘッダー上部ポップアップ (2)メニュー項目の増やし方と削除 data/smarty/templates/default/header.tpl メニュー項目を削除する場合左記の1と2を削除するポップアップを表示させず直接リンクを設定する場合 1 <script> 内 if (!$.contains($(".popup_mypage")[0], event.target)) { $(".popup_mypage").slideup("200"); 2 <header> 内  <li class="nav_btn mypage"> 2を削除しただけではポップアップ外側クリックで閉じる動作が行われない <a onclick="location.href='mypage/'"><img src="img/icon_header/ico_white_mypage. png" alt="my ページ " /><div class="txt">my ページ </div></a> <span class="no_popup"><div class="popup popup_mypage"></div></span>

$tpl メニュー項目を削除する場合左記の1と2を削除するポップアップを表示させず直接リンクを設定する場合 1 <script> 内 if (!$.contains($(".popup_mypage")[0], event.target)) { $(".popup_mypage").slideup("200"); 2 <header> 内 <!$

$png 3 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 { color: #fff; /* 3 本線 */.mean-container a.

2 スマホ用メニューバーの色変更 1 html/user_data/packages/default/img/icon_header 上記フォルダにアイコンが入っています 2 data/smarty/templates/default/header.tpl 画像名 ( 色 )を変更します ico_white_logout.png ico_blue_logout.png 3 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 印 :#0071BE 3 本線 :#0071BE 背景色 :#D9F0E6 印 :#0071BE 3 本線 :#0071BE 背景色 :#0c1923 印 :#F5D417 3 本線 :#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;

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

3 グローバルナビゲーション(メニュー項目デザイン) 商品カテゴリーが自動的に表示されますスタイルシートを 2 種類用意しています globalnav-1.css data/smarty/templates/default/site_frame.tpl  <link rel="stylesheet" href="css/globalnav-1. css" type="text/css" media="all" /> globalnav-2.css frontparts/bloc/global_nav  <link rel="stylesheet" href="css/globalnav-2. css" type="text/css" media="all" />  <a href="#">1 階層 </a> <ul class="global_nav_menu_sub"> <a href="#">2 階層 </a> <a href="#">2 階層 </a> <a href="#">2 階層 </a> <ul class="global_nav_menu_sub"> <a href="#">3 階層 </a> <ul class="global_nav_menu_sub"> <a href="#">4 階層 </a> <a href="#">4 階層 4 階層 4 階層 4 階層 4 階層 </a> <ul class="global_nav_menu_sub"> <a href="#">5 階層 </a> <a href="#">5 階層 </a> <a href="#">5 階層 5 階層 5 階層 5 階層 5 階層 5 階層 </a> </ul> </ul> <a href="#">3 階層 </a> <a href="#">3 階層 </a> </ul> <a href="#">2 階層 </a> <ul class="global_nav_menu_sub"> <a href="#">3 階層 </a> </ul> </ul>  data/smarty/templates/default/frontparts/bloc/ global_nav.tpl 作成例を記述していますメモとして保存した後削除してください商品カテゴリーの 1 階層の数が多い場合はメニューバーの領域からはみ出してしまいますその時は読み込みのソースコードを削除して左記を参考にコードを記述してください削除するコード  -----

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

4 グローバルナビゲーション( 商品カテゴリーの商品数表示 ) システム設定 >パラメーター設定 GLOBAL_MENU_NUM グローバルナビのカテゴリ商品件数の表示 (true: 表示する, false: 表示しない, 1:1 階層のみに表示, 2:2 階層以下に表示 ) 値 :true すべての階層に表示されます値 :1 1 階層のみに表示されます値 :2 2 階層以下に表示されます

ピックアップ商品新商品最近チェックした商品 PC 表示スマホ表示表示パターン 1 フリック機能 : 稼働フリック機能 : 非稼働表示パターン 2 表示パターン 3 フリック機能を実現するために

5 カスタマイズダウンロード版の新バージョン( ~)マニュアルレスポンシブ Web デザインの商品を表示するブロックデザイン管理 >レスポンシブ Web デザイン> 商品表示ブロックの設定以下のブロックの表示パターンを変更することができますおすすめ商品ピックアップ商品新商品最近チェックした商品 PC 表示スマホ表示表示パターン 1 フリック機能 : 稼働フリック機能 : 非稼働表示パターン 2 表示パターン 3 フリック機能を実現するために jquery プラグインの flipsnap.js(version 0.6.2) を利用していますサポートしているブラウザ (Mobile)は下記の通りです ios Safari (ios4+) Android Browser (Android 2.1+) Android Firefox Mobile 9.0+ Android Opera Mobile Window8 IE10+

6 カスタマイズダウンロード版の新バージョンマニュアルレスポンシブ Web デザインの商品詳細ページその他の画像サブ情報として登録した画像規格画像をオンマウスするとメイン画像が入れ替わりますクリックすると拡大画像が表示されますスマホ画面規格が２つ設定されている場合メイン画像とその他の画像サブ画像が一緒にフリック機能で表示されます規格画像がフリック機能で表示されます規格が 1 つ設定されている場合規格が設定されていない場合

7 マトリクス表示にその他の商品情報を表示システム設定 >パラメーター設定で次の項目の表示非表示を設定できます通常価格ポイント商品コード在庫数一度に購入できる数規格画像確認リンク左図はすべて表示した場合です左図のようにパラメータ設定でプルダウン形式を設定した場合は商品情報は表示されませんシステム設定 >パラメーター設定 CLASS_PULL_TABLE (true: テーブル表示ラジオボタン false: プルダウン形式 )

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

8 テンプレートファイル(detail.tpl)の記述 detail.tpl の記述 detail_template フォルダの中に PC 表示用スマホ表示用のテンプレートが入っていますファイル名は PC _pc_ スマホ _sphone_ で区別していますそれぞれの端末でアクセスした時に表示される仕組みになっています (ブラウザ幅の伸縮では確認できませんので実際の端末で確認してください) タブレットでのアクセスは PC 表示になります data/smarty/templates/default/products/ detail.tpl では次のような記述で各テンプレートファイルを読み込んでいます   読み込みコードの位置を入れ替えるなどしてレイアウトを変更することが可能です

に表示される仕組みになっています (ブラウザ幅の伸縮では確認できませんので実際の端末で確認してください) タブレットでのアクセスは PC 表示になります

9 カスタマイズダウンロード版の新バージョン( ~)マニュアルレスポンシブ Web デザインの商品ステータスのテキスト表示商品一覧ページ商品詳細ページシステム設定 >マスターデータ管理 mtb_status が反映されますシステム設定 >マスターデータ管理 mtb_status_image は無視されます画像登録は不要システム設定 >パラメーター設定 STATUS_IMAGE_TEXT の値を true に設定すると通常の画像表示に戻ります

10 カスタマイズダウンロード版の新バージョン( ~)マニュアルレスポンシブ Web デザインの規格画像を現在のカゴの中で表示規格を選択しカゴに入れるボタンをクリックすると現在のカゴの中のページで規格画像を表示します規格画像が登録されていないときは通常のメイン画像が表示されます入力内容のご確認ページでも表示されます

11 カスタマイズダウンロード版の新バージョンマニュアルレスポンシブ Web デザインのカテゴリごとのランキング商品一覧ページにランキングブロックを配置したときカテゴリー内のランキングを表示することができます左図の例ではベッドカテゴリーの中のすのこベッドカテゴリーを開いた時にそのカテゴリの中のランキングが表示されています商品登録画面で下図のようにカテゴリーを設定した商品となります親カテゴリーベッドでもランキングを表示したい場合は商品登録の際商品カテゴリに親カテゴリを含める必要があります商品一覧ページでもすべての商品のランキングを表示したい場合はシステム設定パラメーター設定 RANKING_CATEGORY の値を false に設定します

左図の例ではベッドカテゴリーの中のすのこベッドカテゴリーを開いた時にそのカテゴリの中のランキングが表示されています商品登録画面で

(4) 文字サイズ ( フォントサイズブロック ) デザイン管理 > レスポンシブ Web デザイン > レイアウト設定ヘッダー部に配置しています (5) カゴの中 ( ヘッダーカゴの中ブロック ) デザイン管理 > レスポンシブ Web デザイン > レイアウト設定ヘッダー部に配置し

(4) 文字サイズ ( フォントサイズブロック ) デザイン管理 > レスポンシブ Web デザイン > レイアウト設定ヘッダー部に配置しています (5) カゴの中 ( ヘッダーカゴの中ブロック ) デザイン管理 > レスポンシブ Web デザイン > レイアウト設定ヘッダー部に配置し EC-CUBE2.13.5 カスタマイズ _Bootstrap3 版ヘッダー部について (1) サイト概要文基本情報管理 > SHOP マスターヘッダー部に表示するサイトの概要文が反映されます (2) ロゴ html/user_data/packages/default/img/common/logo.png(345 65 px) 位置調整は CSS を変更します 544 行目付近のロゴ

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変

スマホ用メニューバーの色変更 1 html/user_data/packages/default/img/icon_header 上記フォルダにアイコンが入っています 2 data/smarty/templates/default/header.tpl 画像名 ( 色 )を変