フリーページのナビゲーション画像をそれぞれ違うものに設定したい

2017-09-28 14:47

自由記入欄にて新たにメニューを制作していただく方法となります。その際、フリーページの各メニューは非表示に設定してください。

●スタイルシートで設定する
下記のように新たにメニュー用のHTMLタグを自由記入欄に貼り付けてください。

それぞれのフリーページメニューについては、現状はfree_menuとしていますが
free_menu_1?free_menu_4のようにクラス名を変更していただき、スタイルシート内に記載を追加してください。

<div class="side_box2">
<div class="navi">
<div class="free_menu_1"><a href="https://demo.ocnk.net/page/1">フリーページ1</a></div>
<div class="free_menu_2"><a href="https://demo.ocnk.net/page/2">フリーページ2</a></div>
<div class="free_menu_3"><a href="https://demo.ocnk.net/page/3">フリーページ3</a></div>
<div class="free_menu_4"><a href="https://demo.ocnk.net/page/4">フリーページ4</a></div>
</div>
</div>


上記設定後、スタイルシート内に上記で指定したside_box2の記載を追加してください。
基本的には、スタイルシート内に既にside_boxという記載がございますので、そちらをコピーしていただき、最下部に貼り付けてください。
その後、クラス名をside_box2と変更してください。
特定商取引法等のメニュー部分の下に空白が入ります。
空白を削除する場合は、下記のようにmargin-top: -7px;と*margin-top: -10px;を追加記載してください。

.side_box2 {
width: ****;
height: ****;
padding: ****;
margin: ****;
margin-top: -7px;
*margin-top: -10px;
}



スタイルシートの記載例 
※各テンプレートで記載が異なりますので、参考までにご覧ください。

例えば、free_menu_1の場合、下記のような記載をスタイルシート内にコピーして貼り付けください。
※貼り付け位置は最下部にお願い致します。
background-image: url(image/画像ファイル名.gif);が背景画像部分となりますので、画像ファイル名を指定して下さい。画像ファイルは別途画像専用管理画面からアップロードして下さい。画像URLは、http://?の記載ではなく、image/?の相対パスで記載してください。
****の部分は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないでください。

.free_menu_1 {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: url(image/画像ファイル名.gif);
}



●画像で設定する
imgタグにて画像で設定される場合は、画像ファイルを作成いただき、下記のようなHTMLタグを記載してください。

<div class="side_box" style="margin-top: -10px;">
<a href="https://demo.ocnk.net/page/1"><img src="画像URL" border="0" /></a>
<a href="https://demo.ocnk.net/page/2"><img src="画像URL" border="0" /></a>
<a href="https://demo.ocnk.net/page/3"><img src="画像URL" border="0" /></a>
<a href="https://demo.ocnk.net/page/4"><img src="画像URL" border="0" /></a>
</div>


※自由記入欄への画像URL記載は、左エリアに設定される場合、https://demo.ocnk.net/?のように「s」を付けて下さい。独自ドメインの方は、共用ドメインで記載してください。