このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、自由記入欄で配置した小さい画像にマウスオーバーすると画像を拡大表示する方法をご紹介します。
画像サイズ
横幅 |
300px以内推奨
※中央エリアの場合は、最大490px～500pxとなります。
※画像サンプル240ピクセル |
縦幅 |
200px以内推奨
※画像サンプル180ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
※ご注意点
マウスオーバー時に画像サイズが大きくなります。マウスオーバー状態は、拡大画像にも引き継ぎますので、拡大画像からマウスが外れないと解除されません。
そのため、あまり大きな画像を利用せず、選択画像の左右画像が見える範囲での作成を推奨します。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の内容をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
<div class="center_box" style="position: relative">
<ul class="zoomimage">
<li>
<a href="#">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo001.jpg"
alt="写真" border="0" />
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo001.jpg"
alt="写真" border="0" class="zoom" />
</a>
</li>
<li>
<a href="#">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo002.jpg"
alt="写真" border="0" />
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo002.jpg"
alt="写真" border="0" class="zoom" />
</a>
</li>
<li>
<a href="#">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo003.jpg"
alt="写真" border="0" />
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo003.jpg"
alt="写真" border="0" class="zoom" />
</a>
</li>
<li>
<a href="#">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo004.jpg"
alt="写真" border="0" />
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/photo004.jpg"
alt="写真" border="0" class="zoom" />
</a>
</li>
</ul>
<br class="clear-both" />
</div>
<ul><li>
について |
画像を横に並べるため<ul><li>タグを利用しています。
横に4枚並べています。※小サイズの画像を大きくされる場合は、横に並べる画像の枚数を変更して下さい。 |
<a>
について |
各画像からリンクする場合は、リンク先を指定して下さい。
リンクされない場合は、#のままにして下さい。
|
<img>
について |
<img>タグを利用して画像を挿入する箇所が2箇所あります。
上側が、通常表示している小画像となります。
下側が、マウスオーバー時の大画像となります。
※小画像は、強制縮小しますので1枚の画像を利用します。
|
<br class="clear-both" />
について |
<li>をfloat表示していますので、その解除用のタグとなります。
|
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面から、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.zoomimage A .zoom {
display: none;
}
.zoomimage A:hover .zoom {
display: block;
position: absolute;
top: -53px;
left: -70px;
z-index: 1;
border: 5px solid #000000;
}
.zoomimage A {
display: block;
position: relative;
}
.zoomimage A:hover {
display: block;
z-index: 1;
}
.zoomimage img {
vertical-align: top;
width: 100px;
height: 75px;
border: 3px solid #000000;
}
.zoomimage li {
display: inline;
list-style: none;
float: left;
margin: 0px 3px;
position: static;
}
.zoomimage .zoom {
width: 240px;
height: 180px;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
※今回の例では、画像サイズの変更箇所のみをご紹介しますので、他の箇所については、一度ご自身でお試しいただきデザイン等は変更下さい。
.zoomimage img
について |
.zoomimage img {
vertical-align: top;
width: 100px;
height: 75px;
border: 3px solid #000000;
}
このwidthとheightが初期表示の画像サイズとなります。
強制縮小しますので画像の縦横比率は、作成画像と合わせて下さい。
|
.zoomimage .zoom
について |
.zoomimage .zoom {
width: 240px;
height: 180px;
}
このwidthとheightがマウスオーバー時の画像サイズとなります。※基本的には、作成いただいた画像サイズです。
|
.zoomimage A:hover .zoom
について |
.zoomimage A:hover .zoom {
display: block;
position: absolute;
top: -53px;
left: -70px;
z-index: 1;
border: 5px solid #000000;
}
このtopとleftがマウスオーバー時に画像を中央表示にするための指定となります。
計算方法は、
拡大表示サイズから初期表示サイズを引き、2で割った値をマイナス値で指定します。
今回の例の場合、left値が横幅、top値が縦幅となります。
left値は、240-100＝140、140÷2＝70で、-70となります。
top値は、180-75＝105、105÷2＝52.5で、-53となります。
|
前号へ
