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

サムネイル画像をクリックで拡大表示する方法

最終更新日: 2015-01-15

サムネイル画像の拡大の概要

別ウィンドウで画像を拡大表示
「すぐ使えるCGI」でアップロードした画像を、ホームページ上はサムネイル(サムネイル、縮小版画像)で表示し、クリックすると拡大サイズ(実サイズ)で表示させる設定方法をご紹介します。

類似の方法

このページでは拡大画像を別ウィンドウ(別窓)で表示する方法をご紹介しますが、同じくサムネイル画像の拡大でも、別窓を開かない以下のような方法もあります。これらの設定方法はそれぞれ別のページでご案内していますのでご覧下さい。

ページ内でポップアップ(lightBox)

ライトボックスで画像を拡大表示

サムネイルをクリックした時に別ウィンドウ(別窓)を開かず、同じページ内でポップアップのように表示させる方法は、下記のページをご覧下さい。lightBox(ライトボックス)と呼ばれる方法をご紹介しています。この方法は、拡大画像も表示サイズの指定が可能です。

jQuery lightBox の使い方

同じページで拡大画像を切り替え

同じページ内の画像を切り替え

サムネイルをクリックした時にページ内に表示されているメインの画像を切り替えて表示する事もできます。大手ショッピングサイトの商品写真のようなイメージです。

この設定方法は下記のページをご覧下さい。

スライドショーのように操作しなくても次々と画像が変わる方法と、自動では切り替わらず、ユーザのクリックで画像が変わる方法の両方に対応しています。

別ウィンドウを開かずにサムネイル画像を拡大表示する方法

サムネイル画像の拡大ができる製品

このページで紹介する、別ウィンドウを開く方法に対応している「すぐ使えるCGI」製品は下記の通りです。

※ 製品によっては既に設定がされています。

サムネイル画像の拡大表示の設定の流れ

どの製品の場合も設定手順は同じで下記の通りですが、製品ごとに編集対象のファイルや編集方法が異なります。具体的なテンプレートファイルの変更内容は「設定方法」をご覧になりながら、以下の手順で設定して下さい。

1.デザインテンプレートの編集

デザインテンプレートを後述のように編集します。

2.アップロード

編集したファイルをサーバに上書きアップロードして下さい。

3.再構築

管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

4.確認

ブラウザのキャッシュを一旦クリアして表示の確認を行って下さい。

設定方法

編集対象ファイル

画像を表示するページによって編集対象のファイルと設定内容が異なります。それぞれ下記のファイルを編集して下さい。

なお、「記事ページ」は「画像付 ニュース更新ツール 大容量版」にはありません。また、「#」で記載されている画像の番号が何番まであるかはバージョンによって異なります。1から5までの可能性があります。

表示するページ 編集対象ファイル
記事ページ templates/article/article_image_#.txt
(#は数字。画像の番号に対応。)
全一覧(目次) templates/article/article_list.txt
短い一覧(新着情報) templates/article/short_list.txt

編集方針とバージョンによる違い

編集の際は、小さいサイズで画像(<img> タグ)を表示し、それを大画像へのリンク(<a> タグ)で囲います。<a> タグの target 属性に「_blank」を指定しておくと、別窓が立ち上がり画像が表示されます。

画像を小さく表示するに当ってはHTMLタグ(CSS)でサイズを指定しますが、Ver. 4.4 以上の製品はサムネイル画像のピクセルサイズも指定できます。ピクセルサイズの指定方法は下記ページをご覧ください。

画像の縮小をする方法

Ver. 4.4 以上とそれ未満ではサムネイル画像の src 属性の指定の仕方が変わります。以下の説明ではそれぞれお使いのバージョンのサンプルコードを選んで参考にして下さい。

記事ページにサムネイル画像のクリックによる拡大表示を設定する方法

記事ページにサムネイルの拡大画像を設定するには、templates/article/article_image_#.txt を編集して下さい。「#」は数字で画像の番号に対応しますが、何番までのファイルがあるかは製品とバージョンに依ります。ご希望の番号の画像に対応するファイルを編集して下さい。また、初期設定で設定済の製品やバージョンもあります。

Ver. 4.4 以上の編集例

画像のサイズは、幅(width)または高さ(height)のどちらか一方のみ指定すると、元の画像の比率通りに表示されます(青字部分)。style 属性ではなく class 属性でサイズを指定しても構いません。margin など、幅以外のスタイルも適宜指定して下さい。なお、縮小したピクセルサイズ通りに表示する場合は、サイズの指定は無くても構いません。

<a href="%_d_%/%_filename_escaped_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%" style="width: 100px;"></a>

Ver. 4.3 以下の編集例

Ver. 4.3 以下の製品の場合は以下のように編集して下さい。サムネイル画像の生成に対応していないために <img> タグの src 属性が上と異なり、拡大画像と同じパスを指定します(赤字部分)。また、サイズの指定は必須です(青字部分)。style 属性ではなく class 属性でサイズを指定しても構いません。margin など、幅以外のスタイルも適宜指定して下さい。

<a href="%_d_%/%_filename_escaped_%" target="_blank"><img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%" style="width: 100px;"></a>

一覧ページにサムネイル画像のクリックによる拡大表示を設定する方法

全一覧(目次)と短い一覧(新着情報)の設定には、それぞれ templates/article/article_list.txt または templates/article/short_list.txt を編集して下さい。HTMLコードはどちらのファイルでも同じものが使えます。

なお、一覧ページには画像以外の表示も含まれていますのでそれらは変更せず、画像部分のみを以下のように設定して下さい。

Ver. 4.4 以上の編集例

赤字の「#」は1から5の数字が入ります。設定した画像番号に置き換えて下さい(3か所)。

画像のサイズは、幅(width)または高さ(height)のどちらか一方のみ指定すると、元の画像の比率通りに表示されます(青字部分)。style 属性ではなく class 属性でサイズを指定しても構いません。margin など、幅以外のスタイルも適宜指定して下さい。なお、縮小したピクセルサイズ通りに表示する場合は、サイズの指定は無くても構いません。

<a href="%_d_%/%_imagename_escaped_#_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_#_%" alt="%_imagetext_#_%" style="width: 100px;"></a>

Ver. 4.3 以下の編集例

Ver. 4.3 以下の製品の場合は以下のように編集して下さい。サムネイル画像の生成に対応していないために <img> タグの src 属性が上と異なり、拡大画像と同じパスを指定します(赤字部分)。また、サイズの指定は必須です(青字部分)。style 属性ではなく class 属性でサイズを指定しても構いません。margin など、幅以外のスタイルも適宜指定して下さい。

「#」は1から5の数字が入ります。設定した画像番号に置き換えて下さい(3か所)。

<a href="%_d_%/%_imagename_escaped_#_%" target="_blank"><img src="%_d_%/%_imagename_escaped_#_%" alt="%_imagetext_#_%" style="width: 100px;"></a>

関連リンク

さらに詳しく