ページのモバイル画面について

モバイル画面（スマホ用デザイン）につきましては、
画面の都合上、「トップ」や「お問合せ」を表示しておりません。

「お問合せ」を表示する場合は、以下の手順を行ってください。

※こちらの手順は、現在ご利用いただいているデザイン「大好きな手作りショップ」での手順となります。
　他のデザインで行う場合は、ファイル名等が若干違う可能性がございますので、ご注意ください。


1.店長ナビ＞デザイン設定＞パソコン用デザインタブ＞適用中のスタイルシートカスタマイズ

　スタイルシート一覧画面にある画像ファイルの以下の二つを右クリックしていただき、
　お使いのパソコンに保存していただきます。
　（画像は一つづつ保存してください）

　btn_menu_04.png
　btn_menu_hover_04.png


2.店長ナビ＞デザイン設定＞スマートフォン用デザインタブ＞適用中のスタイルシートカスタマイズ
　＞2 スタイルシート編集ボタン

　こちらに以下のソースを追加し、保存します。

.head_bar .head_menu .head_menu_04 a{
width: 100px; height: 50px;
background: url(images/btn_menu_04.png) no-repeat;
}
.head_bar .head_menu .head_menu_04 a:hover {
background: url(images/btn_menu_hover_04.png) no-repeat;
}


3.店長ナビ＞デザイン設定＞スマートフォン用デザインタブ＞適用中のスタイルシートカスタマイズ
　＞画像新規登録ボタン

　1で保存した2つの画像を選択してアップロードします。
　（画像選択は一つづつ行ってください）


4.店長ナビ＞デザイン設定＞スマートフォン用デザインタブ＞適用中のテンプレートカスタマイズ
　＞共通ヘッダー編集ボタン

　以下のソースが対象となります。

<div class="head_menu_01"><a href="{cart_url}" title="カート"></a></div>
<div class="head_menu_02"><a href="javascript:void(0);" title="支払・配送方法" onclick="window.open('{law_url}#payment_explain','ems_sub','width=640,height=620,scrollbars=1');" ></a></div>
<div class="head_menu_03"><a href="javascript:void(0);" title="返品特約" onclick="window.open('{law_url}#return_explain','ems_sub','width=640,height=620,scrollbars=1');" ></a></div>
<div style="clear:both;"></div>

　
　以下のソースに上書きしてください。

<div class="head_menu_01"><a href="{cart_url}" title="カート"></a></div>
<div class="head_menu_02"><a href="javascript:void(0);" title="支払・配送方法" onclick="window.open('{law_url}#payment_explain','ems_sub','width=640,height=620,scrollbars=1');" ></a></div>
<div class="head_menu_03"><a href="javascript:void(0);" title="返品特約" onclick="window.open('{law_url}#return_explain','ems_sub','width=640,height=620,scrollbars=1');" ></a></div>
<div class="head_menu_04"><a href="javascript:void(0);" title="お問い合わせ" onclick="window.open('{contact_url}','ems_sub','width=640,height=450,scrollbars=1');" ></a></div>
<div style="clear:both;"></div>


　保存をしていただければ、「お問合せ」が表示されます。


※スマートフォンの縦表示をすると、追加した「お問合せ」ボタンが2列目になります。
　一列にしたい場合は、スタイルシートを以下の様に編集してください。

　（「←ここを編集」「←ここを追加」の箇所を追加・編集いただき、
　　保存する前に「←ここを編集」「←ここを追加」は削除してください）


/* ヘッダバー */
.head_bar{
margin: 0;
padding: 0;
border: 0;
height: 40px;　　←ここを編集
background: url(images/bg_head_bar.png) repeat-x;
background-size: auto 40px;　　　←ここを追加
}
/* ヘッダメニュー */
.head_bar .head_menu{
padding: 0;
border: 0;
}

/* メニューボタン */
.head_bar .head_menu a {
float: left;
}

.head_bar .head_menu .head_menu_01 a { font-size: 80%;
width: 80px; height: 40px;　　　←ここを編集
background: url(images/btn_menu_01.png) no-repeat;
background-size: 80px 40px;　　　←ここを追加
}
.head_bar .head_menu .head_menu_01 a:hover {
background: url(images/btn_menu_hover_01.png) no-repeat;
}
.head_bar .head_menu .head_menu_02 a {font-size: 80%;
width: 80px; height: 40px;　　　←ここを編集
background: url(images/btn_menu_02.png) no-repeat;
background-size: 80px 40px;　　　←ここを追加
}
.head_bar .head_menu .head_menu_02 a:hover {
background: url(images/btn_menu_hover_02.png) no-repeat;
}
.head_bar .head_menu .head_menu_03 a{
width: 80px; height: 40px;　　　←ここを編集
background: url(images/btn_menu_03.png) no-repeat;
background-size: 80px 40px;　　　←ここを追加
}
.head_bar .head_menu .head_menu_03 a:hover {
background: url(images/btn_menu_hover_03.png) no-repeat;
}
.head_bar .head_menu .head_menu_04 a{
width: 80px; height: 40px;　　　←ここを編集
background: url(images/btn_menu_04.png) no-repeat;
background-size: 80px 40px;　　　←ここを追加
}
.head_bar .head_menu .head_menu_04 a:hover {
background: url(images/btn_menu_hover_04.png) no-repeat;
}


説明は以上です。
よろしくお願い致します。