<   2011年 05月 ( 17 )   > この月の画像一覧

画像配置に関する究極のノウハウ(最終回)

画像が消える、文字が消える、位置がずれる・・・・
これらのトラブルを回避する究極のノウハウです。

本文欄をジグソーパズルのパネルにみたてて、お助けマンルールを守って画像や文字をはめ込んでいくこと
です。
「お助けマン画像配置パズル」と名付けて説明します。パズルを完成するとブラウザ(IE6、IE7、IE8)が変わってもトラブル無く閲覧することができます。

【お助けマンルール】
【ルール1】
画像の横幅は入力エリアの横幅を超えてはならない。


【ルール2】
画像は入力エリアが決定してからはめ込むこと
 ■入力エリアが無いところや足りないところにはめ込まないこと
 ■文字入力の最後には必ず改行か改行タグを挿入すること


ルール1を守るためにはブログに設定されている「本文横幅」と「画像の余白」を正確に把握しておかなければなりません。(第2回参照)

そしてルール2を守るには次の原則を理解して、実行しなければなりません。


【入力エリアを決定する3つの原則】
お助けマン画像配置パズルでは、画像や文字をはめ込むスペースが成否のポイントです。
このスペースを「入力エリア」と呼ぶことにします。
入力エリアは画像や文字をはめ込むたびに3つの原則に従って決定していきます。
この原則を理解して、実行しないとパズルは完成しません。
【原則1】
入力エリアはアップロードした画像の位置指定で決まります。
(1)「左」位置指定・・・・その画像の右側と下側
(2)「右」位置指定・・・・その画像の左側と下側
(3)「中央」位置指定・・・その画像の下側

【原則2】
改行(Enter)キーを押すと入力エリアは1行下に移ります。

【原則3】
改行タグ(<br clear=all>)を挿入すると、入力エリアは画像のない新たな行に移ります。

下の図は説明図です。
画像①~⑥は画像の余白を含んだ外郭線で書いてあります。
d0181824_11434924.jpg


 本文入力の最初、または改行して新たな行に移った状態。
入力エリアを青で表示します。
d0181824_11451850.jpg
 画像①を「左」位置指定でアップロード
画像①は入力エリアの左端にはめ込まれ、原則1により画像①の右側と下が次の入力エリアになります。
d0181824_11462394.jpg
 画像②を「右」位置指定でアップロード
画像②は入力エリアの右端にはめ込まれ、原則1により、画像②の左側と下が次の入力エリアになります。
d0181824_11473173.jpg
 画像③を「中央」位置指定でアップロード
画像③は入力エリアの中央にはめ込まれ、原則1により、画像③の下が次の入力エリアになります。
d0181824_11482924.jpg
 画像④を「左」位置指定でアップロード
画像④が入力エリアの左端にはめ込まれ、原則1により、画像④の右側と下が次の入力エリアになります。
d0181824_11493576.jpg
 入力エリアに「説明」と入力して、[Enter]キーを押し改行する。
原則2により、次の入力エリアは1行下がります。
d0181824_11502624.jpg
 画像⑤を「左」位置指定でアップロード
画像⑤が入力エリアの左端にはめ込まれ、原則1により、画像⑤の右側と下が次の入力エリアになります。
d0181824_11513693.jpg
 画像⑥を「中央」位置指定でアップロード
画像⑥が入力エリアの中央にうめ込まれ。原則1により画像⑥の下が次の入力エリアになります。
d0181824_1153296.jpg
 最後に改行タグを挿入します。
改行タグを挿入すると、原則3により新たな行に入力エリアが移ります。


【注意事項】
 画像配置の中に文字をはめ込む場合は表示レベルの変化により文字サイズが変わりますので、その変化を見込んで配置してください。
また、文字が入ると改行サイズも変わりますので縦方向のずれの原因になります。
文字を挿入するときは互換表示をオン・オフ切り替えてチェックしてから公開するようにしてください。

【実例】
画像①~⑥を実際に配置してみました。
本文横幅が530ピクセル、画像の余白は上下左右各5ピクセルです。
a0159415_16383116.jpga0159415_16391397.jpg
a0159415_16395287.jpg
a0159415_1640378.jpg説明
a0159415_16411844.jpg
d0181824_1735533.jpg

完成です

上記実例のソースコードです。参考にしてください。
d0181824_16415991.jpg


以上です。
次回はブログ作成上で気の付いたことを取り上げてみたいと思います。
ようやく研究者モードを脱出できそうです。

by pc-otasukeman | 2011-05-31 17:41 | Comments(2)

画像配置に関する究極のノウハウ(第3回)

 ご自分のブログの「本文横幅」と「画像の余白」が判りましたか?
私のブログは本文横幅=530ピクセル、画像の余白は左右合わせて10ピクセルでした。
さて、いよいよ画像を自由に配置するとっておきのノウハウをご紹介します。
(第1回、第2回をご覧になっていない方はそちらから先にお読みください)

【画像配置の大原則】
 画像を「中央」「左」「右」の位置指定をしてアップロードすると、画像は入力エリアの指定された位置に挿入されます。
そして、その後にできる新しい入力エリアは、今挿入した画像の「位置指定」により決まるという大原則があります。
この大原則、CSSやHTMLをご存知の方は当たり前のことと思いますが、研究者モードのお助けマンにとっては大発見でした。
その新しい入力エリアとは、
 ■「左」位置指定・・・・その画像の右側と下側
 ■「右」位置指定・・・・その画像の左側と下側
 ■「中央」位置指定・・・その画像の下側
です。下の図は説明図です。
画像①を「左」位置指定、画像②を「右」位置指定、画像③を「中央」位置指定、画像④を「左」位置指定で順次アップロードしたときの配置図です。
青色の部分が新しい入力エリアを示します。
新しい入力エリアに対して次の画像の位置が決まることがわかります。
そして、なによりの発見は「中央」位置指定の新しい入力エリアです。これは応用ができそうです。
d0181824_1715392.jpg

この大原則が判れば画像配置は自由自在です。
ジグソーパズルのような楽しい画像配置ができます。
画像配置のノウハウを事例で説明します。
【事例1】 10枚の画像を横に一列に配置する
①1枚の画像幅を求める
  画像幅=(本文横幅÷10)-(画像の余白)
②10枚とも「左」位置指定でアップロードする。
③画像タグの横・縦サイズを①で求めた画像幅に書き換える。
④最後に改行タグ(<br clear=all>を挿入する。
⑤[プレビュー]で確認する
a0159415_16383116.jpga0159415_16391397.jpga0159415_16395287.jpga0159415_1640378.jpga0159415_16411844.jpgd0181824_1735533.jpgd0181824_17362230.jpgd0181824_17364272.jpgd0181824_1737019.jpgd0181824_17371713.jpg
【ポイント】
全ての画像を「左」位置指定にする。
最後の画像⑩を「中央」位置指定にすれば、下に入力エリアが移ります。11枚以上の画像がある場合は続けて挿入することができます。


【事例2】 横5枚の配置幅で10枚を並べる
①1枚の画像横幅を求める
 画像幅=(本文横幅÷5)-(画像の余白)
②画像①から画像配置の大原則に則って位置指定をしてアップロードする。
③画像タグの横・縦サイズを画像横幅に書き換える。
④最後の画像の位置指定が「中央」であれば最後の改行タグは不要です。
しかし、区切りとして画像タグを挿入する習慣をつけた方がよいでしょう。
⑤[プレビュー]で確認する。
a0159415_16383116.jpga0159415_16391397.jpg
a0159415_16395287.jpg
a0159415_1640378.jpga0159415_16411844.jpgd0181824_1735533.jpgd0181824_17362230.jpg
d0181824_17364272.jpg
d0181824_1737019.jpg
d0181824_17371713.jpg

【ポイント】
画像⑧を「中央」位置指定にする


【事例3】いろいろなサイズの画像をいろいろな配置で並べる
画像①の縦サイズを3倍に、画像②と画像⑤の横サイズを2倍にしています。
この配置は皆さんが考えてください。
画像配置の大原則に従って、画像を並べれば簡単にできます。まさにパズルです。
a0159415_16383116.jpga0159415_16391397.jpga0159415_16395287.jpg
a0159415_1640378.jpg
a0159415_16411844.jpg
d0181824_1735533.jpg
d0181824_17362230.jpg
d0181824_17364272.jpgd0181824_1737019.jpg
d0181824_17371713.jpg

【ポイント】
画像④を「中央」位置指定にすると次の入力エリアが下に開けます。


互換表示をオンに切り替えても画像配置が変わらなければ正解です。
【注意】
 画像の横幅が入力エリアの横幅を超えないようにすれば画像の横幅は自由に指定できます。
 サンプル画像①~⑩のタグをコメント欄に掲載してあります。コピーして練習にお使いください。

今日は基本編です。次回は応用編です。

by pc-otasukeman | 2011-05-29 21:39 | Comments(1)

画像配置に関する究極のノウハウ(第2回)

 第1回の説明で、複数の画像を横に並べたとき、
「画像の配置幅」が「本文横幅」を超えなければ問題ないことがお判り頂けたと思います。
それではどうすればよいのでしょうか。究極のノウハウをご紹介します。
ちょっと根気がいるかもしれません。ゆっくり、じっくり読んでお試しください。
使うブラウザは「Internet Explorer 8(IE8)」です。まだIE6、IE7の方はIE8にバージョンアップしてください。
なお、IE以外のブラウザでご覧の方はご容赦ください。

【まず、知りたいこと、知って頂きたいこと】 
画像を横に並べるには画像の横幅をいくつにするかを決めなければなりません。
それには、スキンの「CSS編集」で設定されている「本文横幅」と「画像の余白」が必要です。
「CSS編集」???? ・・・初心者には難解すぎます。
そこで、お助けマンは研究しました。考え付いたのこれからご紹介する方法です。
難解なスキン変更やCSS編集の知識は必要ありません。

まず最初に「本文横幅」、「画像横幅」、「画像の余白」、「画像の配置幅」を説明しておきます。
 ■「本文横幅」本文の文字や画像を表示できる横方向エリアのことです。
 ■「画像横幅」写真やイラスト等の画像の横幅サイズのことです。
 ■「画像の余白」画像の周囲にとる余白のことです。余白は「左余白」、「右余白」、「上余白」、「下余白」それぞれ個別に設定できます。また画像のサイズには関係なく余白は一定値です。
 ■「画像の配置幅」画像を横に並べたときの合計幅のことです。
 ■単位は全てピクセルで表します。
下の図は上が3枚、下が2枚の画像を本文横幅一杯に配置した状態の説明図です。
数字は「ブロ友パソコン相談室」の値です。赤字の部分がCSSで設定されている部分ですが、これらの値を求めるのが第2回の目的です。
なお、3枚目の画像の縦サイズが1枚目、2枚目より小さくなっていますが、カメラの縦横比の違いによるものです。
d0181824_1129113.jpg
d0181824_11292848.jpg

1枚の画像に必要な表示スペースは「画像横幅」に「画像の余白」を加えたものです。
この原則をしっかり頭に入れてください。
「画像の配置幅」が「本文横幅」を1ピクセルでも超えるとIE8では自動改行されます。
この改行がトラブルの原因ですが、これからのお話しはこの特徴を利用したものです。

【本文横幅と画像の余白を求める手順】
【準備と確認】
(1)Innternet Explorer 8であることを確認する。
(2)互換表示がオフであることを確認する。
(3)デジタルカメラで撮影した未加工の写真を3枚マイピクチャに準備する。

【3枚の画像を使った方法】
①マイブログにログイン
②[投稿]をクリックして投稿画面を出します。
③[非公開]にチェックを入れます。(公開でも構いません)
④互換表示が「オフ」になっていることをもう一度確認してください。
⑤タイトル欄は「テスト投稿」としましょう。
⑥内容入力欄をクリックして先頭にカーソルを置きます。(カーソル点滅確認)
⑦画像アップロードの[参照]ボタンをクリックします。
⑧1枚目の画像を[左]位置指定でアップロードします。
(私は猫のミルク姫の写真を使って説明を進めます)
⑨続いて2枚目と3枚目も同じく[左]位置指定でアップロードします。
⑩3枚の画像タグが内容入力欄入ったのを確認します。
d0181824_15274544.jpg

写真のファイルサイズが500KBを超えると自動的に表示可能なサイズに縮小されてアップロードされます。デジカメの写真は500KBを超える場合が多いですから、ほとんどの場合縮小されます。ミルク姫の1枚目と2枚目が300万画素、3枚目が800万画素のカメラで撮影した写真です。
3枚とも横幅500ピクセルのサイズに縮小されています。
⑪[プレビュー]ボタンをクリックして、写真が挿入されていることを確認して、プレビュー画面を閉じます。
d0181824_20181673.jpg

⑫次に画像タグの横幅を3枚とも100に書き換えます。画像タグの後方の数字2つが画像サイズです。左の数字が画像横幅です。数字の部分をクリックしますとカーソルが点滅しますので、今の数字を削除して100と半角で入力してください。
縦幅は書き換えても書き換えなくてもよいです。私は書き換えていません。
d0181824_15383023.jpg

⑬ここで[プレビュー]をクリックして画像の並びを見ます。
縦のサイズを変更していないので縦長の画像になっています。横の並びだけをみるので支障はありません。
d0181824_20193711.jpg

3枚の画像が横に並んでいましたら、プレビュー画面を閉じて、画像横幅を3枚とも徐々に増やしてください。増やしてはプレビュー画面で確認し、3枚目の画像が次の行に移るまで、繰り返してください。3枚目が次の行に移ったら、今度は1枚目の横幅を1ピクセル減らします。3枚の画像が横に並ばなかったら、次は2枚目の横幅を1ピクセル減らします。横に並ぶまで、順次1ピクセルずつ減らして初めて横に並んだところでストップしてください。
この状態が本文横幅と画像配置幅が同じくなったところです。
d0181824_15593521.jpgd0181824_1605053.jpg

注意:最初から3枚の画像が並んでいなかったら、逆の操作をしてください。横に並んだぎりぎりのところが3枚の画像の最大配置横幅ということです。
⑭3枚の画像タグの横幅を記録してください。
相談室のブログでは1枚目が166ピクセル、2枚目と3枚目が167ピクセルでした。
⑮次に1枚目と2枚目の横幅を同じように増やしていき、2枚目の画像が次の行に移るまで増やします。そして次の行に移ったら、今度は1ピクセルずつ減らして、2枚の画像が並んだところでストップします。
ここが2枚の画像が横に並んだときの最大配置幅になります。
⑯このときの1枚目と2枚目の横幅を記録してください。
相談室のブログでは1枚目と2枚目ともに255ピクセルでした。
⑰余白の算出
上記の状態では次の関係が成立します。
3枚並びの場合
本文横幅=1枚目画像横幅+2枚目画像横幅+3枚目画像横幅+画像の余白×3枚分
本文横幅をY、画像の余白をXとすれば次の式が成り立ちます。
Y=166+167+167+3X
2枚並びの場合
本文横幅=1枚目画像横幅+2枚目画像横幅+画像の余白×2枚分
Y=255+255+2X
連立方程式を解けば
Y=530
X=10  となります。

本文横幅と画像の余白がわかれば横に並べる枚数によって画像幅を算出することができます。

N枚の画像を横に並べる場合の画像幅は次の計算で求めることができます。
N枚の画像幅の合計=本文横幅ー(画像の余白×N枚)
N枚の画像を同じ幅にするのであればNで分ければよいわけです。
割り切れないときは1ピクセルの差で調整すればよいのです。
大切なのは1ピクセルでも本文横幅を超えないことです。
(第2回へつづく)

by pc-otasukeman | 2011-05-26 17:26 | Comments(2)

画像配置に関する究極のノウハウ(第1回)

 皆さんのコメントに刺激を受けて、お助けマンは久しぶりに研究者モードに入りました。
そして、子猫さんのご協力を頂いて、ついに考案した究極のノウハウです。
画像を横に並べたブログを作ったり、見たりする時に必要なノウハウです。
「CSS」とか「HTML」とか難しいことを知らなくても活用できるノウハウです。
今日から3回にわたり研究成果(?)をご紹介いたします。
じっくり読んで頂き「安心で快適なパソコンライフ」にお役立てください。
第1回 Internet Explorer 8と互換表示(準備)
第2回 本文横幅と画像余白の実測(ノウハウ)
第3回 自由自在の画像配置(ノウハウ)

【ことの発端】
 研究者モードに突入した発端は昨年11月の「柚子の画像のミステリ」です。
ブログに挿入している「柚子の画像」の位置がおかしいとのトラブルでした。
それからも、
①写真や文字の配置がおかしい。
②説明文が見えない。
③挿入されている写真が半分しか見えない。
 等、等・・のトラブルが皆さんのブログやコメントで散見されました。
 いずれも複数の画像を横に並べたとき発生するトラブルです。
投稿した本人は勿論、多くのブロ友さんはちゃんと見えるのですから、まさにミステリイです。
コメントがなければ見過ごされるトラブルですから、ブログ仲間にとって大変な問題です。
皆様から頂いた質問やヒント、アドバイスに私の研究心に火が付き、研究者モードに突入した次第です。

【そして原因が判りました】
 これまでの事例を調査し、テスト投稿を繰り返し、更に子猫さんのブログで最終検証した結果、原因を究明することができました。
皆さんの多くはInternet Explorer 8(IE8)というブラウザ(インターネットを見るソフト)をお使いだと思います。原因はそのブラウザにあったのです。

【トラブル発生の条件】
(1)消えたり、欠けたりする現象は、IE6、IE7で発生し、IE8では発生しない。
(2)画像や文字で構成する一行分の長さがブログ本文の行幅を超えると発生する。

【ブラウザの改行処理の違い】
 画像や文字で構成する段落の長さが行幅を超えると行が変わります。いわゆる自動改行処理です。調べてみると、ブラウザによって自動改行処理が異なっていることがわかりました。
[IE6、IE7]
(1)画像の部分で行幅をオーバーしても改行されない。
(2)半角英数文字列の途中で行幅をオーバーした場合、文字列の次の文字からしか改行されない。
(3)1文字目の部分で行幅をオーバーした場合、次の文字からしか改行されない。
(4)行幅を超えた部分の画像や文字の全部または部分は表示されない。

【IE8】
(1)画像も文字も行幅をオーバーするときは、その画像と文字から次の行に移す。
(2)半角英数文字列の長さが本文行幅を超えるときのみ文字列改行せず、越えた部分は表示されない。(文字が消えるのはこのときだけです)

【IE8の互換表示機能】
IE8で困ることは、古いブラウザ向けに設計されたWEBサイト(ホームページやブログ)を見ると画像やテキスト(文字)の位置ずれが起こることです。自動改行処理が違いますので当然のことですね。
そこで追加されたのがIE8の互換表示機能です。
「従来のブラウザー向けに設計されたWEBサイトがよりきれいに表示され、メニュー、画像、またはテキストの位置ずれなどの問題が訂正されます」と説明されています。
互換表示をオンにすると改行処理などの表示編集がIE6やIE7と同じになるのです。
IE8には必要な機能であることが理解できたと思います。

よく使う機能ということで、専用の切り替えボタンが用意されています。
アドレスバーの横にあるボタンです。
d0181824_461535.jpg互換表示オフ

d0181824_4134375.jpg互換表示オン

注意:互換表示が不要なサイトではこのボタンは表示されません。

【互換表示の状態にご注意】
 「互換表示」は従来のバージョンで作られたWEBサイトを見るために必要ですが、逆にIE8用に作られたWEBサイトを見ると画像や文字が欠けたり、消えたりすることになります。
理由はお判りだと思います。

今回、皆様にお伝えしたいことです。
(1)IE6、IE7をお使いの方はWindows Update等でIE8にバージョンアップしてください。
(2)互換表示は普段はオフにしてください。
 画像配置がおかしいなと感じたときにオンに切り替えて見るようにしてください。
そして、見終わったら必ず互換表示をオフに戻してください。

互換表示オフでは画像や文字が欠けたり、消えたりすることはありません。

今、見ている皆さんの画面を確認してください。
 互換表示ボタンがありますか?。
 互換表示がオフになっていますか?。
 互換表示ボタンが無ければIE8ではありません。IE8をインストールすることをお奨めします。
 互換表示がオンなっている方は今すぐオフにしてください。
そして、次の画像と説明を見てください。
これまでお話ししたことが理解できると思います。
IE8をお使いの方は互換表示を「オン」と「オフ」切り替えてみてください。

【画像とスキンの説明】(判らない方はパスしてください)
使っている画像はエクセルで作成してJPEG 形式で保存したものです。
アップロードした画像のサイズは横800×縦450ピクセル(横縦比率=16:9)
そしてこのブログのスキン仕様は、
 ■ 部分別横幅の本文設定値=500ピクセル
 ■ 本文横幅=530ピクセル
 ■ 画像の余白=左余白5ピクセル、右余白5ピクセル
 ■ 画像間の余白=5+5=10ピクセル


【A 画像の配置幅が本文横幅を超えない事例】
(ポイント:互換表示をオンーオフ切り替えても配置は変わりません)


【A-① 1枚の画像】
d0181824_4311265.jpg

【説明】 画像横幅は「部分別横幅の本文設定値」で決まります。中央配置では画像横幅は500ピクセルになります。
画像配置幅=5+500+5=510ピクセル < 本文横幅


【A-② 横2枚の1列配置】
d0181824_4311265.jpgd0181824_4371325.jpg
【説明】 画像横幅は2枚とも255ピクセル。いずれも左配置指定です。
画像配置幅=(5+255+5)×2枚=530 = 本文横幅


【A-③ 横2枚の2列配置】
d0181824_4311265.jpgd0181824_4371325.jpg
d0181824_4445617.jpgd0181824_4454936.jpg
【説明】 画像横幅は4枚とも255ピクセル、左配置指定です。2枚目と4枚目の後に改行タグ(<br clear=all>)を挿入しています。

【A-④ 横5枚の1列配置】
d0181824_4311265.jpgd0181824_4371325.jpgd0181824_4445617.jpgd0181824_4454936.jpgd0181824_4502761.jpg

【説明】 画像横幅は5枚とも96ピクセル、左配置です。5枚目の後に改行タグを挿入しています。
画像の配置幅=(5+96+5)×5枚=530ピクセル = 本文横幅


【A-⑤ 横5枚の1列変則配置】
d0181824_4311265.jpgd0181824_4371325.jpgd0181824_4445617.jpg

d0181824_4454936.jpg

d0181824_4502761.jpg

【説明】 画像横幅は5枚とも96ピクセルです。画像①と画像②の縦を182ピクセルに変更し、縦長の画像に仕立てています。
画像②は右配置、その他は左配置です。
3枚目(画像③)および4枚目(画像④)の後に[Enter]キーによる改行が2回入っています。
5枚目(画像⑤)後に改行タグを挿入しています。


【A-⑥ 横2枚の1列文字入り配置】
d0181824_4311265.jpgこの画像配置の左下に赤い字で「消える文字」と書かれています。今あなたはその文字がみえますか?
d0181824_4371325.jpg
文字

【説明】 この配置は敢えて画像横幅は2枚とも5ピクセル減らして250ピクセルにしています。左配置です。2枚目(画像②)の後に改行タグを挿入して、次の行に文字の大きさを変えた赤字の「消える文字」を配置しました。
画像の配置幅=(5+250+5)×2枚=520ピクセル < 本文横幅


【B 画像の配置幅が本文横幅を超える事例】

【B-① 1枚の1列配置】
(ポイント:互換表示をオンーオフ切り替えても配置は変わりません)

d0181824_4311265.jpg


【説明】 1枚の場合は画像横幅は自動的に決められます。中央指定は500ピクセル。失敗はありません。

【Bー② 横2枚の1列配置】
d0181824_4311265.jpgd0181824_4371325.jpg

【説明】 2枚目の画像横幅を1ピクセル増やし、256ピクセルにしました。
画像の配置幅=(5+255+5)+(5+256+5)=531ピクセル > 本文横幅
2枚目の画像のところで本文横幅を超えることになります。
IE8では本文横幅を超える2枚目の画像は次の行に自動的に移されます。
IE6、IE7は画像の部分では自動改行されません。横に2枚並んで表示されます。本文横幅のエリアを越えた右側の余白が1ピクセル狭くなっています。気がつきませんね。


【B-③ 横2枚の2列配置】
d0181824_4311265.jpgd0181824_4371325.jpgd0181824_4445617.jpgd0181824_4454936.jpg

【説明】 画像②の後に改行タグを挿入しておりません。その他は上と同じです。
画像の配置幅=(5+255+5)×4枚=1060ピクセル > 本文横幅
IE8では本文横幅を超える3枚目と4枚目は次の行に移されますが、IE6とIE7は画像では改行されない為に本文横幅のエリアを越えた画像③と画像④は表示エリアから外れて見えなくなります。


【B-④ 横5枚の1列配置】
d0181824_4311265.jpgd0181824_4371325.jpgd0181824_4445617.jpgd0181824_4454936.jpgd0181824_4502761.jpg

【説明】 5枚目の画像横幅を倍の192ピクセルに増やしました。その他は上と同じです。
画像の配置横幅=(5+96+5)×4枚+(5+182+2)=616ピクセル > 本文横幅
IE8は自動改行により、5枚目は次の行に移ります。
IE6、IE7では自動改行されません。
5枚目の画像⑤は本文横幅のエリアをはみ出し、後の半分は消えてしまいます。


【B-⑤ 横5枚の1列変則配置】
d0181824_4311265.jpgd0181824_4371325.jpgd0181824_4445617.jpg

d0181824_4454936.jpg

d0181824_4502761.jpg

【説明】 画像配置に変化をもたらすために画像③と画像⑤の横幅を2倍に増やしました。
画像①と画像②も上と同じく縦を2倍にしてあります。
IE8は自動改行により画像⑤は次の表示可能な行にに移されます。
IE6、IE7は自動改行されないのでそのまま右に配置され、本文横幅を超えた部分は消えてしまいます。


【B-⑥ 横2枚の1列文字入り配置】
d0181824_4311265.jpgこの画像配置の左下に赤い字で「消える文字」と書かれています。今あなたはその文字がみえますか?
d0181824_4371325.jpg文字

【説明】 2枚目の画像の後に改行タグを挿入しておりません。その他は上と同じです。
画像と文字の配置幅=(5+248+5)×2枚+1文字目の横幅 > 本文横幅
本文横幅を1文字目の部分が超えることになります。
IE8は超えた文字は自動改行されて、画像②の次の新しい行の1桁目へ移されます。
しかし、IE6、IE7では超えた文字の次の文字からしか改行されないため、画像②の横に1文字目の残骸のみ表示されることになります。


今日はここ迄。
行幅を管理するには
「本文横幅」と「画像間の余白」の値が必要です。
これらはCSSを見れば判りますが、次回はCSSを見ることなく求める方法(これがノウハウです)を紹介します。
お楽しみに!!

 

by pc-otasukeman | 2011-05-23 13:34 | Comments(4)

エキサイトブログの横幅について


11日と12日の記事をお読みになっていない方はそちらから先にご覧ください。
画像を複数枚横に並べて配置する方、必読です。



「本文横幅」と「画像の配置幅」、「画像の余白」と「画像間余白」そして「画像横幅」について説明します。

【本文横幅について】
本文が表示されるエリアの横幅を「本文横幅」と呼ぶことにします。
「本文横幅」はスキンのCSS編集で設定されています。
その設定値を見てみましょう。
①マイブログにログインします。
②[設定]をクリックし環境設定の画面を出します。
③左のマイブログ情報の中の[スキン変更]をクリックしてスキン変更の画面を出します。
④現在使用中のスキンの中にある[編集]のボタンをクリックします。
⑤スキン編集の画面をスクロールしていくと「■CSS編集」の小窓が出てきますので、小窓全体が見えるようにします。
⑦小窓にもスクロールバーがありますので、下の方にスクロールしていき、「div.story」 の文字を探してください。この中の「width」が本文横幅です。この相談室は530ピクセルに設定されていました。
div.story {
clear: both;
margin:30px 5px;
width:530px;
overflow:hidden;
}

【画像の余白について】
画像を横に並べたり、縦に配置するときに余白を入れると見やすくなります。
この余白は画像の周囲に付くようになっており、その幅がCSS編集で設定されています。
その設定値を見てみましょう。
上の①~⑥までと同じ操作で進めます。
⑦小窓を下の方にスクロールしていき、「div.story img」 の文字を探してください。
本文横幅の次に出てくると思います。
この中の「margin」が余白の幅です。
相談室は5ピクセルに設定されています。

div.story img{
margin:5px;
}

【画像の配置幅と画像間余白について】
表示する画像の横幅を「画像横幅」と呼ぶことにします。
画像横幅は入力で指定します。2枚の画像を配置するとき画像横幅を255ピクセルに設定しましたが、画像には左右に各5ピクセルの余白がつきますから、画像のスペースは265ピクセル必要になります。2枚の画像の配置幅は(5+255+5)+(5+255+5)=530ピクセルになります。
このときの画像間の余白は5+5=10ピクセルになるのです。
先の説明では本文横幅を520ピクセルと説明しましたが、左右の余白5+5=10ピクセルを含んでいない値です。530ピクセルが正しい値です。

【配置説明図】
d0181824_4162619.jpg



【実例】
d0181824_11595945.jpgd0181824_1213188.jpg
d0181824_122329.jpgd0181824_1231642.jpg

【結論】
「画像の配置幅」が「本文横幅」を超えないように、CSS設定値を確認して、「画像横幅」を決めるようにしてください。必ず計算で求めてください。
1ピクセルでもオーバーすると、画像配置がおかしくなったり、文字や画像が消えたりすることになります。

【スキン編集の「■ 各部分別横幅」の本文設定値について】
この設定値は表示画像の横幅を設定するものです。例えば設定可能の最大値である800ピクセルに設定した場合、表示画像は横幅800ピクセルの大きな画像になりますが、表示エリアである本文横幅は530ピクセルしかないため、それを超えた部分は表示から消えてしまいます。

【ご参考:CSSとは】
 ものの本には
『Cascading Style Sheets(CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。』

と難しく書かれていますが。
 エキサイトブログで言えばHTML言語で書かれたものをどのように表示するかを指示するものと理解すれば判ると思います。
本文の横幅をいくつにするとか、画像の周囲の余白をいくつにするか等は表示の仕方そのものですよね。

 ウエブブラウザ(IE6、IE8、Safari等)、ウエブサイト制作者(エキサイトブログ等)、そして私たち利用者がそれぞれ定義した CSS のもたらす効果を重ね合わせることができるという特徴があるのです。
Cascadingとは「重ね合わせる(カスケードする)」の意味なのです。
HTML言語で書かれブログもブラウザが違ったり、ブログ提供者が違ったり、利用者が違うと表示もいろいろと変わることが理解できると思います。

以上で説明を終わります。
スキン変更を行うと今まで投稿した全てに適用されますので十分注意してください。
初心者の方は変更しないようにしてください。
次の投稿は5月16日の予定です。

by pc-otasukeman | 2011-05-13 22:34 | Comments(21)

ブログのトラブル「消える文字」解明

昨日(5月11日)の投稿をご覧になっていない方はそちらを先にお読みください。

「消える文字」の正体は、
画像や文字の配置幅が本文横幅を超えた場合の改行処理の違いによるものです。

IE8(互換表示「オフ」)では、
本文横幅を超える場合、画像、文字を問わず次の行に移して、とにかく、画像や文字が消えてしまうことが無いように処理しています。

IE6、IE7およびIE8の互換表示「オン」では、
①横に並んだ画像が本文横幅を超えても次の行に移さない。
②画像の横に配置した文字も1文字目だけは本文横幅を超えても次の行に移さない。
③文字の途中で本文横幅を超える場合は次の文字から次の行に移す。
そして本文横幅を超えた部分は表示しないように処理しています。

以上のことが判れば対策は簡単です。
すなはち、
画像や文字の配置幅が本文横幅を超えないように「Enter」キーや「改行タグ(<br clear=all>」を挿入することです。
 ただ、文字幅(ピクセル)は実値がわからないので、表示文字のサイズを「最大」「中」「最小」に設定しプレビューで確認しながら調整することが必要です。(厳密に配置をしたい場合です)

「ブロ友パソコン相談室」の本文横幅は520ピクセル、画像間余白は10ピクセルですから、
画像の横幅+画像間余白+文字列が520ピクセル以下になるように「改行タグ」や「Enter」を挿入すれば、IE6、IE7、互換表示「オン」でも情報が消えることなく表示することが出来ます。
下記は「モデル投稿1」のHTML入力です。
改行タグが入っていることに注目してください。
d0181824_9382948.jpg


では、下にモデル投稿1~5の対策を施したものを掲載しておきます。
すべてのモデルが私のイメージの配置でご覧になれる筈です。

【モデル投稿1】・・・私がイメージする配置です
画像:横幅255ピクセル×2枚、画像間余白10ピクセル、
横幅合計=520ピクセル=本文横幅(520)オリジナルと同じ

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpg
です。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿2】
画像:横幅255ピクセル×2枚、画像間余白10ピクセル、
横幅合計=520ピクセル=本文横幅(520)
2枚目の後に改行タグ挿入

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpg
です。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿3】
画像:横幅235ピクセル×2枚、画像間余白10ピクセル、
横幅合計=480ピクセル<本文横幅(520)
2枚目の後に改行タグ挿入

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpg
です。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿4】
画像:横幅250ピクセル×2枚、画像間余白10ピクセル、
横幅合計=510ピクセル<本文横幅(520)
2枚目の後に改行タグ挿入

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpg
です。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿5】
画像:横幅280ピクセル×2枚、画像間余白10ピクセル、
横幅合計=570ピクセル>本文横幅(520)
1枚の横幅が280ピクセルであり、2枚を横に配置できませんので、280ピクセルの画像を確保するために1枚目と2枚目の後に改行タグを挿入しました。

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpg

d0181824_11382476.jpg
です。

ー------------------ーーーーーー
 本文横幅と画像間余白はスキン仕様で決められていると思いますが、お助けマンにはそれを解読するスキルがまだありません。本文横幅と画像間余白は実測して求めたものです。

by pc-otasukeman | 2011-05-12 10:52 | Comments(12)

ブログのトラブル「消える文字」

ブログのトラブルと題して皆さんのブログから見つけた問題点を探ってみたいと思います。
第1回は「消える文字」です。
Internet Explorer 8(IE8)をお使いの方が互換表示を「オフ」にして原稿を作成すると起こしやしうトラブルです。
IE6やIE7そしてIE8の互換表示を「オン」にしたパソコンで見ると文字が欠けたり、消えてしまったり、あるいはおかしな配置になったりするトラブルです。改行タグの挿入忘れが原因です。
自動改行の処理の違いを理解していれば防げるトラブルです。
5つのモデル投稿で検証してみましょう。
画面の拡大レベルを100%、表示文字サイズを「中」にしてご覧ください。
IE8の方は互換表示を「オン」「オフ」切り替えてご覧ください。

【モデル投稿1】・・・私がイメージする配置です
画像:横幅255ピクセル×2枚、画像間余白10ピクセル、
横幅合計=520ピクセル=本文横幅(520)
2枚の画像の後に改行タグ(<br clear=all>)を挿入

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpg
です。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿2】
画像:横幅255ピクセル×2枚、画像間余白10ピクセル、
横幅合計=520ピクセル=本文横幅(520)
2枚の画像の後に改行タグ(<br clear=all>)を挿入していません

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpgです。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿3】
画像:横幅235ピクセル×2枚、画像間余白10ピクセル、
横幅合計=480ピクセル<本文横幅(520)
2枚の画像の後に改行タグ(<br clear=all>)を挿入していません。

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpgです。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿4】
画像:横幅250ピクセル×2枚、画像間余白10ピクセル、
横幅合計=510ピクセル<本文横幅(520)
2枚の画像の後に改行タグ(<br clear=all>)を挿入していません。

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpgです。

ーーーーーーーーーーーーーーーーーーーーーーーーー
【モデル投稿5】
画像:横幅280ピクセル×2枚、画像間余白10ピクセル、
横幅合計=570ピクセル>本文横幅(520)
2枚の画像の後に改行タグ(<br clear=all>)を挿入していません。

ーーーーーーーーーーーーーーーーーーーーーーーーー
お助けマンの庭に咲いた直径15cmの花です。この花の名前は何でしょうか?
d0181824_11372854.jpgd0181824_11382476.jpgです。

ー------------------ーーーーーー
IE8の互換表示を「オフ」にしているパソコン以外でみるとモデル投稿2~5は文字が消えたり、配置がおかしく見えるはずです。
説明は次回行います。

by pc-otasukeman | 2011-05-11 17:49 | Comments(8)

MSEに寄せるお助けマンの期待

MSEとはマイクロソフト社が無料で提供しているセキュリティ対策ソフト
Microsoft Security Essentialsのことです。

先日、MSEをインストールしたSさんから次のような質問が寄せられました。
セキュリティ対策について、皆様にも関心を深めて頂きたく、投稿させていただきます。

【ご質問の内容】
 4月28日のブログ「無料ウイルス対策ソフト(MSE)について」のとおり、
 Microsoft Security Essentials(マイクロソフト セキュリティ エッセンシャルズ)をインストールし、Windows ファイアウォールを有効にし、Windows Updateも完了しました。

 あるホームページに、
『Windows VistaとWindows 7には、スパイウェアを探し出して削除するWindows Defenderというソフトが搭載されている。これで定期的にスキャンを行えば、知らぬ間にスパイウェアが潜入していても発見できる』とありました。
d0181824_1044893.jpg早速、コントロールパネルからWindows Defenderをクリックすると「このプログラムは無効になっています」と小窓(右)が出ました。
Windows Defenderも有効にして「今すぐスキャン」をした方がいいでしょうか?


【回答】
 「無効」になっているのが正しい使い方です。
「MSE」はウイルスとスパイウエアの両方を検出するセキュリティ対策ソフトです。
「Windows Defender」はスパイウエアを検出するセキュリティ対策ソフトです。
従ってMSEをインストールすると「Windows Defender」と競合することになります。
セキュリティ対策ソフトの競合は好ましくありませんので、「Windows Defender」を「無効」にする必要があります。
Vistaと7に関してはMSEをインストールすると自動的に「Windows Defender」は「無効」に設定されます。
従って、「Windows Defender」が「無効」になっているのが正しい使い方なのです。

【ご注意があります】
(1)「Windows Defender」をWindows XPに搭載している方もいるかと思います。
XPの場合は自動的に「無効」にしてくれませんので、ご自分で「無効」もしくは「アンインストール」する必要があります。
(2)MSEにはファイアウオール機能はありません。MSEをインストールするとき、Windows ファイアウオールを有効にすることをお奨めします。

【MSEに寄せるお助けマンの期待】
 下はお助けマンのWindows 7のセキュリティ対策状況です。(アクションセンタ)
d0181824_10435155.jpg


注目して頂きたいことは
(1)セキュリティ対策ソフトは勿論MSEをインストールしています。
(2)他社のセキュリティ対策ソフトは完全にアンインストール済です。
(3)ファイアウオール機能はMSEをインストールするときに「Windowsファイアウオールを有効にする」に設定しました。
(4)Windows Updateは勿論有効です。
(5)「ウイルス対策」と「スパイウエアと不要なソフトウエアの対策」に対策項目が分かれていますが、いずれもMSEが有効になっています。
なお、「スパイウエアと不要なソフトウエアの対策」の項目はWindows 7から出てきたものです。ウイルスもスパイウエアも悪質なプログラムですがその性質が違うからなのでしょう。

 MSEの無料提供に踏み切った背景、セキュリティ対策ソフトとWindowsとの連携を思うと、マイクロソフト社がMSEにかける強い思いを感じます。
MSEは信頼に値するソフトだとお助けマンは期待しています。

皆様の中にはまだまだセキュリティ対策に関心が薄い方もいるようです。
下記資料を参考に、MSEの導入を検討してみてはいかがでしょうか。

無料ウイルス対策ソフト(MSE)について

      『安心で快適なパソコンライフ』を楽しむために!!

by pc-otasukeman | 2011-05-10 11:36 | Comments(3)

画像の見えない問題(延長戦)

下に鹿島神宮の流鏑馬会場の小さな写真1枚が挿入されています。

d0181824_11204429.jpg

上の写真が見えない方、および写真をクリックすると別画面で大きな写真が出てきますが、クリックしても大きな写真が見えない方は、次のURLをコピーして直接アドレスバーに貼り付けてアクセスしてみてください。
写真は見えるでしょうか。
3つのURLはいずれも流鏑馬会場の写真のアドレスです。このアドレスには写真が入っていることは確かですが、何故かこの写真が見えないパソコンがあるのです。
私の2台のパソコン(XPとセブン)は見えます。また多くの方は見えるようです。
見えない方にお願いがあります。
もう一度、3つのURLで確認して頂き、その様子をコメントでお知らせください。
ご協力をお願いします。

http://pds.exblog.jp/pds/1/201105/02/24/d0181824_11204429.jpg

http://www.exblog.jp/blog_logo.asp?slt=1&imgsrc=201105/02/24/d0181824_11204429.jpg

http://pds.exblog.jp/pds/1/201105%2F02%2F24%2Fd0181824_11204429.jpg

追加調査です(5月9日13時30分追記)
★pc5takahashiさん、
★suminohaさん
★banban0501さん
★koneko2yさん
★tenpousen6さん
★aba-n-c
★そして上の画像が見えなかった方へ
次の画像は同じ写真を新たに「画像アップロード」したものです。
今度は見えると思いますが、どうでしょうか。
d0181824_1352925.jpg

by pc-otasukeman | 2011-05-09 07:31 | Comments(15)

画像が見えない問題の中締めです。

ご協力ありがとうございました。
見えない画像を原版写真のトリミング・サイズ変更からやり直して、
新たにアップロードしましたら、皆さん見えるようになったようです。
原因究明には至っておりませんが、取り急ぎ5月2日の投稿記事は修正しました。
ご確認ください。

画像が見えないという方からソースコードを送って頂き、
チェックしましたがデーターの欠落とかの異常は認められませんせんでした。
画像とパソコンの相性の問題と思いますが、
手元で確認できないため、これ以上進めることができません。
アップロードの具合によって画像が見えないこともあることが判りましたが、
どのような注意が必要か、アドバイスできるまでに至っていないのは残念です。
今後の課題とさせて頂きます。
今回は貴重な体験をさせて頂きました。ありがとうございました。

[画像が見えなかった方へ]
次のURLは皆さんが見えないという画像Bの「流鏑馬会場」と画像Fの「神栖市」のURLです。
このURLに直接アクセスした場合、画像が見えるでしょうか?
(このURLをコピーして、アドレスバーに貼り付けてアクセスしてみてください)
http://pds.exblog.jp/pds/1/201105/02/24/d0181824_11204429.jpg
http://pds.exblog.jp/pds/1/201105/03/24/d0181824_78978.jpg

by pc-otasukeman | 2011-05-08 08:13 | Comments(11)