画像の縮小をする方法

画像の縮小の概要

「すぐ使えるCMS」でホームページにアップロードした画像の縮小をする方法をご説明します。

ここで言う画像の「縮小」とは?

ここで言う「縮小」は画像そのもののサイズを縮小する事です。「リサイズ」、「ピクセルサイズの変更」、「解像度の変更」等とも呼びます。

画像のピクセルサイズは大きいままでHTML上の表示サイズだけを縮小(サムネイルの表示)したい場合は下記ページをご参照下さい。
画像の拡大表示をする方法

画像の縮小に関して設定できること

画像の縮小に関して、「すぐ使えるCMS」では以下の設定が可能です。

  • 高さの上限、幅の上限を指定できます。指定を超える画像がアップロードされた場合は、自動的に縮小されます。
  • アップロードされた画像の高さ、幅とも指定より小さかった場合は、縮小も拡大もされません。
  • 高さと幅は別々に指定できます。どちらか一方のみの設定も可能です。
  • Ver. 4.4 から Ver. 4.7 まででは画像ごとに縮小サイズが指定できます。
  • Ver. 4.4 から Ver. 4.7 まででは上限サイズを超える画像の縮小の他、それとは別にサムネイル画像(縮小版)が作成可能です。
  • Ver. 4.8 以上では画像は「固定画像」と「複数画像」がアップロード可能です。「固定画像」は上限サイズを超える画像の縮小の他、それとは別にサムネイル画像(縮小版)が作成可能です。「複数画像」とは、初期設定の添付ファイル欄にアップロードした画像の事で、上限サイズを超える画像の縮小が可能です。

画像の縮小に対応している製品

画像の縮小設定の流れ

admin/admin.cgi の編集

admin/admin.cgi をテキストエディタで開いて、オプション設定(環境変数)を変更して下さい。バージョンによって方法が異なります。詳細は後述します。

アップロード

admin/admin.cgi をサーバに上書きアップロードして下さい。

確認

管理画面から画像をアップロードして、画像が縮小される事を確認して下さい。

注意点:既にアップロードされていた画像について

admin/admin.cgi の変更前にアップロードされていた画像については自動で縮小されません。縮小するには画像を再アップロードして下さい。

バージョン別設定方法

画像リサイズの設定はバージョンと対象画像によって方法が異なります。

Ver. 3.0 から Ver. 4.3 まで

admin/admin.cgi の320行目付近の設定を変更して下さい。

上限サイズの設定例

下記の例だと、幅を 400px に制限しています。

コピー
#--------------------------------------------------------[line 320]--
# 画像ピクセルサイズの上限設定
#--------------------------------------------------------------------
# 画像の幅と高さの上限をピクセル数で設定して下さい。
# ここで指定したより大きな画像がアップロードされた場合、自動的に
# リサイズされます。
# 
# 縦横別々に設定できます。
# 制限を行わない場合は 0 を指定して下さい。(どちらかのみ 0 でも可。)



$conf{max_imagewidth} = 400; #幅
$conf{max_imageheight} = 0; #高さ

Ver. 4.4 から Ver. 4.7 までと、Ver. 4.8 以上の固定画像

Ver. 4.4 から Ver. 4.7 までと、Ver. 4.8 の固定画像では画像ごとに縮小サイズが指定できます。admin/admin.cgi のそれぞれ下記の場所を変更して下さい。

対象 admin/admin.cgi 中の場所
画像の上限サイズ 290行目
サムネイルのサイズ 340行目

上限サイズの設定例

下記例では画像1は制限無し(アップロードされたサイズ)、画像2は高さ300px、画像3は幅500pxに制限しています。

コピー
#-------------------------------------------[line 320]-->[line 290]--
# 画像ピクセルサイズの上限設定
#--------------------------------------------------------------------
# 画像の幅と高さの上限をピクセル数で設定して下さい。
# ここで指定したより大きな画像がアップロードされた場合、自動的に
# リサイズされます。
# 縦横別々に設定できます。
# 制限を行わない場合は 0 を指定して下さい。(どちらかのみ 0 でも可。)



# 上の行=幅:  左から順に1枚目、2枚目、3枚目
# 下の行=高さ:左から順に1枚目、2枚目、3枚目
$conf{max_imagewidth}  = [0,  0,500];
$conf{max_imageheight} = [0,300,  0];

サムネイルサイズの設定例

下記の設定で、全ての画像で高さ 100px のサムネイル(縮小版)が作成されます。メイン画像の場合と設定が似ていますが場所が違いますので注意して下さい(赤字部分)。

コピー
#--------------------------------------------------------[line 340]--
# 画像サムネイルのピクセルサイズ設定
#--------------------------------------------------------------------
# 画像サムネイルの幅と高さの上限をピクセル数で指定します。
# 0 を指定すると、リサイズを行いません(アップロードされたサイズ)。
#
# タテヨコ比の変更は行わず、長い辺が指定されたサイズに収まるように
# 縮小されます。



# 上の行=幅:  左から順に1枚目、2枚目、3枚目
# 下の行=高さ:左から順に1枚目、2枚目、3枚目
$conf{thumbnail_imagewidth}  = [  0,  0,  0];
$conf{thumbnail_imageheight} = [100,100,100];

Ver. 4.8 以上の複数画像

「複数画像」の自動縮小を行うには、admin/admin.cgi の305行目付近の設定を変更して下さい。

上限サイズの設定例

下記の例だと、幅も高さも 1200px に収まるように制限しています。

コピー
#--------------------------------------------------------[line 305]--
# 画像ピクセルサイズの上限設定(繰り返しファイルアップロード欄)
#--------------------------------------------------------------------
# ファイルアップロード欄に画像がアップロードされた場合に画像のピクセル
# サイズを縮小するかの設定です。画像の幅と高さの上限をピクセル数で設定
# して下さい。
# 指定したより大きな画像がアップロードされた場合、指定サイズに収まる
# ように縮小されます。
# 制限を行わない場合は 0 を指定して下さい。(縦横どちらかのみ 0 でも可。)
#
# この設定は、ファイルアップロード欄にアップロードされた全ての画像で
# 共通です。



# 上の行=幅
# 下の行=高さ
$conf{max_multiple_imagewidth}  = 1200;
$conf{max_multiple_imageheight} = 1200;

関連記事

lightBoxで画像の拡大表示をする方法

応用マニュアル ホームページ画面
固定サイズの jQuery lightBox を「すぐ使えるCMS」で使う方法。色を変えるカスタマイズや、インラインフレームから親フレームへの画像拡大の方法を紹介。

画像の追加(画像を増やす)方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」はテンプレートの編集でアップロードできる画像の個数を増やすことができます。画像の追加方法のご説明。

ホームページから画像を削除する方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」の画像削除の方法のご説明。管理画面からアップロードした画像を、希望の場所を選んで表示したり削除したりする事ができます。