2011年 04月 26日 ( 1 )

画像アップテクニック・第6回 画像の配置(注意事項)

 ブログに写真やイラスト、動画、テキストボックスを挿入すると、投稿者(書く方)も閲覧者(見る方)も楽しくなります。
しかし、投稿者の苦心作も閲覧者が見たときに、画像や文字が消えてしまったり、配置がおかしくなったりすると、台無しになってしまいます。そればかりか、閲覧者を困惑させてしまいます。
「柚子の画像のミステリ」でもお話ししましたが、原因は投稿者と閲覧者のパソコンの違いによるものなのです。
画像の配置を勉強した機会にこの問題をもう一度整理してみました。
原因と対応策を理解して頂きお役立てください。

【画面の表示に影響するパソコンの仕様と設定】
投稿者のパソコンと閲覧者のパソコンの違いが発生する項目を挙げてみました。
①ディスプレイの違い
 (ブラウン管画面、液晶画面、画面の縦横比3:4、同9:16等)
 (ブログ本文の画像や文章の配置には影響なし)
②画面の解像度の違い
 (1366×768ピクセル、1024×768ピクセル等)
 (ブログ本文の画像や文章の配置には影響なし)
③基本ソフト(OS)の違い
 (Windows、Mac等)
 (ブログ本文の画像や文章の配置には影響なし)
④インストールされている文字フォントの違い
 (MS明朝、MSゴシック、Verdana 等)
 (エキサイトブログはVerdana(ヴァーダナ)を使用しています。Verdanaがインストールされていないと既定のフォントに変わってしまいます)
 (文字間隔の違いで1行当たりの文字数に影響する)
⑤ブラウザの違い
 (Internet Explorer(IE)、Google Chrome、Safari、Firefox等)
 (ソースの処理仕様によって変わります。特に自動改行処理は影響が大きい)
⑥ブラウザのバージョンの違い
 (IE6、IE8 等)
 (ソースの処理仕様によって変わります。特に自動改行処理は影響が大きい) 
⑦互換表示の設定の違い
 (IE8にある機能で、互換表示をオンにするとIE6の表示に切り替わる)
 (自動改行処理の決まり事が違うので影響が大きい)
⑧表示文字サイズの設定の違い
 (表示する文字のサイズを「最大」「中」等から選択し設定する)
 (1行当たりの文字数が変わるので影響が大きい)
⑨画面の拡大レベルの指定の違い
 (画面全体を「100%」、「125%」、「150%」等から設定する)
 (ブログ表示部全体の拡大・縮小なので画像や文章の配置には基本的には影響なし)

以上の項目の中で一番問題になるのが⑦互換表示と⑧表示文字サイズの設定です。
前回説明しました「自動改行の決まり事」が直接影響するからです。

では、投稿者と閲覧者の双方から見て画面がどう影響されるか具体的に見てみましょう。

【投稿者サイドから】
今、私は互換表示を「オフ」、表示文字のサイズを「中」、拡大レベルを「100%」に設定して、次の配置をイメージして投稿記事を書いています。
d0181824_724232.jpg
ミルク姫(猫)の写真を上の段に2枚、下の段の左側に1枚を配置。そして右余白に画像タグの説明文を挿入する構図です。

入力を終えプレビュー画面で配置を確認して[送信]をクリックしました。
それが下の記事です。
皆さんのパソコンにはミルクの画像と説明文がどのように表示されていますか?
私のイメージと同じ配置でしょうか?

d0181824_2136843.jpgd0181824_21365714.jpgd0181824_2137572.jpg画像タグ①[#IMAGE|,,,4/24/|left|255|192#]
画像タグ②[#IMAGE|,,,4/24/|left|255|192#]
画像タグ③[#IMAGE|,,,4/24/|left|255|192#]
【説明】
画像タグは一部省略してあります。
横幅のピクセル数「255」に注目してください。
アップロードした画像の横幅は800ピクセルですが、ブログの表示は255ピクセルに書き換えています。


【プレビュー画面】
送信前に確認したプレビュー画面と投稿者のパソコンの仕様と設定です。
d0181824_11301770.jpg①縦横比=9:16
②1366×768ピクセル
③Windows 7
④Verdanaフォント有
⑤Internet Explorer 8
⑥8.0.7601.17514
⑦互換表示:オフ
⑧表示文字サイズ:中
⑨拡大レベル:100%
(ソースコードをコメント欄のトップに示してあります)

【閲覧者サイドから】
上の投稿画面を閲覧者のパソコンでどのように見えるでしょうか。
私のWindows 7パソコンとWindows XPパソコンで閲覧して見ました。

【Windows 7パソコン】
d0181824_15431196.jpg(1)投稿のパソコンと同じ設定で見た画面です。
⑦互換表示:「オフ」
⑧表示文字サイズ:「中」
当然、プレビュー画面と同じくなります。

d0181824_15501426.jpg(2)互換表示をオフのまま、表示文字サイズを「最大」に設定した画面です。
説明文の配置が大きく崩れています。自動改行の処理で英数文字列である画像タグが次の行に移されています。

d0181824_15534595.jpg(3)互換表示をオンに設定し、表示文字サイズを「中」に戻した画面です。
3枚目の写真と画像タグの一部が消えています。自動改行処理により、行をはみ出た部分が表示されないからです。


【Windows XPパソコン】
ブラウザはWindows 7と同じInternet Exploerer 8です。
互換表示を「オフ」に設定、表示文字サイズを「中」に設定した画面です。
横にパソコンの仕様と設定を示しておきます。
d0181824_1691744.jpg①縦:横比=3:4
②1024×768ピクセル
③Windows XP
④Verdanaフォント有
⑤Internet Explorer 8
⑥8.0.6001.18702
⑦互換表示:オフ
⑧表示文字サイズ:中
⑨拡大レベル:100%

ブログ本文の画像と文章の配置はWindows 7と全く同じです。設定を変更しても画面の変化はWin7と同じですから、他の例は割愛します。


【原因と対策】
閲覧者サイドから見ると原因はすぐ判りました。単純な原因でした。2枚の写真の後に改行タグ(<br clear=all>)の挿入を忘れたからです。
改行タグを挿入して対策すると次のようになります。
文字の大きさが変わる関係で説明文の配置は変わりますが、画像が消えたり、説明文が消えたりすることはなくなります。お試しください。

d0181824_2136843.jpgd0181824_21365714.jpg
d0181824_2137572.jpg画像タグ①[#IMAGE|,,,4/24/24/|left|255|192#]
画像タグ②[#IMAGE|,,,4/24/24/|left|255|192#]
画像タグ③[#IMAGE|,,,4/24/24/|left|255|192#]
【説明】
画像タグは一部省略してあります。
横幅のピクセル数「255」に注目してください。
アップロードした画像の横幅は800ピクセルですが、ブログの表示は255ピクセルに書き換えています。


(対策後のソースコードをコメント欄の2番目に示してあります)

今日はここ迄、続きます。

by pc-otasukeman | 2011-04-26 09:14 | Comments(2)