画像をアップロードする際の、管理画面の画像を縮小表示(サムネイルで表示)する方法をご説明します。
対象製品
下記製品の Ver. 4.3 以下が対象です。Ver. 4.4 以上の製品では、あらかじめ縮小表示(サムネイルで表示)が設定されています。
※いずれも新規販売は終了しています。
- 画像付 ウェブページ更新ツール
- 画像付 ウェブページ更新ツール 大容量版
- 画像付 ニュース更新ツール
- 画像付 ニュース更新ツール 大容量版
はじめに:2つの「縮小」方法
「すぐ使えるCMS」の画像「縮小」機能には以下の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)
管理画面からアクセスすると、変更が反映されています。