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

フォトギャラリー(画像サムネイルの一覧)の作成方法

最終更新日: 2014-04-28
フォトギャラリーの作成

CMS「すぐ使えるCGI」で商品画像のサムネイル画像一覧やフォトアルバムなどのフォトギャラリー(イメージギャラリー、画像ギャラリー)ページを作成する方法をご紹介します。

CSS(スタイルシート)を使って表組風に画像を表示します。一段に並べる画像の数と、1ページに表示する段数の調整ができます。

方法の概要と製品サンプル

この方法は、CSS(スタイルシート)の float (左寄せ)機能を使って、サイズを固定した画像ブロックを並べていくことにより表(<table>タグ)を使わずに表組風に画像を表示するものです。

よく使う用途での編集済サンプルが個別にありますので、ご希望に近いものがある方はそれぞれのページをご覧下さい。

写真のみを並べるページ(飲食店メニューなど)

メニューなどの写真表示

「写真のアルバム」を作ったり、レストランやカフェのメニューなど、多数のサムネイル画像を表示するけれどそれが1ページしかないという場合に適したサンプルです。製品は「画像付 ニュース更新ツール」を使います。

写真にタイトルや簡単な説明を付ける事も、付けない事もできます。

表示オンラインデモ 詳細

サムネイル画像の一覧から詳細ページにリンク

サムネイル画像の一覧から詳細ページにリンク

サムネイル画像を並べ、サムネイルのクリックで詳細ページにリンクするタイプです。「画像付 ウェブページ更新ツール大容量版」を使っています。

詳細ページにはさらに追加の画像を表示できます。

表示オンラインデモ 詳細

ブログの記事をフォトギャラリーにする(ライトボックスで拡大)

ブログの記事をフォトギャラリーにする

一つ一つの記事がフォトギャラリーとして表示されるタイプです。イベント紹介などで写真を表示したい場合に利用できます。

サムネイル画像をクリックすると、ライトボックス(lightBox、ポップアップ)で画像を表示します。

表示オンラインデモ 詳細

ブログの記事をフォトギャラリーにする(メイン画像を拡大)

ブログページにメイン画像とサムネイルを掲載

一つ一つの記事がフォトギャラリーとして表示されるタイプです。

サムネイル画像をクリックすると、ポップアップではなくページ内のメイン画像が切り替わります。クリックで切り替えの他、自動切り換え(スライドショー)も可能です。

表示オンラインデモ 詳細

フォトギャラリーの作成方法

この方法で画像ギャラリーを作る場合、上記のいずれかの製品をダウンロードして調整していただくのが近道ですが、以下では基本的な仕組みをご説明します。上記例の一番上にある画像だけを並べるタイプに、クリックによる画像拡大機能を付けたものをご紹介します。

ダウンロードと設置

まずは下のボタンから「画像付 ニュース更新ツール 大容量版」ダウンロードして設置して下さい。

設置方法は「ステップ by ステップガイド」の通りです(この説明書はダウンロードしたページからもリンクでアクセスできます)。

テスト登録

「ステップ by ステップガイド」の「8. 設置完了」まで来たら、テストで記事を登録して、1番目の画像を何かアップロードして下さい。画像は「全一覧」に表示されますが、初期設定ではまだ、画像はタイトルや本文に挟まれて、記事を追加していけば次々に縦に並びます。

templates/article/article_list.txt の編集

テンプレート templates/article/article_list.txt を開いて下記例のように変更して下さい。<div> タグに指定しているサイズや色などの設定は自由に変更して下さい。

なお、青字部分の幅の合計が、余白も含めた画像1つ分の幅になりますが、この計算は後で1段の数を調整する時に必要になります。

templates/article/article_list.txt 編集例(ファイル全体)

<div style="
float:left; 
text-align: center;
width: 120px; /* 画像本体の幅 */
height:120px;
margin: 0 20px 20px 0;
padding: 0 0 0 0;
overflow: visible;
">
<a href="%_d_%/%_imagename_escaped_1_%" target="_blank"><img src="%_d_%/%_imagename_escaped_1_%" style="width:100%; border: none; margin-bottom: 8px;" alt="%_imagetext_1_%"></a><br>
%_subject_%
</div>

templates/article/article_list.html の編集

次にテンプレート templates/article/article_list.html を編集し、「%_article_list_%」という記載を <div> で囲って下さい。また、追加した div の終了タグの前には「<div style="clear: both;"></div>」を追加して下さい。赤字が追加部分です。

templates/article/article_list.html (一部分)

<div>
<!-- article list : generate from article_list.txt -->
%_article_list_%
<div style="clear: both;"></div>
</div>

編集の反映

アップロード

編集が終わったら、テンプレートファイルを保存しサーバの同じ位置に上書きアップロードして下さい。

再構築

管理画面一覧の「再構築(テンプレート反映)」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。

表示確認

ブラウザで表示を再読み込みして確認して下さい。

1段に表示する画像の個数の変更方法

1段に表示する画像の個数は、横幅の設定に従って変わります。何も指定しなければ、templates/article/article_list.txt に指定したブロックがウィンドウの横幅に入るだけ1段に並びます。数を指定したい場合は、templates/article/article_list.html に指定した <div> の横幅を指定して下さい。

例えば、上の例の場合、ブロックの横幅は「幅 120px + 右マージン 20px + パディングは 0」で合計 140px になっていますので、以下のように外側の <div> の幅 560px をにすると(青字部分)、1段に4個の画像が表示されます。

1段の画像枚数の設定例(templates/article/article_list.html)

<div style="width: 560px;">
<!-- article list : generate from article_list.txt -->
%_article_list_%
<div style="clear: both;"></div>
</div>

画像調整のコツ

段数の調整

1ページに表示する段数を決めて次のページに送りたい場合は、admin/admin.cgi の設定で「一覧に表示する件数」を調整して下さい。例えば、1段に画像3つ × 3段、つまり1ページに9枚の画像を表示したい場合は、「一覧に表示する件数」を 9件に設定して下さい。

設定方法は下記ページをご覧下さい。
1ページの表示件数を変更する方法

画像のサイズを揃える

アップロードする画像の縦横比が異なると、表示がうまく行きません。画像は縦横比が同じものをアップロードするか、以下のように overflow:hidden の設定を使ってあふれた部分をカットして下さい。編集ポイントは以下の2点です。

画像部分のタグ付例(templates/article/article_list.txt)

まずは templates/article/article_list.txt を編集して、画像をCSSクラスを付けた <span> タグで囲って下さい。

<div style="
float:left; 
text-align: center;
width: 120px;
height:120px;
margin: 0 20px 20px 0;
padding: 0 0 0 0;
overflow: visible;
">
<span class="image-wrapper"><a href="%_d_%/%_imagename_escaped_1_%" target="_blank"><img src="%_d_%/%_imagename_escaped_1_%"></a></span><br>
%_subject_%
</div>

CSS設定例

次に、CSSの定義をしますが、これは templates/article/article_list.html の <head> - </head> 内に指定して下さい。クラスの設定例は下記の通りです。サイズを指定した上で、それよりあふれた部分は非表示にする「overflow: hidden」の設定がポイントです。

<style type="text/css">
	.image-wrapper {
		display: inline-block;
		width: 120px; /* 画像幅 */
		height: 90px; /* 画像高さ */
		overflow: hidden;
		margin-bottom: 8px;
	}
	.image-wrapper img {
		width: 100%;
		border: none;
	}
</style>

なお、この調整方法は画像の下側をカットします。なるべく上下左右を均等にカットするには、JavaScript も使った調整が必要です。この方法は下記ページをご覧下さい。
画像の表示サイズを揃える方法

タイトル長さについて

タイトルに長いものや短いものがあると表示がずれる場合があります。これを避けるには以下の2つの選択肢があります。

  • タイトルが入力される長さを管理画面テンプレートで制限する
  • ボックスのCSSを調整してタイトルが長い場合でもボックスが伸びないようにする

タイトルの長さを制限する場合:templates/admin/2.html を編集

タイトルの長さを制限する場合は、入力画面用テンプレート templates/admin/2.html を編集し、タイトル用の <input> タグに短めの maxlength を指定して下さい。

<TR>
<TH CLASS="titem">タイトル※</TH>
<TD CLASS="contents"><INPUT name="subject" type="text" 
    size="80" maxlength="30" VALUE="%_subject_%" class="imeon">
</TD>
</TR>

ボックスが伸びないようにするCSS:templates/article/article_list.txt を編集

ボックスが伸びないようにする場合は、templates/article/article_list.txt のCSS設定を変更して下さい。このように設定した場合は、長いタイトルは欠けて表示されます。

<div style="
float:left; 
text-align: center;
width: 120px;
height:120px;
margin: 0 20px 20px 0;
padding: 0 0 0 0;
overflow: hidden;
">
<a href="%_d_%/%_imagename_escaped_1_%" target="_blank"><img src="%_d_%/%_imagename_escaped_1_%" style="width:100%; border: none; margin-bottom: 8px;" alt="%_imagetext_1_%"></a><br>
%_subject_%
</div>

画像をきれいに拡大する

このページでご紹介したサンプルコードだと、サムネイルをクリックした時に画像は別ウィンドウに拡大されます。拡大をライトボックス(lightBox、ポップアップ)できれいに行いたい場合は、下記のページをご覧下さい。

lightBox の使い方

画像の枚数について

ここで紹介した「画像付 ニュース更新ツール 大容量版」は、1件につき3枚の画像が登録できますが、ここでは1枚のみ登録する運用を想定しています。画像3枚とも使うサンプルは、下記ページをご覧下さい。

1件ごとに3枚の画像を使用したフォトギャラリーサンプル

この場合は、画像3枚につき一つのタイトルを表示する形になります。

表示オンラインデモ 詳細

さらに詳しく