Ｃｏｌｏｒ_ｆｒａｍｅ_Ｓｌｉｄｅ
１．見本
1-1. http://shtezuka.com/photograph/photo/minamialps_slide/minamialps.html
２．ソース
1-1.このソースは、見本1-1のものです。
<html>
<head>
<title>Color frame Slide</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language=javascript>
<!--
//額縁製作（各自工夫して作ってください）
gakubuti_url="./";//背景イメージファイルを別の場所に置くときは、そのＵＲＬ
gakubuti=new Array();
//-------------------------------------------------------------
// 額の[NO]="額 縁 ，縁 取 ，台 紙 ，写真枠 ,ラベル色 ,文字色"
//------------------------------------------------------------
gakubuti[1]="g01.gif,#dddddd,h01.gif,#cccccc,#ccbb00,#000000";
gakubuti[2]="g02.gif,#8888aa,h02.gif,#cccccc,#886600,#ffffff";
gakubuti[3]="g03.gif,#aabbaa,h03.gif,#cccccc,#ccbbff,#ff0000";
gakubuti[4]="g04.gif,#bbaa88,h04.gif,#cccccc,#ccbb00,#0000ff";
gakubuti[5]="g05.gif,#bbbbbb,h05.gif,#cccccc,#ffffff,#000000";
gakubuti[6]="g06.gif,#bbbbbb,h06.gif,#cccccc,#ccbbcc,#000000";
gakubuti[7]="g07.gif,#ffffbb,h07.gif,#cccccc,#ccbb00,#000000";
gakubuti[8]="g08.gif,#bbbbbb,h08.gif,#cccccc,#ccbbcc,#000000";
//------------------（色コード又はイメージファイル）-----------
//サムネイル初期設定
sw=120; //サムネルの横幅
sh=Math.floor((sw/4)*3); //サムネルの縦幅（縦横比を３対４対で計算）
xn=4; //サムネールの横に並べる枚数
gaku=1; //０＝サムネール額なし/１＝額あり/２＝影付
//拡大表示初期設定
moji_size=18; //コメントの文字サイズ
at_speed=5000;//自動スライド間隔（ミリ秒）
dt=new Array();syasin_n=0;
ur="./"; //写真を別の場所に置くときは、そのＵＲＬ
//----------------------------------------------------------------------------------
//"サムネルファイル名（省略可） ，作品ファイル名 ，タイトル,コメント，額縁ＮＯ,作品縦横,表示横幅”
//作品縦横（縦＝2、横＝1又は省略） 表示横幅＝作品の横ピクセル数、省略時はデイスプレーの７０％（縦型は４５％）
//-----------------------------------------------------------------------------------
syasin_n++;dt[syasin_n]=",0010004.jpg,自宅周辺から見た甲斐の山々,南アルプス前衛 櫛形山,1,1,750"; //横型、横幅=750
syasin_n++;dt[syasin_n]=",0010005.jpg,自宅周辺から見た甲斐の山々,南アルプス 間ノ岳,2,1,750"; //横型、横幅=750
syasin_n++;dt[syasin_n]=",0010006.jpg,自宅周辺から見た甲斐の山々,南アルプス 甲斐駒ケ岳,3,1,750"; //横型、横幅=750
syasin_n++;dt[syasin_n]=",0010007.jpg,自宅周辺から見た甲斐の山々,南アルプス 鳳凰三山 ,4,1,750"; //横型、横幅=750
syasin_n++;dt[syasin_n]=",0010008.jpg,自宅周辺から見た甲斐の山々,八ヶ岳,5,1,750"; //横型 横幅＝750
syasin_n++;dt[syasin_n]=",0010009.jpg,自宅周辺から見た甲斐の山々,茅ヶ岳,6,1,750"; //横型、横幅＝750
syasin_n++;dt[syasin_n]=",0010014.jpg,自宅周辺から見た甲斐の山々,南アルプス 甲斐駒ケ岳〜鋸山 ,7,1,750"; //横型、横幅＝750
syasin_n++;dt[syasin_n]=",0010018.jpg,自宅周辺から見た甲斐の山々,秩父多摩国立公園 金峰山望遠,8,1,750"; //横型 横幅＝750
//-----------------------------------------------------------------------------------
//-->
</SCRIPT>
</head>
<body>
<center>
<font size="6">Color frame Slide</font>
<br><br>
<script language="JavaScript" src="http://shaw-id.cool.ne.jp/js_file/gaku.js">
</script>
</center>
</body>
</html>
３．別ファイル「gakujs」
次からダウンロードし、上記２を保存するフォルダに保存します。なお改造もできますが、このまま使用してください。
gaku.js
６．設置方法
◎ホームページ作成ソフトを使用する場合
6-1.新規ページのソースを開きます。
6-2.使用ソフト固有のHTMLダグをいったん全て削除します。
6-3.ソースページが白紙状態になったところで、上記２をコピーし「貼り付け」します。
6-4.適宜な名前を付けて保存します。(***.html)
◎エディタを使用する場合
6-5.上記２のソースをコピーします。
6-6.エディタを開き、「貼り付け」します。
6-7.名前を付けて保存します。(注 保存する場合の拡張子は、html またはhtm です。)
７．.ソースの書き換え
次の箇所を書き換えてください。
7-1.タイトル
お好きな名前に書き換え
7-2.額縁製作
好みで額縁を自作することもできますが、このままでも結構です。
額縁を自作する場合は保存場所を指定するために次のように書き換えてください。
gakubuti_url="http://www.ne.jp/***/****/****/gaku/";
7-3.額のNO外
次のように書き換えてください。
7-4.サムネイルの初期設定
7-5.サムネールの横に並べる枚数
7-6.サムネール額の飾り
好みで変えてください。変える場合は数値で設定します。
7-7.コメントの文字サイズ
数値を大きくすると文字も大きくなります。
7-8.自動スライド間隔
数値を変えることにより、スライドの速度が変わります。数値小は早く、数値大はゆっくりとなります。
7-9.写真ファイルを別のところにおく場合
同一フォルダに入れる合は、書き換える必要はありません。
7-10.サムネルファイル名
7-11.jsファトルの場所
2.でダウンロードした「gakujs」ファイルの保存場所をURLで指定します。
８．その他
8-1.作品の横幅は、この額縁の場合800ピクセルくらいがバランス的に見て上限です。
8-2.作品の縦長はデイスプレイをはみ出し(スクロールが必要)醜くなりますので、その場合は横幅300ピクセルくらいにすると良いと思います。
8-3.「拡大作品」の上部左右に表示される「Back」「Aut」「Next」「Close」は「gaku.js」ファイルで文字色を変えることが出来ますが、全て同一色ですので、「額イメ
ージ」に近い色ですと見にくいので、「額イメージ」を変えてください。
９．額縁イメージ
このイメージ(32X32ピクセル)はサンプル(1.の見本で使用したものです。)で、好みに合わせ自作することをお勧めします。
ｇ01.ｇｉｆ 
ｇ02.ｇｉｆ 
ｇ03.ｇｉｆ. 
ｇ04.ｇｉｆ 
ｇ05.ｇｉｆ 
ｇ06.ｇｉｆ 
ｇ07.ｇｉｆ
ｇ08.ｇｉｆ
10．台紙イメージ
このイメージのサイズは自由ですので、好みに合わせて自作することをお勧めします。
h01.gif 
h02.gif 
h03.gif 
h04.gif
h05.gif 
h06.gif 
h07.gif 
h08.gif
* このソースの基本は「OPONさん」が作成したもので、ここでは二次加工しています。