サブナビゲーション(商品検索、お問い合わせ、ご利用案内)を左エリアに表示させたい。

2017-09-28 15:04

スタイルシートの編集と自由記入欄へのHTMLタグの挿入することで設定できます。
→サンプルページ

STEP1 自由記入欄を使用してHTMLタグを挿入する

「デザイン管理」>「画像とコメントの設定」

画像とコメントの設定→コメント→自由記入欄に下記のタグを貼り付けてください。
商品検索部分は商品カテゴリ一覧と同様の枠を使用し、お問い合わせ、ご利用案内はナビゲーションと同様の枠を使用しています。

挿入タグ例
※お問い合わせ、ご利用案内を現状のナビゲーション部分に配置したい場合は、下記のその部分のみを別の自由記入欄に記載して表示の順番を設定してください。

●商品検索部分
---------------------------------------------------------------------------------------
<div class="side_box">
<div class="category_title">
<h3>商品検索</h3>
</div>
<div class="category_list">
<form style="margin: 0; padding: 0;"><input type="text" name="keyword" size="10" class="form" /><span class="bot_b"><input type="submit" name="Submit" value="検索" /></span></form>
</div>
</div>
---------------------------------------------------------------------------------------

●お問い合わせ、ご利用案内部分
---------------------------------------------------------------------------------------
<div class="side_box">
<div class="navi">
<div class="free_menu"><a href="https://demo.ocnk.net/contact">お問い合わせ</a></div>
<div class="free_menu"><a href="https://demo.ocnk.net/help">ご利用案内</a></div>
</div>
</div>
---------------------------------------------------------------------------------------
上記form内action部分とアンカー部分のdemoは各アカウントIDに変更してください。
form内action部分: https://アカウントID.ocnk.net/product-list
お問い合わせ:https://アカウントID.ocnk.net/contact
ご利用案内:https://アカウントID.ocnk.net/help

 

挿入タグ例
※同様の枠を使用しない場合は下記のタグをテーブルタグ等に入れてご利用ください。

●商品検索部分
---------------------------------------------------------------------------------------
商品検索:<form style="margin: 0; padding: 0;"><input type="text" name="keyword" size="10" class="form" /><span class="bot_b"><input type="submit" name="Submit" value="検索" /></span></form>
---------------------------------------------------------------------------------------

●お問い合わせ、ご利用案内
---------------------------------------------------------------------------------------
<a href="https://demo.ocnk.net/contact">お問い合わせ</a>
<a href="https://demo.ocnk.net/help">ご利用案内</a>
---------------------------------------------------------------------------------------
上記form内action部分とアンカー部分のdemoは各アカウントIDに変更してください。
form内action部分: https://アカウントID.ocnk.net/product-list
お問い合わせ:https://アカウントID.ocnk.net/contact
ご利用案内:https://アカウントID.ocnk.net/help


STEP2 設定を完了するボタンをクリックしてください。

STEP3 スタイルシートの編集からサブナビゲーションを非表示にする。

管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックしてください。

(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。

(3)下記のように編集してください。
【この色の部分】
のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないでください。

/* サブナビゲーション */
.subnavi {
width: ****;
padding: ****;
float: ****;
color: ****;
display: none;
}



(4)編集後、【登録処理を完了する】ボタンをクリックしてください。

(5)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。


■上記自由記入欄の表示位置を左に設定する

管理画面の以下のページを開きます。

「デザイン管理」>「表示とレイアウトの設定」

上記でHTMLタグを記載した自由記入欄の表示位置を左エリアに設定してください。設定後【設定処理を完了する】ボタンをクリックします。