トップページを見ますと、〔TOP〕、〔お支払い・配送方法〕、〔返品特約〕、〔お問い合わせ〕、という順にグレー色のバーを背景に見出しが表示されています。
私は、〔返品特約〕と〔お問い合わせ〕の間に、〔当店について〕という見出しを設けたいのです。そして、その見出しをクリックするとページが現れ、私があらかじめ書いた説明文が表示されるように。
どうすれば良いでしょうか。
大きな流れとして、以下の手順となります。
・フリーページの作成（当店についての説明文を記載するページの作成）
・テンプレートに作成したページのリンクを掲載する
■フリーページの作成（当店についての説明文を記載するページの作成）
店長ナビ＞デザイン設定＞フリーページタブ＞新規登録ボタン
フリーページ登録画面が表示されます。
フリーページID…作成するページのURLの一部となります。
例）http://[ショップID].easy-myshop.jp/c-fpage?fp=[フリーページID]
フリーページ名…作成するページのtitleとなります。（アクセスした際にウィンドウに表示されるタイトル）
フリーページ内容…こちらに説明文を記載してください。
■テンプレートに作成したページのリンクを掲載する
ヘッダーのメニューバー（TOP、お支払い・配送方法等のリンク）は画像で作成されています。
画像で掲載する方法と、画像に似せたスタイルで掲載する方法を説明します。
※画像に似せたスタイルで掲載すると、メニューにマウスポインタを置いた際に表示される模様（緑や黄色の四角）が表示されません。
＜画像で掲載する方法＞
まずは、作成した画像をアップロードします。
店長ナビ＞デザイン設定＞リソースマネージャー＞新規登録ボタン
「ファイル選択」ボタンから掲載した画像を選択していただきアップロードします。
※通常時の画像と、マウスポインタを置いた際に表示される画像両方をアップします。
次にスタイルシートへ以下のソースにアップロードした画像ファイル名を入力して記載します。
店長ナビ＞デザイン設定＞適用中のスタイルシートカスタマイズ＞スタイルシートの編集ボタン
.head_bar .head_menu .head_menu_05 a {
width: 154px; height: 50px;
background: url(http://www.easy-myshop.jp/emsrsc/[ショップID]/res/【アップロードした画像ファイル名】) no-repeat;
}
※こちらには通常時の画像ファイル名を記載します。
.head_bar .head_menu .head_menu_05 a:hover {
background: url(http://www.easy-myshop.jp/emsrsc/[ショップID]/res/【アップロードした画像ファイル名】) no-repeat;
}
※こちらにはマウスポインタを置いた際に表示される画像のファイル名を記載します。
次にテンプレートに以下を記載します。
店長ナビ＞デザイン設定＞適用中のテンプレートカスタマイズ＞共通ヘッダーの編集ボタン
こちらの以下のソースが対象となります。
<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>
上記ソースの【-----ここに追加-----】に以下をコピーして貼り付けていただき、保存していただければ完了です。
<div class="head_menu_05"><a href="javascript:void(0);" title="お店について" onclick="window.open('【フリーページのURL】','ems_sub','width=640,height=450,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>
上記ソースの【-----ここに追加-----】に以下をコピーして貼り付けていただき、保存していただければ完了です。
※貼り付ける前に【フリーページのURL】へ先程作成したフリーページURLを記載した後、コピーして貼り付けてください。
<div class="" ><span class="head_menu_04"><a style="width:5px;height: 50px; float: left;"></a></span><a href="【フリーページのURL】" title="当店について" style="font-weight:bold; font-size: 14.5px; color:#999; padding:0px 10px; height: 50px; line-height: 49px; text-decoration: none;" onmouseover="this.style.color='#F982A3'" onmouseout="this.style.color='#999'">当店について</a></div>
【補足】
フリーページを別画面（別タブ）で表示させる場合は、「<a href="【【フリーページURL】"」の後に
以下のソースをコピーして貼り付けてください。
target="_blank"
最後に、このようなページをフリーエリアに掲載されるショップ様もいらっしゃいますので、
フリーエリアに掲載する方法も以下に説明します。
店長ナビ＞デザイン設定＞フリーエリア＞任意のフリーエリア編集ボタン
例）画面左上のメニュー下に表示させる場合
フリーエリア1の編集ボタンを押します。
「かんたんモードに切り替える」ボタンを押します。（HTMLモードに…の場合はそのままにしておきます）
「リンク」ボタンを押していただき、以下の様に入力します。
ラベル…当店について
URL…【フリーページURL】
文字…【任意】（「当店についての説明はこちら」など）
画像…【任意】
追加ボタンを押すとイメージが表示されますので、問題なければ保存をしていただければ完了です。
（入力した文字などが間違っている場合は、直接イメージを編集いただくか、
保存せずにキャンセルしていただき、再度登録しなおしてください）
長文となってしまいましたが、説明は以上です。
よろしくお願い致します。
メニューバーに項目を追加して別ウインドー設定にチェックを入れてるのですが別ウインドーが立ち上がりません 教えてください
弊社環境にて確認したところ、
ヘッダーメニューのリンク(カテゴリ以外)は
設定の通りに別ウィンドウで表示されております。
恐れ入りますが、カテゴリのリンクについては、
現状、別ウィンドをでの表示に対応しておりません。
カテゴリ以外で別ウィンドウ表示されない場合は、
ブラウザのポップアップブロック機能により制限されている場合がございます。
上記以外で別ウィンドウ表示されない項目がございましたら、
お手数ですが詳細を踏まえて再度お問い合わせください。
改めて確認させていただきます。