このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
今回は、中央エリアに配置したバナー画像をマウスオーバーで切り替える方法をご紹介します。
マウスオーバーはJavaScriptを利用して行うことが多いですが、ここではスタイルシートを利用します。
バナーに使用する画像を作成します。
基本的にはサイズは、横幅最大500pxにて作成して下さい。
画像サイズは下記のように作成して下さい。
横幅 |
最大500ピクセル (※一部のテンプレートでは490pxの場合があります。)
※サンプル：500ピクセル |
縦幅 |
自由
※サンプル：400ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
画像を作成される際、下記のように通常表示部分とマウスオーバー部分の画像を1つの画像にして作成して下さい。
例えば、縦幅200pxの画像を使用する場合は、200px＋200pxで400pxの画像を作成して下さい。
サンプル画像
※メルマガ掲載のため縮小表示
作成した画像をアップロードします。
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
|
商品画像と区別するためにも、コンテンツフォルダにアップロードして下さい。整理にも役立ちます！
|
自由記入欄を利用してhtmlタグを記載します。
基本的には、imgタグは利用しません。ここでは、<a>タグの背景画像を利用してバナー画像を挿入します。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の指定をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
<div class="center_box">
<div class="center_image"><a href="リンク先"><span>Chair特集</span></a></div>
</div>
編集後、「登録処理を完了する」ボタンをクリックして下さい。
スタイルシートの編集を利用して、タイトルを変更します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.center_image a {
display: block;
width: 500px;
height: 200px;
}
.center_image a span {
visibility: hidden;
text-indent: -9999px;
font-size: 2px;
}
.center_image A:link,
.center_image A:visited {
background-image: url(image/center_image.jpg);
background-position: top;
text-decoration: none;
}
.center_image A:hover {
background-image: url(image/center_image.jpg);
background-position: bottom;
text-decoration: none;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
.center_image a
について |
<a>タグをブロック要素に変換し、画像表示部分の横幅と縦幅を指定しています。
サンプルでは、画像を表示させる横幅：500pxで縦幅：200pxとなります。
STEP1でも記載しておりますが、通常表示画像とマウスオーバー時の画像を1つの画像(縦幅:400px)として作成していますが、画像の表示幅は半分の縦幅(200px)となります。
|
.center_image a span
について |
htmlタグ上に記載したテキスト(※サンプルの場合、Chiar特集)を非表示にするための指定です。
|
.center_image A:link,
.center_image A:visited
について |
通常表示時のバナー画像指定部分となります。
background-image:
url(image/center_image.jpg);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/center_image.jpg);
background-position: top;
画像の上半分(上部200px)を表示するための指定となります。
|
.center_image A:hover
について |
マウスオーバー時のバナー画像指定部分となります。
background-image:
url(image/center_image.jpg);
背景画像を設定します。背景画像にて設定しますので、STEP2にてアップロードいただいた画像のURLを記載して下さい。
画像URLを記載いただく際には、必ずimage/～の相対パスにて記載して下さい。http://～の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。 記載例）
background-image: url(image/center_image.jpg);
background-position: bottom;
画像の下半分(下部200px)を表示するための指定となります。 |
|
今回は中央エリアでの例をご紹介しましたが、左エリアや右エリア等でも利用可能です。画像幅を調整することでhtmlタグが利用可能な箇所であればどこでも利用可能です。是非ご活用下さい。
|
前号へ
