[無料][複]ホームページ制作過程で仮にIFRAMEで設置するダミーカルーセルスライドショー


・ ダミーカルーセルスライドショーの説明
 ホームページの制作過程で、ページデザインやレイアウトの確認のために、仮に設置するカルーセルスライドショーです。 写真を変更する事はできません。 自分の写真のスライドショーは後で正式に決定する事にして、とりあえず完成予定ページのモックが見たい。 レイアウトの関係上、スライドショーのサイズを調節する必要がある。 などに利用してください。
 スライドショーの種類は、3画像を表示するタイプが2種類、1画像を表示するタイプが1種類、があります。 サイズや縦横比は自由に設定でき、写真は設定したサイズに自動リサイズされ、設定したサイズの縦横比に自動トリミングされます。 IFRAMEを使用するため、一つのページに複数個を設置できます。
 スライドショーはドラッグ(スワイプ)やマウスホイールでも操作できます。 また、スライドショーにマウスを重ねると操作盤が現れます。 スマホやタブレットでは、スライドショー内をタップすると現れ、スライドショーの外(全画面時は停止ボタン)をタップすると消えます。
 このスライドショーは無料で使用できますが、プログラムの改良や入れ替えで、使用できなくなる事があります。 有料版はありません。 なお、使用している写真は、 無料写真サイトUnsplash(https://unsplash.com/) から借用しています。




見本1:3画像タイプDummy_DrSwMwCarALL_0_F_02で引数は900(写真の幅)。サイズは width="100%" height="500px" で全幅に設定。
・ 見本1のソース(3画像を表示するタイプ02を全画面幅で表示する)
 スライドショーを貼り付ける場所に、height="〜" 部分に縦のサイズを書いて貼り付けてください。 src="〜Dummy_DrSwMwCarALL_0_F_02.html?900" の?900は、写真の幅を900ピクセルで表示するという意味です。





見本2:3画像タイプDummy_DrSwMwCarALL_0_F_03で引数は900(写真の幅)。サイズは width="100%" height="500px" で全幅に設定。
・ 見本2のソース(3画像を表示するタイプ03を全画面幅で表示する)
 スライドショーを貼り付ける場所に、height="〜" 部分に縦のサイズを書いて貼り付けてください。 src="〜Dummy_DrSwMwCarALL_0_F_03.html?900" の?900は、写真の幅を900ピクセルで表示するという意味です。





見本3:1画像タイプDummy_DrSwMwCarALL_0_F_01。サイズは width="100%" height="500px" で全幅に設定。
・ 見本3のソース(1画像を表示するタイプ01を全画面幅で表示する)
 スライドショーを貼り付ける場所に、height="〜" 部分に縦のサイズを書いて貼り付けてください。





見本4:3画像タイプDummy_DrSwMwCarALL_0_F_02で引数は720(写真の幅)。サイズは width="900px" height="400px" で固定サイズに設定。
・ 見本4のソース(3画像を表示するタイプ02を固定サイズで表示する)
 スライドショーを貼り付ける場所に、width="〜" height="〜" 部分に縦横のサイズを書いて貼り付けてください。 src="〜Dummy_DrSwMwCarALL_0_F_02.html?600" の?600は、写真の幅を900ピクセルで表示するという意味です。





見本5:3画像タイプDummy_DrSwMwCarALL_0_F_03で引数なし。サイズは width="980px" height="480px" で固定サイズに設定。
・ 見本5のソース(3画像を表示するタイプ03を固定サイズで表示する)
 スライドショーを貼り付ける場所に、width="〜" height="〜" 部分に縦横のサイズを書いて貼り付けてください。 src="〜Dummy_DrSwMwCarALL_0_F_03.html?720" の?720は、写真の幅を900ピクセルで表示するという意味です。





見本6:1画像タイプDummy_DrSwMwCarALL_0_F_01。サイズは width="900px" height="480px" で固定サイズに設定。
・ 見本6のソース(1画像を表示するタイプ01を固定サイズで表示する)
 スライドショーを貼り付ける場所に、width="〜" height="〜" 部分に縦横のサイズを書いて貼り付けてください。


・ 新しいタブに全画面で表示する場合(1画像を表示するタイプ01)
 IFRAMEではなく直接リンクで開くと、 この様に 全画面スライドショーになります。

・ 新しいタブに全画面で表示する場合(3画像を表示するタイプ02)
 IFRAMEではなく直接リンクで開くと、 この様に 全画面スライドショーになります。 src="〜Dummy_DrSwMwCarALL_0_F_02.html?900" の?900は、写真の幅を900ピクセルで表示するという意味です。

・ 新しいタブに全画面で表示する場合(3画像を表示するタイプ03)
 IFRAMEではなく直接リンクで開くと、 この様に 全画面スライドショーになります。 src="〜Dummy_DrSwMwCarALL_0_F_02.html?900" の?900は、写真の幅を900ピクセルで表示するという意味です。



[PR]

・ 注意事項
 このページは文字コード「Shift_JIS」で書いています。他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。




All Rights Reserved. Copyright (C) 2002- Miyake_kobo.