小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

文字付きホームページスライドショーの作成方法

最終更新日: 2016-07-08
ホームページのスライドショー

CMS「すぐ使えるCGI」を使ってホームページ(Webサイトのトップページ)のスライドショー(ホームページアニメーション、スライダー、オープニングフラッシュの代替)を作成する方法をご紹介します。

ホームページの画像を定期的に入れ替えるといった用途の他、お知らせなどを告知するための文字だけのスライドを作る事ができます。スライドから別ページへのリンクが可能です。

スライドショー(スライダー)の機能

表示の組み合わせ

ホームページスライドショーの設定パターン

スライドは、写真(画像)と文字(テキスト)を自由に組み合わせできます。

文字だけのスライド表示も可能です。さらにどの表示の場合でも、別のページへのリンクが可能です。

表示サイズ

縦横比の異なる画像の調整

表示サイズは変更できますが、変更したサイズで固定になります。Webサイトのデザインに合わせて導入時に決定して下さい。

表示サイズに合わない画像がアップロードされた時は、横は指定サイズまで引き伸ばしされます。縦は、設定で以下から選ぶことができます。

  • 画像をゆがめて縮小・拡大して表示サイズに収める
  • 画像がゆがまないように、表示サイズでカットする(画像の上端が表示されます)

スライドショーの動作

スライドショーの動作は以下の通りです。

  • 画像が一定時間で切り替わり表示されます。
  • 移動用のボタンのクリックで好きなスライドに移動できます。
  • スライドの上でクリックすると、他のページへリンクできます(リンクなしも可)。
以下の点は調整が可能です。
  • スライド切り替わりのスピード
  • スライド切り替え方法(フェード/一旦消える/紙芝居風)
  • 移動リンクの表示有無
  • 移動リンクの色
  • スライド上にマウスが来た時に止めるか動き続けるか

スライドショーの管理機能

スライドショー管理ツール
管理画面からは、以下の事が可能です。
  • 画像の変更
  • 表示文字(テキスト)の設定
  • リンク先の指定
  • 表示の順番の変更
  • スライドを増やす、減らす
画像、文字、リンク先は全てが無くても構いません。

このツールの使い方

ダウンロードと設置

下のボタンから製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

文字付きスライドショー作成ツール(CMS)ダウンロード ※お試し利用は1ヶ月間無料です。

動作確認

「8. 設置完了」まで設置がうまく行ったら、テストで2件新規登録して下さい。

表示確認

管理画面一覧の「ページをチェック」→「iframe で確認」を選び、デモと同様の表示になるかを確認して下さい。

スライドショーの設定変更方法

「ステップ by ステップガイド」の「9. やりたいことができるかの確認」はこのツールを初期設定で使う場合の説明ですので飛ばして、代わりにこのページの説明をご覧下さい。このページでは、スライドショーの設定に必要なポイントをご紹介します。

初めての方

初めて「すぐ使えるCGI」をお使いでこのページで説明している設定変更方法が全くイメージできない場合は、先に「テンプレート解説」にざっと目を通して下さい。

変更できる点

  1. スライドショー画像のサイズ
  2. 画像のゆがみの調整
  3. 文字だけのスライドのための背景画像の設定
  4. 文字のサイズ・色・位置の変更
  5. スライド切り替えの間隔
  6. 最初のスライドが切り替わるまでの時間
  7. スライド切り替えの方法
  8. スライド移動ボタンの色
  9. 前後リンクの表示を消す
  10. スライド移動リンクを消す

全般手順

以下に各設定方法をご説明しますが、いずれの場合も設定を変更したらサーバへの反映作業を行って下さい。反映作業とは、以下の手順です。

  1. 変更したファイルをサーバに上書きアップロード
  2. 管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押す
  3. ブラウザのキャッシュをクリア
  4. 「ページをチェック」→「iframe で確認」から表示を再読み込みして確認

変更対象ファイルについて

スライドショーを後でどのようにWebサイトに組込むかによって、一部の設定変更は変更対象ファイルが違います。組み込み方法の選択肢はインラインフレーム(アイフレーム、iframe)か SSI(Server Side Include)です。

このページでは、ひとまず動作確認が簡単なインラインフレーム用のファイルの編集を説明します。Webサイトに導入の際もまずはインラインフレーム版で表示を確認した後、それをコピーして SSI の設定を行って下さい。設定方法は後述します。

スライドショー画像のサイズ

このスライドショーは固定サイズです。表示するサイズを決めて下さい。サイズを決定したら、以下の2点を変更します。順番に説明します。

  • スタイルシートの編集
  • 自動リサイズの設定

スタイルシートの編集

まずは webdir/parts/css/site.css 内のCSS(スタイルシート)設定を変更して下さい。以下の様な設定がしてありますので、幅は青字部分を、高さは赤字部分を変更して下さい。同じ数値が何か所にもありますが、全て設定して下さい。

【注意点】幅は単位をピクセル(px)の固定数値で設定して下さい。

/* スライダー用設定 */
#slides {
	width:900px; /* 画像の幅 */
	height:300px; /* 画像の高さ */
	z-index:100; /* この値は変更しないで下さい */
	position: relative;
}

.slides_container {
	width:900px; /* 画像の幅(数値での指定が必須) */
	display:none;
}

.slides_container div {
	width:900px; /* 画像の幅(数値での指定が必須) */
	height:300px; /* 画像の高さ */
	display:block;
}
.slides_container div a.imagelink {
	width:900px; /* 画像の幅 */
	height:300px; /* 画像の高さ */
	display:block;
	background-position: center left;
	background-repeat: no-repeat;
	background-image: url(../img/default_bg.png); /* 画像がアップロードされなかった場合の画像 */
	background-color: #ff9933; /* 画像が無い場合は背景色のみでもOK */
	padding: 0;
	z-index:200;
	text-decoration: none;
}

自動リサイズの設定

表示したいサイズに画像がリサイズされるように設定します。この設定により、表示が最大限速くなります。

admin/admin.cgi を開き、以下の青字部分を上で設定した幅の数値に変更して下さい。

#------------------------------[line 320]-->[line 290]-->[line 325]--
# 画像ピクセルサイズの上限設定(固定画像欄)
#--------------------------------------------------------------------
# 固定画像欄に画像がアップロードされた場合に画像のピクセル
# サイズを縮小するかの設定です。画像の幅と高さの上限をピクセル数で設定
# して下さい。
# 指定したより大きな画像がアップロードされた場合、指定サイズに収まる
# ように縮小されます。
# 制限を行わない場合は 0 を指定して下さい。(縦横どちらかのみ 0 でも可。)

# 上の行=幅:  ※左の数字から順に画像 1-5 のサイズを指定
# 下の行=高さ:※(同上)
$conf{max_imagewidth}  = [900,1200,1200,1200,1200];
$conf{max_imageheight} = [    0,1200,1200,1200,1200];

画像のゆがみの調整

縦横比の異なる画像の調整

このスライドショーは固定サイズです。画像は表示するのと同じ縦横比のものをアップロードすると一番きれいに表示できますが、設定したサイズ以外の画像がアップロードされた時の表示方法を設定できます。

初期設定は画像をゆがめて表示領域に収まるようにしてあります。

画像をゆがめずに一部分だけ表示するには、 webdir/parts/css/site.css を編集して下記の通り青字部分を削除して下さい。画像の上の部分が表示されるようになります。

/* 画像の表示指定 */
.slides_container div a img {
	width:100%; /* 画像の幅 */
	height:100%; /* 縦横比が歪んでも全体を表示 */
	/* overflow: hidden; 幅を合わせてあふれたら下を切り取る場合は上の1行の代りにこちら */
	position: absolute;
	border: none;
	left: 0;
	top: 0;
}

スライド切り替えの間隔

一つの画像が表示されている時間を変更するには、 templates/article/article_list.html 内の JavaScript 設定を変更して下さい。以下のような設定がありますので、赤字と青字の数字を変更して下さい。赤字は1枚のスライドが表示されている時間を、青字はスライドの切り替えのために使う時間を指定します。単位はいずれもミリ秒(千分の一秒)です。初期設定では「2500」と「1000」なので、各スライドは 2.5秒ずつ表示された後、1秒掛けて切り替えてが行われます。

<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			 : (省略)
			play: 7000, /* 1枚目が表示されてから2枚目に変わるまでの時間。ミリ秒(1000=1秒)。 */
			pause: 2500, /* 2枚目以降の各スライドの表示時間。ミリ秒。 */
			slideSpeed: 1000, /* 切り換えに掛ける時間。ミリ秒。 */
			hoverPause: true, /* マウスを上にかざしたら切り替えを止める。false で切り替えを続ける。 */
			 : (省略)
		});
    }
},50);
</script>

最初のスライドが切り替わるまでの時間

ページが最初に読み込まれた時は1枚目のスライドが表示されますが、1枚目から2枚目に切り替わるタイミングは、上で設定したスライド切り替えの時間とは別に設定する事ができます。最初にページが読み込まれた場合は訪問者がページの内容を把握する必要がありますのでそのための時間を想定しています。

この時間の設定には templates/article/article_list.html 内の JavaScript 設定を変更して下さい。以下のような設定がありますので、青字の数字を変更して下さい。単位はミリ秒(千分の一秒)です。初期設定では「7000」なので、2枚目のスライドに移動するまでに7秒間待ちます。

テスト中は遅く感じられるくらいの方が、初めてサイトを訪問される方にはちょうどよいタイミングです。

<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			preload: true, /* スライド画像の読み込み前に読み込み中画像を表示する。false で何も表示しない。 */
			preloadImage: './parts/img/loading.gif', /* スライド画像読み込み中に表示される画像 */
			play: 7000, /* 1枚目が表示されてから2枚目に変わるまでの時間。ミリ秒(1000=1秒)。 */
			pause: 2500, /* 2枚目以降の各スライドの表示時間。ミリ秒。 */
			 : (省略)
		});
    }
},50);
</script>

スライド切り替えの方法

初期設定では画像そのものがぼんやりと切り替わるようになっています。この切り替え方法は、以下のように変更する事ができます。

  1. 画像そのものがぼんやりと切り替わる(初期設定)
  2. 一旦画像がフェードアウトした後、次の画像が現れる
  3. 紙芝居のように、前の画像が左に流れていき次の画像が現れる

スライド切り替え時に一旦画像をフェードアウトさせる例

b のように変更するには、下記の青字部分変更して下さい。以下はスライド切り替え時に一旦画像をフェードアウトさせる設定です。

<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			 : (省略)
			effect: 'fade, fade', /* 切り替え方法。slide で紙芝居のように切り替える。
									 左が自動および前後リンク、右が〇ボタンリンク時 */
			crossfade: false, /* 上の「effect」が fade の時に、スライドを消さずに切り換える。
								false で、一旦スライドが消えて空白が表示されてから次のスライドが現れる。 */
			generatePagination: true, /* ページ移動リンク(〇ボタンリンク)の表示。false で表示しない */
			generateNextPrev: true /* 前後ボタンの表示。 false で表示しない */
		});
    }
},50);
</script>

自動スライド切り替え時と前後リンクを紙芝居方式で切り替える例

c のように変更するには、下記の青字部分を変更して下さい。2か所ありますが、左側は自動スライド切り替え時と前後リンクをクリックした時、右側はページ移動リンク(丸い画像ボタン)をクリックした時の切り替え方法です。

前後リンクをクリックした時だけ紙芝居方式にするには、以下のように変更します。

<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			 : (省略)
			hoverPause: true, /* マウスを上にかざしたら切り替えを止める。false で切り替えを続ける。 */
			effect: 'fade, slide', /* 切り替え方法。slide で紙芝居のように切り替える。
									 左が自動および前後リンク、右が〇ボタンリンク時 */
			crossfade: true, /* 上の「effect」が fade の時に、スライドを消さずに切り換える。
								false で、一旦スライドが消えて空白が表示されてから次のスライドが現れる。 */
			 : (省略)
		});
    }
},50);
</script>

スライド移動ボタンの色

スライド移動ボタン

スライド(記事)が複数登録されると、スライドの右下部分に「<」と「>」のボタンや、登録したスライドと同じ数だけの「〇」印が表示されます。

これらのボタンをクリックすると、自動での切り替わりを待たずにスライド間を移動できるようになります。「<」と「>」は前後リンク、「○」は該当する順番のスライドにリンクします。

これらのボタンリンクはマウスオーバーで色が変わるようになっていますが、この色は緑、青、赤、オレンジ色、グレー、反転の黒(表示されているボタンが黒)から選択できます。

色を変更するには templates/article/article_list.html 内にある class 属性を変更して下さい。下記のような部分がありますので、下表の中から希望の色に変更して下さい。

変更対象コード(青字部分)

<div id="slides" class="navi-blue">
	<div class="slides_container">

	<!-- article list : generate from article_list.txt -->
	%_article_list_%

	</div>
</div>

クラスの対応

クラス名
navi-green
navi-blue
navi-red
navi-orange
navi-darkグレー
navi-black白黒
この設定は、上から下図の色(左から)に対応します(左図=前後リンク、右図=ページ移動)。
前後リンクのクラス名と色の対応 ページネーションリンクのクラス名と色の対応

前後リンクの表示を消す

前後リンクボタン
前後リンクの表示が不要であれば、削除できます。以下のように設定して下さい。青字が変更部分です。
<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			 : (省略)
			generatePagination: true, /* ページ移動リンク(〇ボタンリンク)の表示。false で表示しない */
			generateNextPrev: false /* 前後ボタンの表示。 false で表示しない */
		});
    }
},50);
</script>

スライド移動リンクを消す

スライド移動リンク
スライド移動リンク(「○」の列挙)の表示が不要であれば、削除できます。以下のように設定して下さい。青字が変更部分です。
<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
    if(Prop=="100"){
        clearInterval(cssWaiter); 
		$('#slides').slides({
			 : (省略)
			crossfade: true, /* 上の「effect」が fade の時に、スライドを消さずに切り換える。
								false で、一旦スライドが消えて空白が表示されてから次のスライドが現れる。 */
			generatePagination: false, /* ページ移動リンク(〇ボタンリンク)の表示。false で表示しない */
			generateNextPrev: true /* 前後ボタンの表示。 false で表示しない */
		});
    }
},50);
</script>

文字だけのスライドのための背景画像の設定

文字(テキスト)のみスライドの背景

画像がアップロードされなかった場合は、初期設定の背景画像の上に入力した文字(テキスト)が表示されます。ロゴなどを含んだ背景画像を初期設定のものと置き換えて下さい。背景画像が無い場合は適当な背景色を設定しておくだけでもOKです。

背景と文字の初期設定を変更するには webdir/parts/css/site.css 内のCSS(スタイルシート)設定を変更して下さい。以下の様な設定がしてありますので、背景画像は青字部分、背景色は赤字部分を変更して下さい。なお、背景画像ファイルは同じ名前でファイルを差し替えても、CSSの設定で別のファイル名に変更しても構いません。

.slides_container div a.imagelink {
	width:900px; /* 画像の幅 */
	height:300px; /* 画像の高さ */
	display:block;
	background-position: center left;
	background-repeat: no-repeat;
	background-image: url(../img/default_bg.png); /* 画像がアップロードされなかった場合の画像 */
	background-color: #ff9933; /* 画像が無い場合は背景色のみでもOK */
	padding: 0;
	z-index:200;
	text-decoration: none;
}

文字のサイズ・色・位置の変更

画像にかぶせる文字の色やサイズ、表示位置は変更できます。webdir/parts/css/site.css 内のCSS(スタイルシート)設定を変更して下さい。以下の様な設定がしてありますので、青字部分で文字を表示する位置、緑字部分で文字サイズ、赤字部分で文字色を指定して下さい。

/* 画像上の文字表示 */
.slides_container div h2 {
	position: absolute;
	z-index:500;
	left: 40px; /* 左側の余白 */
	top: 40px; /* 上の余白 */
	padding-right: 40px; /* 右側の余白 */
	font-size: 2em; /* 文字サイズ */
	line-height: 1.20;
}
.slides_container div h2 .smaller {
	font-size: 0.9em; /* 少し小さめの文字:管理画面右クリックから入力 */
}
.slides_container div h2 .bigger {
	font-size: 1.15em; /* 少し大き目の文字:管理画面右クリックから入力 */
	display: inline-block;
	margin-bottom: 0.25em;
}
.slides_container div h2 a.textlink {
	color: white; /* 文字色 */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	text-decoration: none;
}

管理画面との組み合わせ

右クリックメニューで設定したクラスをHTMLタグ入力

上記で設定してある「.smaller」および「.bigger」はそれぞれ文字を少しだけ小さくする、大きくする設定です。「<span class="bigger">目立たせたい内容</span>」や「<span class="smaller">補足的な内容</span>」の様に使用する事を想定しています。

製品には、このHTMLコードが右クリックから入力できるように管理画面が設定されています。

ご自身の設定した追加クラスやコードスニペットを右クリックメニューに加える方法は以下のページをご覧下さい。

HTMLタグを右クリックメニューから入力する方法

Webサイトへの組み込み

スライドショーの設定が完了したら、最後にそれを公開します。ホームページ(Webサイト)への組み込みを行って下さい。組み込み方法の選択肢はインラインフレーム(アイフレーム、iframe)と SSI(Server Side Include)があります。それぞれ説明します。

<iframe>で Webサイトへ組み込む方法

スライドショーを表示したいページ(既存の /index.html など)の表示したい場所に、<iframe> を追加して下さい(下記例)。同梱の iframe_sample.html にこの設定がしてありますので参考にして下さい。

青字の幅と高さはスライドショーの幅と高さを設定して下さい。赤字のsrc属性は書き出したスライドショーページ(管理画面から「ページをチェック」→「iframe 用直接」のリンクで表示されるページ)の URL を設定して下さい。

<iframe
	id="slideframe"
	style="border: 0; width: 900px; height: 300px; margin: 20px auto; padding: 0; display: block;"
	scrolling="no"
	frameborder="no"
	src="webdir/slider_iframe.html"
>(IFRAME 機能を有効にして下さい)</iframe>

SSI(Server Side Include)で Webサイトへ組み込む方法

Webサイトへの組み込みは SSI(Server Side Include)でも行えます。SSI の場合は、以下の3つのファイルの編集が必要です。

  • 組み込み先ページの編集
  • テンプレートファイル templates/article/short_list.html の変更
  • テンプレートファイル templates/article/short_list.txt の変更

組み込み先ページの編集

スライドショーを表示したいページ(既存の /index.html など)に、以下の3つの要素を追加して下さい(詳細後述)。

  1. CSSファイルへのリンク
  2. SSIコマンド
  3. スライダー用JavaScript
同梱の ssi_sample.shtml にはこの設定がしてありますので参考にして下さい。
CSSファイルへのリンク
組み込み先ページの <head> と </head> の間のどこかに以下のCSSファイルへのリンクを追加して下さい。青字部分は webdir/parts/css/ ディレクトリを設定した場所に変更して下さい。
<!-- スライダー用 CSS -->
<link href="./webdir/parts/css/site.css" rel="stylesheet" media="screen" type="text/css">
SSIコマンド
組み込み先ページでスライドショーを表示したい場所に下記の SSI コマンドを追加して下さい。青字部分は、管理画面から「ページをチェック」→「SSI 用直接」のリンクで表示されるページの URL に変更して下さい。
<!--#include virtual="webdir/slider_ssi.html" -->
スライダー用JavaScript

組み込み先ページの </body> (終了タグ)の直前に、スライドショー用 JavaScript を追加して下さい。このコードは下記のようなものですが、設定済の templates/article/article_list.html からコピーの上、以下の調整を行って下さい。

  • 緑字の部分は、ページ内のどこかで既に jQuery 1.x が読み込まれていれば追加不要です。
  • 青字部分はそれぞれ webdir/parts/js/、 webdir/parts/img/ ディレクトリを設定した場所に変更して下さい。
<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script src="./webdir/parts/js/slides-min-jquery.js" type="text/javascript"></script>

<script type="text/javascript">
var cssWaiter = setInterval(function(){
	var Prop = $("#slides").css("zIndex");
	if(Prop=="100"){
		clearInterval(cssWaiter); 
		$('#slides').slides({
			preload: true, /* スライド画像の読み込み前に読み込み中画像を表示する。false で何も表示しない。 */
			preloadImage: './webdir/parts/img/loading.gif', /* スライド画像読み込み中に表示される画像 */
			play: 7000, /* 1枚目が表示されてから2枚目に変わるまでの時間。ミリ秒(1000=1秒)。 */
			 : (省略)
			generateNextPrev: true /* 前後ボタンの表示。 false で表示しない */
		});
	}
},50);
</script>

テンプレート templates/article/short_list.html の変更

templates/article/short_list.html の冒頭に以下のようなコードがあります。「スライド移動ボタンの色」の変更を行っていた場合は、同じ変更をここにも加えて下さい。

<div id="slides" class="navi-dark">
	<div class="slides_container">

	<!-- article list : generate from short_list.txt -->
	%_article_list_%

	</div>
</div>

テンプレート templates/article/short_list.txt の変更

templates/article/short_list.txt を開き、下記青字部分を、SSI 組み込み先のページからファイルを書き出したディレクトリ(初期設定は webdir/)までの相対パスに変更して下さい。

<!-- 製品の文字コードで保存して下さい -->
<div id="slide%_d_%">
	<h2><a class="textlink" href="%_linetext1_%" target="_parent">%_blocktext1_%</a></h2>
	<a class="imagelink" href="%_linetext1_%" target="_parent">
	<img src="./webdir/%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">
	</a>
</div>

うまく行かない場合

SSI での表示がうまく行かない場合は、下記ページの「表示がうまく行かない場合」をご覧下さい。

SSI(Server Side Include)でホームページに新着情報を表示する方法

さらに詳しく