2011年 04月 20日 ( 1 )

画像アップテクニック・第4回 画像の配置(後編)

画像の左ないし右側に説明文を入れたり、小さな画像を沢山挿入したり、いろいろとやりたいことがあると思います。
4月13日に投稿した下のサンプル画像配置をベースにお話しを進めましょう。

【サンプル画像配置】
①全景(前から、後から)
d0181824_215079.jpgd0181824_21512012.jpg

②左・中央・右・幹・幹と枝・花ひら
d0181824_2285216.jpgd0181824_2217484.jpgd0181824_22224343.jpgd0181824_22133793.jpgd0181824_22155238.jpgd0181824_22162948.jpg


【まず、次のことを確認してください】
(パソコンの表示の拡大レベルを「100%」に、表示の文字サイズを「中」に設定してください)
①上の各画像をクリックして、出てきた別画面の画像が大きくなりましたか?
②出てきた画像の大きさは横幅800ピクセルないし500ピクセルになりましたか?
( 小さい画像の左から3つ目だけ横幅が500ピクセルです)
 (ディスプレイの横幅から推測してください)
③IE8をお使いの方、互換表示をオンにしてもオフにしても画像配置は変わりませんか?
④画像がきちんと整列して配置して見えますか?

d0181824_1055569.jpg右の画像は私のWindows 7パソコンで見た画面です。
花びらの画像をクリックして別画面を出した状態です。
(ディスプレイの横幅は1366ピクセル)

別画面は位置と大きさを変えています。


どなたもこの画面のように見えると思います。
配置が崩れて見える方はコメントでお知らせください。

【画像配置テクニックのご紹介】
上の画像は次のことに注意して挿入しました。
①画像をクリックして出る別画面は見やすい範囲で大きくする。
②小さな画像はバランスの取れた枚数を挿入する。見える範囲の大きさとする。
③左右の余白に注意し整然とした配置にする。
④横幅1366ピクセルと横幅1024ピクセルのパソコンで見える大きさにする。
⑤Internet Explorer 8の互換表示の設定がオンでもオフでも崩れないようにする。

【テクニック(1)アップロードの画像は横幅800ピクセルに加工する】
ブログ掲載用の写真は横幅800ピクセルに加工してアップロードする。
ブログの画像をクリックして出る別画像として丁度よい大きさであり。1024ピクセルのパソコンでも画面内に収まる大きさです。ほとんどの画像はファイルサイズが500KBに収まりますが、絵柄によっては500KBを超えるものがあります。この場合自動縮小されてしまいますが、私はやむなしとしています。小さい画像の左から3枚目の画像がそうです。
ただし、説明用のパソコンの画面は原寸大でアップロードしています。
Windows 7パソコンは横幅1366ピクセル、Windows XPパソコンは横幅1024ピクセルの大きさです。

【テクニック(2)複数の画像を本文幅一杯に横に並べる】
画像を挿入できる本文欄の横幅はスキンによって決まっています。
相談室の場合は520ピクセルです。
複数の画像を並べたとき、画像の横幅と画像間余白の合計値が520ピクセルになるように画像の横幅を決めます。画像間余白は相談室は10ピクセルですから画像の枚数によって画像の横幅は決まります。上の画像で説明しましょう。

[桜全景画像2枚の場合]
画像間余白が1個ですから、
520-10=510となり、2枚の各写真の横幅は510÷2=255ピクセルとなります。

[小さな画像6枚の場合]
画像間余白が5個ですから、
520-50=470となり、6枚の各写真の横幅は470÷6=78余り2となります。
6枚の写真の横幅を78ピクセルにすれば、収まりますが、2ピクセルの隙間ができてしまいます。
整然と並べるために、2枚の画像だけ横幅を79ピクセルに補正します。
こうすれば、78×4+79×2+10×5=520ピクセルとなり、横幅一杯になります。
両サイドの縦のラインを2枚画像とぴったり合わせることができて整然と見えることになります。

[注意]
横幅の合計が1ピクセルでもオーバーすると画像の配置が崩れてしまいます。
互換表示がオフの場合ははみ出した画像は次の行に移りますし、互換表示がオンの場合はオーバーした部分が表示から外れて見えなくなります。

横幅が決まったところで、次の手順で投稿記事に入力します。
①投稿画面を開く。
②画像を挿入するところにカーソルを置く。
③画像配置「左」を選択して画像アップロードを実行する。
④アップロードされた横幅800ピクセルの画像タグが挿入されます。
横幅800となっていますが、表示は自動的に横幅400になります。
ここで、表示サイズを計算で求めた横幅に書き換えます。縦サイズも縦横比が同じになるように書き換えます。

[アップロードで挿入されたタグ]
赤の部分が表示サイズを指定するエリアです。
[#IMAGE|d0181824_215079.jpg|201104/13/24/|left|800|600#]

[表示サイズを手直ししたタグ]
[#IMAGE|d0181824_215079.jpg|201104/13/24/|left|255|192#]

⑤続けて2枚目以降の画像を改行せずに挿入します。(全て画像配置は「左」を選択)
⑥最後に改行タグ<br clear=all>を入れれば完了です。

完成したソースコードは次のようになります。
d0181824_6532324.jpg



【ポイント】
画像の場合は表示幅をオーバーしたとき次のように処理されます。
互換表示:オフ・・・・自動改行
互換表示:オン・・・・改行せずはみ出た部分は表示されない。
画像が見えない理由の多くは改行処理がうまくいかず、はみ出しているためです。

表示幅や画像間余白のピクセル数については別途説明します。

今日はここまでにします。
次回は画像とテキスト(文字)の関係を説明します。

by pc-otasukeman | 2011-04-20 09:57 | Comments(2)