このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回は、自由記入欄の写真をランダムで切り替える方法をご紹介します。
トップページにアクセスする度に、設定しておいた数枚の画像をランダムに表示します。
画像サイズは下記のように作成して下さい。
横幅 |
基本的には、作成サイズは自由です。
※画像サンプル：500ピクセル |
縦幅 |
基本的には、作成サイズは自由です。
※画像サンプル：300ピクセル |
画像の保存形式は、GIF、JPG、PNG形式のいずれかで保存して下さい。
サンプル画像
※メルマガ掲載のため縮小表示しています。
サンプルではこのサイズの画像を5枚使用しています。
・画像
管理画面→デザイン管理→画像専用管理画面をクリックして下さい。
コンテンツフォルダをクリックし、作成した画像をアップロードして下さい。
赤枠部分が、アップロード箇所、青枠部分にアップロードされた画像が表示されます。
自由記入欄を利用してhtmlタグを記載します。
管理画面→デザイン管理→画像とコメントの設定をクリックして下さい。
自由記入欄に下記の指定をコピーして貼り付けて下さい。
※表示位置は、表示とレイアウトの設定から中央エリアに設定して下さい。
基本的には、JavaScriptを貼り付け、画像URL、リンク先URL、alt属性を指定するだけです。
<SCRIPT language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
alt = new Array();
jmp[0] = "http://cafe0808.ocnk.net/product/9";
jmp[1] = "http://cafe0808.ocnk.net/product/4";
jmp[2] = "http://cafe0808.ocnk.net/product/2";
jmp[3] = "http://cafe0808.ocnk.net/product/1";
jmp[4] = "http://cafe0808.ocnk.net/product/7";
img[0] = "http://cafe0808.ocnk.net/data/cafe0808/image/rphoto001.jpg";
img[1] = "http://cafe0808.ocnk.net/data/cafe0808/image/rphoto002.jpg";
img[2] = "http://cafe0808.ocnk.net/data/cafe0808/image/rphoto003.jpg";
img[3] = "http://cafe0808.ocnk.net/data/cafe0808/image/rphoto004.jpg";
img[4] = "http://cafe0808.ocnk.net/data/cafe0808/image/rphoto005.jpg";
alt[0] = "Cafe Chair";
alt[1] = "Sofa";
alt[2] = "Cafe Table";
alt[3] = "Cafe Chair";
alt[4] = "Dining Chair";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' alt='"+alt[n]+"' border='0'>");
document.write("</a>");
//-->
</SCRIPT>
編集後、「登録処理を完了する」ボタンをクリックして下さい。
jmp[0]～
jmp[4]
について |
この部分が画像からのリンク先となります。
http://cafe0808.ocnk.net/product/9
画像に関連するリンク先URLを記載して下さい。
※必ず、URLを部分だけを変更し ""; は削除しないようにして下さい。 |
img[0]～
img[4]
について |
この部分が画像の挿入部分となります。
http://cafe0808.ocnk.net/data/cafe0808/image/rphoto001.jpg
画像URLを記載して下さい。
※必ず、URLを部分だけを変更し ""; は削除しないようにして下さい。 |
alt[0]～
alt[4]
について |
この部分が画像のalt属性設定箇所となります。
Cafe Chair
画像に関連する文言を設定して下さい。
※必ず、URLを部分だけを変更し ""; は削除しないようにして下さい。 |
各設定
について |
それぞれの[0]～[4]は、連動するように設定して下さい。
例えば、img[0]の画像に設定したいリンク先は、jmp[0]に設定して下さい。
|
前号へ
