2011年 04月 19日 ( 2 )

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

ブログアップ用画像の準備ができたところから説明をします。
下の画像はテーマ投稿用に加工した画像を保存したフォルダです。(参考)
d0181824_95281.jpg

いよいよ最後は、画像のアップロードと配置です。(以下、エキサイトブログで説明します)

【ブログに表示できる画像の大きさを確認する】
まず、ご自分のブログで表示できる画像サイズを調べましょう。
①マイブログにログイン
②[設定]をクリック
③左側のマイブログ情報にある[スキン変更]をクリック
④現在使用中のスキンにある[編集]をクリック
⑤下の画像が出ますので、本文の横幅を記録してください。
「ブロ友パソコン相談室」は「本文500」に設定されています。
(今回は確認のみにします。確認したらマイブログメインに戻ってください)
d0181824_7235142.jpg


【本文500の意味】
「本文500」は本文欄に表示できる画像の最大横幅を示しています。
この数値を以下「本文設定値」と呼ぶことにします。
ちなみに、上の画像そのものの横幅は500ピクセルです。相談室の最大横幅です。
(表示の拡大レベルを100%に設定するとディスプレイと1:1の関係で見ることができます)

【配置指定の「中央」「左」「右」の意味】
投稿画面にある[参照]をクリックすると下のような画面が表示されますね。画像とテキスト(文字)の配置は図で示されている通りです。どの配置にするか、ここで選択します。
d0181824_16191676.jpg
ここで、大切な決まり事が二つあります。
ひとつは、
「中央」設定のときは横幅の最大値は「本文設定値」そのものになりますが、「左」および「右」設定のときは横幅の最大値は「本文設定値」より100ピクセル少ない値となること。
(これはテキスト(文字)エリアを確保するためだと思います)
二つ目は、
アップロードされた画像の横幅が最大値より大きい場合は自動的にそれぞれの最大値に縮小されて表示されることです。(表示の自動縮小)

【表示画像の自動縮小機能】
表示画像の自動縮小の機能は、「本文設定値」よりも大きな画像をアップロードしておけば、必ず表示画像は最大値の大きさで表示されるという便利な機能です。
画像サイズを意識しなくても、画像を加工しなくても、撮影した写真をそのままアップロードすれば最大値の大きさで画像を表示することができるのです。初心者にはありがたい機能です。

ただ、注意することは画像をクリックして別画面に出てくる画像の大きさです。
オリジナル画像のファイルサイズが500KBを超えると、アップロードする時に「本文設定値」の横幅に自動的に縮小されますから、別画面の大きさは「本文設定値」より大きな画面にはなりません。
同じ操作をしていてもある画面は大きくなり、ある画面は変わらないということがあります。
これは画像のファイルサイズが500KBを超えるか否かが原因です。

ここに掲載されている画像は全て横幅1366ピクセルの画像をアップロードしています。
上の画像は配置指定が「中央」であり、横幅は500ピクセルになります。
下の画像は「左」指定と「右」指定です
d0181824_16191676.jpg「左」指定
横幅400ピクセル

d0181824_16191676.jpg「右」指定
横幅400ピクセル


上の画像をクリックして出てくる別画面の大きさは全て横幅1366ピクセルの大きさになります。
別画面の画像の大きさはアップロードした画像の大きさになるという仕組みがありますから、理解できると思います。

皆さんのパソコンのディスプレイは横幅1366ピクセルか1024ピクセルだと思います。
画面の拡大レベルを100%にすると、横幅1366ピクセルのパソコンでは別画面の画像を見るとディスプレイ一杯になり、1024ピクセルのパソコンで見るとははみ出して見える筈です。
少しくどい説明になりましたが、ピクセルの考え方もご理解いただけたと思います。

ちょっと長くなりますので、今日はここまで。
続きは小さな画像の挿入です。テクニック満載です。ご期待ください。

by pc-otasukeman | 2011-04-19 16:36 | Comments(9)

第4回は今夜投稿させていただきます。

昨日(4月18日)はお助けマン67歳の誕生日でした。
予期せぬ楽しく・嬉しいサプライズがあり、ブログアップができませんでした。お許しください。
第4回は今夜投稿させていただきます。

by pc-otasukeman | 2011-04-19 07:28 | Comments(4)