画像アップテクニック・第7回 画像の配置(まとめ)

今回のテーマ投稿はご理解頂けたでしょうか。
仕上げとして投稿者サイドと閲覧者サイドでどう注意すれば良いかまとめてみました。

【投稿者サイドの注意事項】
①改行タグを適宜挿入する
 画像を左配置や右配置で挿入する時は、画像の区切りや文章の区切りに改行タグ<br clear=all>を挿入すること。
例えば、左配置で画像を挿入し、その右余白に説明文を入れる場合は説明文の最後に改行タグを挿入します。そうすると、表示文字サイズを変更しても次の文章は必ず新しい行の1桁目からスタートします。
また並んでいる画像の途中で行を変える場合も改行タブを挿入しないと次の行に移すことはできません。

なお、中央配置の場合は画像と文章の配置関係は変わりませんので改行タグの挿入は必要ありません。
ワードの「テキスト(文字列)の折り返し」をご存知の方は中央配置が「上下」、左右配置は「外周」をイメージして頂ければ理解できると思います。

②複数の画像を横に並べるときは行幅に注意すること
 複数の画像を横に並べて表示する場合、画像の左端から右端までの横幅が本文行幅を超えないこと。
「ブロ友パソコン相談室」の本文行幅は520ピクセル、画像間の余白は10ピクセルです。
2枚の画像を横幅一杯に配置する場合は1枚の横幅は255ピクセルになります。
合計が1ピクセルでもオーバーすると、自動改行処理でおかしくなってしまいます。
本文行幅を調べるには互換表示をオフにして、2枚の画像の横幅を増やしていき、2枚目の画像が次の行に移る寸前の幅が行幅一杯ですから、2枚の画像幅を足して2で割れば1枚の画像幅が求まります。
画像間余白はスキンの設定により変わります。設定値が判らない場合でもこの方法で画像の横幅を決めることができます。なお、本文行幅より少ない場合は右端のラインが揃わないという問題がありますが画像が消えることはありません。

③半角英数記号の文字列は行幅に収まる桁数にすること
 半角英数記号の文字列が行幅を越えると、右にはみ出した部分が消える場合があります。文字列の横幅は表示文字サイズの設定により変化しますので、消えては困る文字列は表示文字サイズの設定を「最大」にして確認する必要があります。
 
次の2つの文字列(赤字)がどのように見えるか、表示文字サイズを「中」と「最大」に切り替えて観察してください。また、IE8の方は互換表示を「オン」と「オフ」にして、それぞれ観察してください。特に最後の?マークに注目してください。(拡大レベルは100%に)
文字列Aは23桁の数字と最後に?マークを入力、
文字列Bは24桁の数字と最後に?マークを入力、
文字列Cは70桁の数字と最後に?マークを入力しています。
d0181824_7264626.jpg文字列A
12345678901234567890123?
文字列B
123456789012345678901234?
文字列C
1234567890123456789012345678901234567890123456789012345678901234567890?

自動改行の処理の違いによって見え方が違うことが判ると思います。
互換表示オフの場合も最大行幅を超える部分は消えてしまいます。表示文字サイズを「最大」にすると?マークは見えなくなります。

④重要なブログは表示画面を厳密にチェックすること
 不特定多数を対象に提供する重要なブログは表示に影響する全項目を検証すること。
特に画像や文字が消えてしまうと大変なことになりますので、行幅管理をしっかり行う必要があります。
個人商店や有名なサイトでも、設定を変えて見ると、文字が見えなかったり、レイアウトが崩れたりして発信者の意図が伝わらないるケースが散見されています。

【閲覧者サイドの注意事項】
 究極的な対策は投稿者のパソコンと同じ仕様、同じ設定にすることですが、それは不可能です。
そこで、少なくとも皆さんが出来る設定は合わせておきたいものです。
このブログをご覧になっている方は次のように設定しておくことをご提案いたします。

①表示文字のサイズは「中」に設定する
<設定方法>
メニューバーにある[表示]または[ページ]をクリック。出てきたメニューの中の[文字のサイズ]をポイントし、更に出てきたリストの[中]をクリック。
d0181824_6171938.jpgd0181824_617525.jpg

②Internet Explorer 8をお使いの方は互換表示を「オフ」に設定する
<設定方法>
メニューバーにある[ツール]または[ページ]をクリック。出てきたメニューの中の[互換表示]にチェックが入っているときはクリックしてチェックを外します。
d0181824_6212121.jpgd0181824_62154100.jpg

IE8をお使いの方はアドレスバーの右横にある[互換表示]ボタンをクリックすれば「オン」「オフ」反転します。ボタンが押された表示のときは互換表示オンです。
なお、互換表示ボタンが表示されないサイトもあります。
d0181824_6143994.jpg


③Internet Explorer 8をインストールする
IE6。IE7のバージョンを使っている方はIE8にバージョンアップしてください。
改行処理についてはIE6とIE7は同じようです。
話題の「YouTube」を見るにもIE8が必要です。この機会にIE8へのバージョンアップをお奨めします。
なお、Windows XPをお使いの方、SP2以前のバージョンではIE8をインストールできません。先にWindows Update等でSP3をインストールしてください。
皆さんの中でまだSP3になっていない方、メインメモリが256MBの方がおりましたら、コメントでお知らせください。ご要求があればご支援いたします。

以上で今回の投稿は完了です。
画像の挿入テクニックはブロ友の皆さんにとって必要なものです。
楽しいブログを書いたり読んだりするために、今回のシリーズはお役に立つと思います。
しっかり勉強していただき、パソコンライフを楽しんで頂ければ幸いです。

4月29日から5月1日までお休みさせていただきます。 
 

by pc-otasukeman | 2011-04-27 17:05 | Comments(6)

Commented by banban0501 at 2011-04-27 17:32
画像配置のテクニック
とても参考になりました

6つ並べる方法までできてしまうし
それを クリックすれば 大きな画面で
楽しめるやりかたもわかりました

こういう解説は基本の「基」を理解
しておられる お助けマンさんだから
できることですね

画像編集ソフト頼りに私にとっては
目からうろこの配置術でした

ありがとうございました
Commented by ★元気ばば★ at 2011-04-27 19:38 x
互換表示のチェックをはずすと、文字列B1234・・・・は猫ちゃんの下に移動してしまいます。
これでは読みにくい
はずすといい?のですか?
ビスタです
Commented by パソコンお助けマン at 2011-04-27 22:10 x
★ banban0501 さん
コメントありがとうございます。「柚子の画像のミステリ」では手探りの状態でしたが、今回のテーマ投稿で基本の「基」をようやく理解できました。
今日の投稿はお助けマン苦心の作であり、私の想いが伝わって嬉しく思っています。
Commented by パソコンお助けマン at 2011-04-27 22:48 x
★元気ばば さん
Vistaでも互換表示の切り変えがあるということはブラウザはIE8ですね。
互換表示がオンのとき、文字列Bの最後の?マークは見ることができません。
互換表示がオフのときは表示位置がミルクの写真の下に移りますが、最後の?マークまで見ることができます。
配置が変わっても情報が見える方が良しとしたのが、IE8の改善点だと思っています。情報が消えない方(互換表示:オフ)が良いと考えたものです。
Commented by michi-kan at 2011-04-28 16:45
画像アップテクニック詳しく教えて頂きありがとうございました。
知らない事も多々あり大変勉強になりました。
互換表示、確認しましたらオフになっていました。
私も元気ばばさんと同じVistaです。
Commented by パソコンお助けマン at 2011-04-28 18:19 x
★ michi-kan さん
お役に立てて良かったです。
XP、Vista、セブンいずれもIE8をインストールしていればブログの表示は同じです。互換表示オフでは画像が消えたり英数文字列の後が消えたりすることはありませんが、配置が変わることがあります(投稿者サイドが悪いのですが)。配置が変わって違和感を感じたら、互換表示をオンにして確認してください。
名前
URL
削除用パスワード

<< 無料ウイルス対策ソフト(MSE...    画像アップテクニック・第6回 ... >>