2013年 04月 01日
JPEG画像の表示サイズについて(その3)
下の画像は「ミルク姫の部屋」のブログの画面です。
ミルクの写真は横520ピクセル×365ピクセルの大きさで見えています。
ブログの本文エリアの横幅が530ピクセルですから、ほぼ一杯の大きさです。
しかし、スキン編集のある設定値を変えると次のようになってしまいます。
① ブログに表示される画像が大きくならない。
ミルクの写真は横400ピクセル×280ピクセルです。これ以上大きくなりません。
② ブログに表示される画像の一部が消えてしまう。
ミルクの写真は横800ピクセル×縦561ピクセルですが、本文エリアの横幅が530ピクセルしかない為、はみ出した部分は隠れてしまいます。
こんな問題を抱えている方もいるのではないでしょうか?
実は、
スキン編集の各部分別横幅の本文の値を変えてみたのです。
①は400ピクセルへ
②は800ピクセルにしたものです。
皆さんも次の手順で設定値を確認してみてください。
① マイブログにログインします。
② [設定]ー[スキン変更]からスキン変更画面を出し、使用スキンの[編集]をクリックします。
スキン編集画面が出てきます。
現在設定された部分別横幅(pixel)の本文の設定値を確認してください。
この値がご自分のブログの「最大の横幅」に設定されていればよいのです。
「最大の横幅」とは、
「本文エリアの横幅」から「画像の余白」を引いた値です。
(ご自分のブログの値が分からない方はコメントでお知らせください)
変更する時は[変更]をクリックします。
③ 設定画面が出ます。本文幅は400~800ピクセルの範囲で設定できます。
「ミルク姫の部屋」の本文エリアの横幅は530ピクセル、画像の余白が10ピクセルですから、520ピクセルが最大の横幅ということになります。この数値にして[修正]をクリックします。
④ スキン編集画面に戻ったら[保存]をクリックします。
⑤ マイブログに戻り確認します。
【部分別横幅(pixel)の本文幅について】
この値は次のように使われます。
【1】 データサイズが500KBを超えるJPEG画像はこの値の横幅に縮小されてからアップロードされます。
【2】画像タグの横幅が、
【中央配置指定】・・この値より大きい場合はこの値の横幅で表示されます。
例えば800に設定すると横幅800ピクセルの画像の大きさで表示されます。
この場合、表示エリアがこの値より狭い場合ははみ出した部分は隠れてしまいます。
【左配置指定】・・・・この値から100ピクセルを引いた値より大きい場合はこの値より100ピクセル小さい画像の大きさで表示されます。
例えば800に設定すると横幅700ピクセルの大きさで表示されます。
この場合も表示エリアが700ピクセルより狭い場合ははみ出した部分は隠れてしまいます。
【右配置指定】・・・・左配置指定と同様です。
いずれも画像タグの横幅が基準となります。
上記の大きさ以内であれば、画像タグの横幅の大きさで表示されます。
大きな画像をアップロードして、表示サイズは画像タグを書き換えて調整することも出来るのです。
【実験です】
ミルク姫の部屋の設定値を800ピクセルに設定してみました。
① ミルクの写真を中央配置でアップロード
② 同じ画像タグをコピーして貼り付け、貼りつけた画像タグの横幅と縦幅をブログの最大の横幅に合わせて書き換えます。
記事の入力は次のようになります。
③ 記事を送信して閲覧画面を見てみましょう。
私のパソコン画面には次のように見えました。
【アップロードしたままのミルク】
上記②と同じですね。
【最大の横幅に書き換えたミルク】ミルクの写真は横520×365ピクセルです。
【画像をクリックして出てくる記事画像の画面】
どちらの画像もクリックするとこの画面になります。理屈はお分かりですね。
【拡大鏡をクリックした画面】
この画像がアップロードされた画像の大きさです。
以上の基本的なことを理解するといろいろと応用が利くようになります。
例えば、設定を800ピクセルに設定し、画像タグの寸法をこまめに書き換えれば、事前にサイズ変更することなく、常に横幅800ピクセルの画像をアップロードできますし、常に小さな画像を表示したいときは設定値を小さくしておけばよいのです。
【ご注意】
但し。設定を変更すると、過去の記事全てに適用されます。
過去に小さいサイズでアップロードされた画像は設定を変えても大きくなりません。
あたりまえのことですが、ご注意ください。
次回はCSS編集で画像の余白を調べてみましょう。
by PC-otasukeman | 2013-04-01 12:00 | Comments(2)