画像リサイズの問題
画像のピクセルサイズの縮小 (※1) を設定したのにサイズ調整がうまくいかない場合のよくある原因と対処方法のご説明です。
※1 ピクセルサイズの縮小とは、画像自体のサイズを縮小する事です。詳しくは「画像の縮小をする方法」をご参照下さい。
画像リサイズがうまく行かない場合のチェックポイント
画像リサイズがうまく行かない時のよくある原因として以下のようなポイントがありますので、順番にチェックして下さい。
- 画像用モジュール Image::Magick または GD の不足
- アップロードの順番
- 古い画像のキャッシュ
- HTMLコードによるサイズ指定
- 元画像のサイズ
- 高さと幅の指定の兼ね合い
- サムネイルとメイン画像の違い (Ver.4.4以上のみ)
画像用モジュール Image::Magick または GD の不足
サーバで Perl のモジュール (※2) Image::Magick または GD が使用できない場合画像のリサイズはできません。
※2 モジュールとは: プログラムの追加部品のようなものです。
これらのモジュールが使用できるかは、サーバ管理者に問い合わせるかレンタルサーバ等のマニュアルを参照、または、以下のページでご案内する方法で調べて下さい。
サーバにインストールされている Perl モジュールを調べる方法
アップロードの順番
リサイズの設定は admin/admin.cgi の環境変数で設定しますが、admin/admin.cgi を変更した後にアップロードした画像しか設定は反映されません。
admin/admin.cgi を上書きアップロードした後、画像を再度アップロードしているかご確認下さい。
古い画像のキャッシュ
再アップロードした画像が同じファイル名の場合、ブラウザが古い画像をキャッシュしていることがあります。
ブラウザのキャッシュをクリアしてから表示を確認してみて下さい。
HTMLコードによるサイズ指定
初期設定のテンプレートには画像の表示サイズが指定されている場合があります。このため、画像のリサイズ(ピクセルサイズの変更)自体はうまくいっていても画像のサイズ通りには表示されない場合があります。
画像のみをブラウザウィンドウなどに表示してサイズを確認して下さい。
リサイズはうまくいっていた場合は、テンプレート内のサイズ指定を変更または削除して下さい。
元画像のサイズ
元画像が環境変数で指定したサイズより小さかった場合、拡大はされません。
指定サイズより大きな画像をアップロードされている事をご確認下さい。
高さと幅の指定の兼ね合い
画像のリサイズは、タテ・ヨコの両方の指定サイズを超えない範囲で、かつ、元の画像をゆがめずに収まるように縮小されます。例えば、高さも幅も 300px の上限を設定した場合、縦長の画像の横幅はリサイズ後は 300px より狭くなります。
タテ・ヨコ両方のサイズ設定と画像の形が意図通りかご確認下さい。
サムネイルとメイン画像の違い(Ver.4.4以上のみ)
Ver. 4.4 以上の製品では、アップロードした画像 (メイン表示用) とその縮小版である「サムネイル」が別々に保存されるようになりました。また、これらの画像のリサイズも別々に指定できるようになりました。
このため、リサイズがうまくいっていない問題の画像でサムネイルとメイン表示用の画像の混同をしていないかご確認下さい。初期設定ではサムネイルには画像ファイル名の先頭に「s_」が付いています。
admin/admin.cgi 中のそれぞれのリサイズ設定の場所は下記のサンプルコードをご参照下さい。赤字の部分を確認して、取り違えていないかご確認下さい。
メイン画像のサイズ設定
#-------------------------------------------[line 320]-->[line 290]--
# 画像ピクセルサイズの上限設定
#--------------------------------------------------------------------
# 画像の幅と高さの上限をピクセル数で設定して下さい。
# ここで指定したより大きな画像がアップロードされた場合、自動的に
# リサイズされます。
# 縦横別々に設定できます。
# 制限を行わない場合は 0 を指定して下さい。(どちらかのみ 0 でも可。)
# 上の行=幅: 左から順に1枚目、2枚目、3枚目
# 下の行=高さ:左から順に1枚目、2枚目、3枚目
$conf{max_imagewidth} = [0,0,0];
$conf{max_imageheight} = [0,0,0];
サムネイルのサイズ設定
#--------------------------------------------------------[line 340]--
# 画像サムネイルのピクセルサイズ設定
#--------------------------------------------------------------------
# 画像サムネイルの幅と高さの上限をピクセル数で指定します。
# 0 を指定すると、リサイズを行いません(アップロードされたサイズ)。
#
# タテヨコ比の変更は行わず、長い辺が指定されたサイズに収まるように
# 縮小されます。
# 上の行=幅: 左から順に1枚目、2枚目、3枚目
# 下の行=高さ:左から順に1枚目、2枚目、3枚目
$conf{thumbnail_imagewidth} = [ 0, 0, 0];
$conf{thumbnail_imageheight} = [150,150,150];
サムネイルの保存設定
また、サムネイルファイルを保存しない設定も可能ですので、サムネイルが生成されていないのか (サムネイルが生成されない場合はメイン画像がサムネイルの位置に表示されます)、または、生成されていてサイズの設定がうまくいっていないのかもご確認下さい。
特に、バージョンアップしてご利用の場合、下位バージョンの環境変数をまとめてコピーしてしまうと、サムネイルを保存するための設定が消えてしまう場合があります。
サムネイル保存のための環境変数は、以下の通りです。
#--------------------------------------------------------[line 320]--
# 画像サムネイルのファイル名
#--------------------------------------------------------------------
# サムネイルファイル名の形式を指定すると、その名前で別のサイズの画像
# も保存されます(サムネイルやモバイル端末用)。
# 元ファイルの名前を ORIGINAL として必ず含めて下さい。
# サムネイルの保存が不要な場合は、空に設定して下さい(下記例)。
# $conf{thumbnail_filename} = '';
#
# 例)
# ファイル名の指定 : $conf{thumbnail_filename} = 's_ORIGINAL';
# サムネイルファイル名: myfoto123.jpg -> s_myfoto123.jpg
$conf{thumbnail_filename} = 's_ORIGINAL';