自由記入欄のボタン画像をマウスオーバーで変更させたい。

2010-07-12 17:22
スタイルシートの追加編集と自由記入欄へHTMLタグを挿入することで設定できます。

→サンプルページ

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=33983508&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=33983508&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:link {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像01URL);
text-decoration: none;
}

.moreinfo01 A:active {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像01URL);
text-decoration: none;
}

.moreinfo01 A:visited {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像01URL);
text-decoration: none;
}

.moreinfo01 A:hover {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像01URL);
text-decoration: none;
}

/* 詳細はこちらボタン02 */
.moreinfo02 A:link {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像02URL);
text-decoration: none;
}

.moreinfo02 A:active {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像02URL);
text-decoration: none;
}

.moreinfo02 A:visited {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像02URL);
text-decoration: none;
}

.moreinfo02 A:hover {
width: 160px;
height: 40px;
display: block;
background-image: url(ボタン画像02URL);
text-decoration: none;
}

.moreinfo01 A span,
.moreinfo02 A span {
visibility: hidden;
text-indent: -9999px;
}

 



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

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