自由記入欄のボタン画像をマウスオーバーで変更させたい。
→サンプルページ
STEP1 自由記入欄を使用してHTMLタグを挿入する
「デザイン管理」>「画像とコメントの設定」
画像とコメントの設定→コメント→自由記入欄に下記のタグを貼り付けて下さい。
挿入タグ例 ・ボタン部分は太字の部分になります。 ・スタイルシートを使用して、マウスオーバーを制作しますので、必ず下記のようにclassを指定してdivタグで囲んで下さい。 その際、各ボタンで違う画像を使用する際は、下記のようにmoreinfo01やmoreinfo02のように違うclass名を使用して下さい。 ・アンカー部分(#)はご利用のページに合わせてリンク先のURLを設定して下さい。 --------------------------------------------------------------------------------------- <table width="500" border="0" cellspacing="0" cellpadding="10"> <tr align="center"> <td width="250"><p><img src="写真画像URL" width="200" height="200" alt="" /></p> <div class="moreinfo01"><a href="//www.ocnk.net/faq/?sid=31653520&lang=ja&action=faq&cat=281597&id=273&artlang=ja#"><span>イームズ商品特集</span></a></div></td> <td width="250"><p><img src="写真画像URL" width="200" height="200" alt="" /></p> <div class="moreinfo02"><a href="//www.ocnk.net/faq/?sid=31653520&lang=ja&action=faq&cat=281597&id=273&artlang=ja#"><span>カリモク商品特集</span></a></div></td> </tr> </table> --------------------------------------------------------------------------------------- |
STEP2 設定を完了するボタンをクリックして下さい。
STEP3 スタイルシートに上記で設定したclass指定を追加します。
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
(3)下記のサンプルスタイルシートの指定を追加編集して下さい。
上記で設定していただいた、class名(この場合は.moreinfo01と.moreinfo02)の指定を追加します。
下記のようにボタン画像を背景画像を使用して表示させます。
■各指定の説明
width: 160px; ・・・・ボタン画像の横幅
height: 40px; ・・・・ボタン画像の縦幅
display: block; ・・・・ブロック要素とする
background-image: url(ボタン画像URL); ・・・・ボタン画像の画像URL(※各画像が違う場合は、違う画像URLを設定)
visibility: hidden; ・・・・自由記入欄で記載したテキストを非表示にします。
text-indent: -9999px; ・・・・自由記入欄で記載したテキスト非表示にします。
■アンカー指定について
A:hoverの背景のみ、マウスオーバー時のボタン画像を指定しています。他の指定を変更することもできます。
link(通常のリンク)、active(クリックした瞬間のリンク)、visited(訪問済みのリンク)、hover(マウスオーバー時のリンク)
■画像ファイルのアップロード
画像専用管理画面から掲載したい画像ファイルをアップロードして下さい。その後、画像URL部分にその画像URLを記載して下さい。 画像ファイルのURLはスタイルシート内の場合、絶対パスでも相対パスでも結構です。
例) https://demo.ocnk.net/data/demo/image/test.jpg もしくは image/test.jpg
また、左エリアに画像を挿入される際は、https://のようにsを記載して下さい。
■サンプルスタイルシート |
/********************************************************************/ /* 自由記入欄ボタン用 */
/* 詳細はこちらボタン01 */
.moreinfo01 A:active {
.moreinfo01 A:visited {
.moreinfo01 A:hover {
/* 詳細はこちらボタン02 */
.moreinfo02 A:active {
.moreinfo02 A:visited {
.moreinfo02 A:hover {
|
(4)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(5)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。