このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、自由記入欄に画像切り替えギャラリーを作成する方法をご紹介します。
写真をサムネイル画像をクリックすることで、切り替えて表示します。
画像サイズ
横幅 |
500ピクセル ※一部テンプレートでは、490ピクセル
※画像サンプル500ピクセル |
縦幅 |
自由
※画像サンプル300ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の内容をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
<div class="center_box">
<div class="display_box">
<div id="contents01" class="contents_box">
<a href="http://cafe0808.ocnk.net/product/1">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/001.jpg" alt="写真"
border="0" /></a>
</div>
<div id="contents02" class="contents_box">
<a href="http://cafe0808.ocnk.net/product/1">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/002.jpg" alt="写真"
border="0" /></a>
</div>
<div id="contents03" class="contents_box">
<a href="http://cafe0808.ocnk.net/product/1">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/003.jpg" alt="写真"
border="0" /></a>
</div>
<div id="contents04" class="contents_box">
<a href="http://cafe0808.ocnk.net/product/1">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/004.jpg" alt="写真"
border="0" /></a>
</div>
</div>
<div class="navi_box">
<ul>
<li>
<a href="#contents01">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/001.jpg" alt="写真" />
</a>
</li>
<li>
<a href="#contents02">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/002.jpg" alt="写真" />
</a>
</li>
<li>
<a href="#contents03">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/003.jpg" alt="写真" />
</a>
</li>
<li>
<a href="#contents04">
<img src="http://cafe0808.ocnk.net/data/cafe0808/image/004.jpg" alt="写真" />
</a>
</li>
</ul>
</div>
</div>
<div class="display_box">
について |
大きな画像を表示する枠です。 |
<div id="contents01"
class="contents_box">
～
<div id="contents04"
class="contents_box">
について |
各画像を格納する枠です。
id名は、contents01～contents04のように連番で付けて下さい。
※今回の例では、画像を表示していますが、テキストやhtmlタグを表示することも可能です。
|
<a>
について |
表示した大きな画像からのリンクを設定できます。
|
<img>
について |
大きな画像を表示します。
作成いただいた画像ファイルを指定して下さい。
|
<div class="navi_box">
について |
サムネイル画像を表示する枠です。
|
<ul><li>
について |
<ul><li>タグを利用してサムネイル画像を横に並べます。
|
<a href="#contents01">
～
<a href="#contents02">
について |
サムネイル画像をクリックした際に、大きな画像を切り替える指定です。
ページ内リンクを利用して切り替えします。
上記、contents01～contents04のように連番で付けたid名を利用します。
#contents01のように#を付けて指定して下さい。
※ページ内リンク利用のため、サムネイル画像クリック時に、大きな画像の上部にページ位置が移動します。
|
<img>
について |
サムネイル画像を表示します。
今回の例では、スタイルシートで強制縮小させますので、大きな画像と同様の画像を指定して下さい。
|
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面から、下記の指定をコピーしてスタイルシート内に貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.display_box {
width: 500px;
height: 300px;
overflow: hidden;
}
.contents_box {
width: 500px;
height: 300px;
}
.contents_box img {
width: 500px;
height: 300px;
border: none;
}
.navi_box ul {
margin: 0px;
padding: 0px;
}
.navi_box li {
list-style: none;
display: inline;
}
.navi_box img {
border: 3px solid #000000;
width: 100px;
height: 60px;
margin: 5px 5px 0px 0px;
}
.navi_box A:hover img {
border: 3px solid #FF0000;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
.display_box
について |
widthとheightが画像表示エリアのサイズです。
overflow: hidden; ではみ出した部分(※他の画像部分)を非表示にしています。
作成いただいた画像ファイルの横幅と縦幅を指定して下さい。
|
.contents_box
|
widthとheightが各画像を格納する枠のサイズです。
作成いただいた画像ファイルの横幅と縦幅を指定して下さい。
|
.contents_box img |
widthとheightが大きな画像のサイズです。
作成いただいた画像ファイルの横幅と縦幅を指定して下さい。
※ここではスタイルシートにて横幅と縦幅を指定していますが、imgタグ内で指定いただいても結構です。
|
.navi_box ul、.navi_box li
について |
サムネイル画像を横に並べて表示するようの指定です。
特に変更の必要はありません。
|
.navi_box img |
widthとheightがサムネイル画像のサイズです。
ご希望のサイズに変更して下さい。
※大きな画像を利用していますので、縦横比は大きな画像と同様にして下さい。
※ここではスタイルシートにて横幅と縦幅を指定していますが、imgタグ内で指定いただいても結構です。
|
前号へ
