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

サムネイル画像表示とライトボックス拡大機能付きブログ

最終更新日: 2015-05-11
サムネイル画像表示とライトボックス拡大機能付きブログ

一つの記事内にサムネイル画像をいくつも並べクリックで拡大表示するタイプのブログツールとして「すぐ使えるCGI」を使う方法をご紹介します。

画像の拡大は、「ライトボックス(lightBox)」と呼ばれる、ページ内に画像をポップアップ表示する方法を使います。

このツールの特長

サムネイルは画像のサイズや形に関わらず固定で表示

CMSで運用を始めた時に、縦横比やサイズの違う画像をアップロードすると表示が崩れてしまう場合がありますが、このツールではどんな形やサイズの画像がアップロードされても表示が崩れないように、サムネイルの表示サイズを固定できます。

また、アップロードできる画像の個数制限はありません。

拡大画像のサイズは大きすぎてウィンドウからあふれてしまわないよう、上限とする枠サイズを指定できます。

デモの管理画面で、異なるサイズの画像がどのように表示されるのかをご確認いただけます。

このツールの使い方

ダウンロードと設置

このページで紹介しているツールを使うには、下記のボタンからダウンロードして設置して下さい。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

ダウンロードした後は、ダウンロード完了画面に表示される「ステップ by ステップガイド」をご覧になりながら設置を行って下さい。

テスト登録

「ステップ by ステップガイド」の「8. 設置完了」まで進んだら、記事を1-2件登録して、デモと同じような表示になるかを確認して下さい。

ページのデザインの変更方法

基本的なデザイン変更方法

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行えます。1のページデザインの基本的な設定方法は「デザイン変更チュートリアル」をご覧下さい。

ただし、このページからダウンロードできるサンプルには製品の初期設定に予めいくつか追加の変更がされています。例えば管理画面は項目名などが変更してあり、また、公開ページには lightbox(画像拡大ツール)の組み込みもされています。

このページでは、このツールに特有の以下の変更方法についてご説明します。

  1. サムネイル画像のサイズ
  2. サムネイル画像の間隔
  3. キャプションの表示
  4. 拡大画像のサイズ

サムネイル画像のサイズ変更

記事ページと短い一覧(新着情報ページ)に表示されているサムネイル画像は、縦横比が異なっても指定サイズで表示されるように調整されています。このサイズを変更するには、それぞれ以下のファイル内の CSS と JavaScript 設定を変更して下さい。

変更対象ファイル

記事ページ templates/article/article.html
短い一覧(新着情報ページ) templates/article/short_list.html

変更内容

サイズ調整に使っている方法は、下記ページでご案内している方法と同じです。どこの設定を変更したらいいかは、下記ページをご覧下さい。テンプレート内にもコメントで注意書きがあります。

画像の表示サイズを揃える方法

短い一覧(新着情報ページ)のサムネイル画像の実サイズ変更

短い一覧のサムネイル画像の表示サイズを大きく変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。短い一覧の画像は、下記ページの説明中の「固定画像」に該当します。

画像の縮小をする方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

サムネイル画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

サムネイル画像の間隔調整

サムネイル画像の間隔調整は、templates/article/article.html のCSS設定を変更して下さい。青字が横の間隔、赤字が縦の間隔(サムネイル画像が多数あり2段に表示された場合)です。

#gallery li {
	height: 130px; /* サムネイルの高さ */
	width: 130px; /* サムネイルの幅 */
	margin-right: 16px; /* サムネイルの間隔(左右) */
	margin-bottom: 16px; /* サムネイルの間隔(上下) */
	border: solid gray 1px; /* サムネイルの枠線 */
	padding: 2px; /* 枠線と画像の隙間の幅 */
	list-style: none;
	float: left;
	overflow: hidden;
}

画像キャプションの表示

サムネイルに画像キャプション(管理画面の「画像タイトル」欄の入力内容)を表示するには、templates/article/article_file.txt と templates/article/article.html を編集します。

下記例を参考に、CSS の調整も行いながら編集して下さい。

templates/article/article_file.txt の編集

templates/article/article_file.txt にキャプションの表示を追加して下さい(下記赤字)。

<li>
<h4>%_filetext_%</h4>
<div class="imagewrapper"><a href="%_d_%/%_filename_escaped_%" 
title="%_filetext_%"><img src="%_d_%/%_filename_escaped_%" alt="%_filetext_%" /></a></div>
</li>

templates/article/article.html の編集

キャプションを表示する場合は、その分表示領域の高さが増えますので、templates/article/article.html に設定した CSS でその分 <li> の高さも追加して下さい(下記赤字)。なお、具体的なタグや高さの設定はサンプル通りでなくて構いません。下記例では、枠線を表示するのが難しいので除いています。

#gallery li {
	height: 148px; /* サムネイルの高さ + キャプション高さ */
	width: 130px; /* サムネイルの幅 */
	margin-right: 16px; /* サムネイルの間隔(左右) */
	margin-bottom: 16px; /* サムネイルの間隔(上下) */
	list-style: none;
	float: left;
	overflow: hidden;
}

(:省略)

/* キャプションのスタイル指定 */
#gallery li h4{
	font-size: 12px;
	margin: 0 0 2px 0;
	line-height: 1;
	height: 16px;
}

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

拡大画像のサイズ調整

記事ページでの画像の拡大は「jQuery lightBox」を使っています。拡大表示される画像が大きすぎないように調整が可能です。templates/article/article.html の末尾に JavaScript の設定がありますのでこれを編集して下さい。

詳しい設定方法は下記のページをご覧ください。

jQuery lightBox の使い方

拡大画像の実サイズ変更

拡大画像の表示サイズを変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。記事ページの画像は下記ページの説明中の「複数画像」に該当します。

画像の縮小をする方法

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

拡大画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

制限事項

  • 画像以外をアップロードしても表示ができません。画像のみをアップロードして下さい。

関連リンク

さらに詳しく