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

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

対象製品

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

※いずれも新規販売は終了しています。

  • 画像付 ウェブページ更新ツール
  • 画像付 ウェブページ更新ツール 大容量版
  • 画像付 ニュース更新ツール
  • 画像付 ニュース更新ツール 大容量版

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

「すぐ使えるCMS」の画像「縮小」機能には以下の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)

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

関連記事

画像の自動縮小(リサイズ)をする方法

基本のマニュアル ホームページ画面
ホームページ更新ツール「すぐ使えるCMS」からアップロードした画像を縮小する方法の説明です。オプション設定で画像の自動リサイズ(縮小)できます。サムネイルの作成も可能です。
ホームページ上に表示したサムネイル(縮小版画像)から、クリックで大きな拡大画像を表示する方法。
レスポンシブWebデザインのライトボックス(lightbox)の組み込みサンプル。PC/スマホ両方で、画面のサイズに画像が拡大されます。画像のグループ化や、インラインフレーム(iframe)からの画像拡大のJavaScriptサンプルコード。

広告