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

管理画面の画像を縮小する方法

最終更新日: 2012-09-19

概要

画像をアップロードする際の、管理画面の画像を縮小表示(サムネールで表示)する方法をご説明します。

対象製品

下記製品の Ver. 4.3 以下が対象です。
Ver. 4.4 以上の製品では、あらかじめ縮小表示(サムネールで表示)が設定されています。

はじめに:2つの「縮小」方法

「すぐ使えるCGI」の画像「縮小」機能には以下の2種類があります。

  1. 画像のピクセルサイズ自体を縮小する
  2. HTML上の表示サイズを縮小する
このページでは、管理画面でHTML上の表示サイズを縮小する方法(B)をご紹介します。

ピクセルサイズの縮小方法(A)は下記ページをご参照下さい。
画像の自動縮小(リサイズ)をする方法

設定方法

1.入力画面の画像サイズの設定

templates/admin/2_current_image_list.txt(※)をテキストエディタで開いて下さい。
※ Ver 2.0 以下の製品では 2_current_file_list.txt

ファイル中に画像を表示するためのタグがありますので、ここにサイズを設定して下さい。

入力画面 編集前(ファイルの一部分)

<IMG SRC="%_relative_filedir_%/%_filename_escaped_%" ALT="">


入力画面 編集例(ファイルの一部分)

サイズは、幅(width)または高さ(height)どちらかのみを設定すると、元の画像の比率通りに表示されます。
下記例では、表示は幅 100px でクリックすると別ウィンドウで実寸表示されるように編集しています。

<a href="%_relative_filedir_%/%_filename_escaped_%" target="_blank">
<IMG SRC="%_relative_filedir_%/%_filename_escaped_%" ALT="" width="100"><br>
クリックで実寸表示
</a>


2.確認画面の画像サイズの指定

templates/admin/3_new_image_list.txt (※2)をテキストエディタで開いて下さい。
※2 Ver 2.0 以下の製品では 3_new_file_list.txt

このファイルにも画像を表示するためのタグがありますので、サイズを設定して下さい。

確認画面 編集前(ファイルの一部分)

<IMG SRC="%_relative_filedir_%/%_filename_escaped_%" BORDER="2" ALT="">


確認画面 編集例(ファイルの一部分)

<a href="%_relative_filedir_%/%_filename_escaped_%" target="_blank">
<IMG SRC="%_relative_filedir_%/%_filename_escaped_%"
     BORDER="2" ALT="" width="100"><br>
クリックで実寸表示
</a>


3.アップロード

ファイルの編集が終わったら、編集した以下のファイルをサーバに上書きアップロードして下さい。
(カッコ内は Ver. 2.0 以下の場合。)

templates/admin/2_current_image_list.txt (2_current_file_list.txt)
templates/admin/3_new_image_list.txt (3_new_file_list.txt)

管理画面からアクセスすると、変更が反映されています。

関連リンク

さらに詳しく