画像の拡大表示を楽しむ(その6)画像の整列配置

ページへページへページへ

最後の仕上げは画像の整列配置です。
画像をキチンと整列させるテクニックをご紹介します。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg
d0181824_11245128.jpg

ブログの横幅が固定長のタイプでは、合計横幅( ↑)の最大値と 余白(↑)のサイズは決まっています。この2つの値さえ分かれば整列配置は自由自在です。
まずは、これらの値を求めてみましょう。
HTMLやCSSなどの難しいことを知らなくても出来る方法です。

【準備】
アップロードする6枚の画像をすべて同じサイズに加工します。
ここでは横800ピクセル × 縦600ピクセル(横縦比が4:3)の画像を使います。
重要!ファイルサイズが500KBを超えないこと。

「記事を書く」画面を出し、6枚の画像をアップロードし、そしてHTML編集の記事欄に6枚を連続して挿入します。
【挿入された画像タグ】
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|800|600#][#IMAGE|d0181824_16284578.jpg|201612/31/24/|mid|800|600#][#IMAGE|d0181824_16285091.jpg|201612/31/24/|mid|800|600#][#IMAGE|d0181824_16224739.jpg|201612/31/24/|mid|800|600#][#IMAGE|d0181824_16225179.jpg|201612/31/24/|mid|800|600#][#IMAGE|d0181824_16230025.jpg|201612/31/24/|mid|800|600#]
注1:実際の画像タグは連続して表示されます。)
注2:画像サイズが小さくなっている場合は500KBを超えています。再度加工してアップロードしてください。)
2枚目~6枚目の画像タグを赤字のように書き替えます。
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|800|600#][#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>[#IMAGE|d0181824_16224739.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16225179.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16230025.jpg|・・・/24/|left|200|100#]<br clear=all>
注1:3枚目と6枚目の横幅のみ200ピクセルで、その他はすべて100ピクセルです。)
注2:ヒヨドリ2枚組の後ろと、メジロ3枚組の後ろに改行タグ②を入れます。)
注3:赤字以外の改行タグが入った時は必ず削除してください。)

[プレビュー]をクリックして画像配置を確認します。
花火の画像は中央配置です。画像の横幅は既定値(このブログは500ピクセル)に縮小されます。
2枚組のヒヨドリ、3枚組のメジロは書き替えられたサイズに縮小されます。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

【合計横幅の最大値を見つける】
左寄せ配置の画像を横に並べていき、本文の横幅を超えてしまうと自動的に次の行に移ってしまいます。
これを利用して合計横幅の最大値を見つけます。
最初に2枚組の合計横幅の最大値を求めます。
まずは左の画像の横幅を200に書き替えます。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|200|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
画像の大きさと配列は次のようになります。
合計横幅が広がりますが、まだ右にスペースがあります。
d0181824_16284578.jpgd0181824_16285091.jpg

更に300に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|300|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
画像の配列は次のようになります。
合計横幅がさらに広がりますが、まだ右にスペースがあります。
d0181824_16284578.jpgd0181824_16285091.jpg

更に400に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|400|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
画像の配列が2段になってしまいました。
合計横幅が最大値を超えたため、自動的に改行されたのです。
d0181824_16284578.jpgd0181824_16285091.jpg

一旦、前のサイズ(300)に戻し、ここからは横サイズを301、402、・・・・308、309・・と1ピクセルづつ増やしていきます。
310に書き替えた状態です。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|310|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
最大値に近づきましたが、まだ2段になりません。
d0181824_16284578.jpgd0181824_16285091.jpg

311に書き替えます。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|311|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
右の画像が次の段に移りました。
d0181824_16284578.jpgd0181824_16285091.jpg

310に戻します。
この状態が合計横幅の最大値です。
d0181824_16284578.jpgd0181824_16285091.jpg
合計横幅(最大値)=310+余白 + 200 = 510 + 余白

次に3枚組の合計横幅の最大値を求めます。
手順は2枚組と同じです。説明は割愛します。
こちらは1枚目を200にしたときに合計横幅が最大値になりました。

[#IMAGE|d0181824_16224739.jpg|201612/31/24/|left|200|100#][#IMAGE|d0181824_16225179.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16230025.jpg|201612/31/24/|left|200|100#]<br clear="all">
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg
合計横幅(最大値)=200+余白+100+余白+200=500+2余白

【余白を求める】
余白を求めます。
2枚組と3枚組の合計横幅の最大値が見つかりました。
合計横幅の最大値は同じですから、余白は次の式で求まります。
500+余白+余白=510+余白
余白=510-500=10ピクセル

【ブログ本文の横幅を求める】
最後にブログ本文の横幅を求めます。
画像の余白は1枚の画像に対して左右上下の余白が決められています。
私のブログは左右上下とも5ピクセルに設定されています。従って画像間の余白は右余白(5)と左余白(5)を足して10ピクセルとなります。
ブログによっては右余白が15、左余白が0であったり、左右とも0であったりいろいろです。
ブログ本文の横幅は合計横幅の最大値に左右の余白を加算した値になりますから、私のブログは530ピクセルということになります。

【画像サイズを求める】
本文の横幅、合計横幅の最大値、余白が決まれば、N枚並べるときの横幅を計算で求めることができます。

横幅合計値=本文の横幅ー余白×N
または
横幅合計値=合計横幅(最大値)ー{余白 ×(N-1)}

横幅合計値をN枚で分割すれば画像の横サイズが求まります。

本来の画像サイズを求めます。
【2枚組の場合】
2枚のサイズは同じですから、横幅合計値(510)を2で割れば横サイズは255ピクセルになります。
縦サイズは比例計算で求めます。

新縦=元の縦(600)÷ 元の横(800)× 新横(255)

割り切れないときは四捨五入します。上の例では縦は191ピクセルになります。
画像タグを書き替えると整列配置が完成します。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|255|191#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|255|191#]<br clear=all>
表示は次のようになります。
d0181824_16284578.jpgd0181824_16285091.jpg
合計横幅(最大値)=255+余白 + 255 = 510 + 余白(10)

【3枚組の場合】
3枚のサイズは同じですから、横幅合計値(500)を3で割れば166 余り2ピクセルになります。
余りが出たときは1ピクセルづつ配分します。
1枚目:166、2枚目と3枚目:167 となります。

縦サイズは比例計算で求めます。
新縦=元の縦(600)÷ 元の横(800)× 新横(166)

割り切れないときは四捨五入します。上の例では縦は125ピクセルになります。
画像タグを書き替えて整列配置が完成します。
[#IMAGE|d0181824_16224739.jpg|201612/31/24/|left|166|125#][#IMAGE|d0181824_16225179.jpg|201612/31/24/|left|167|125#][#IMAGE|d0181824_16230025.jpg|・・・/31/24/|left|167|125#]<br clear=all>
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg
合計横幅(最大値)=166+余白+167+余白+167=500+2 × 余白(10)

【5枚組の場合】
ヒヨドリとメジロの画像を5枚横に並べるには、
画像の横幅 =[520-{10 ×(5-1)}]÷ 5 =96 ピクセルとなります。
横96ピクセル×縦72ピクセルに書き替えれば次のように並びます。
d0181824_16284578.jpgd0181824_16285091.jpgd0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

【1枚画像の横幅調整】
1枚目の花火の横幅は既定値に縮小されます。
既定値を上で求めた合計横幅の最大値に設定すると良いでしょう。
私のブログは500でしたので520に変更しました。これで花火の画像も左右が揃い整列配置になりました。
:画像の左余白が0のブログでは左右が揃わない場合があります。その場合は既定値を余白分大きくすれば、左側だけでも揃いますのでお試しください。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

【左余白0のブログの例】
ブログの本文横幅=480ピクセル、合計横幅の最大値=465ピクセル、余白=15ピクセル
既定値を480ピクセルに増やした事例です。1枚画像の左サイドは揃いましたが、右サイドが揃っていません。
d0181824_15263086.jpg


【画像の既定値を確認する】
[設定]-[デザインスキン]-[PCデザインスキン]とクリックしていくと「PCデザインスキン」の画面が出ます。
現在使用中のスキン(Cyber 2)の[編集]をクリックします。
d0181824_12054027.jpg

「PCデザインスキン編集」の画面が出てきます。
基本設定のサイズ欄にある数値が既定値です。画像のサイズをピクセルで指定するようになっています。
私のブログは500(ピクセル)に設定されていましたから、520に変更しました。
d0181824_13150258.jpg


横縦比が違う画像も仕組みがわかれば整列配置できます。
パズルのようですが仕組みが分かればいろいろと楽しめます。皆さんもお試しください。
次回は最終回です。

by PC-otasukeman | 2017-02-02 11:00 | Comments(0)

名前
URL
削除用パスワード

<< 画像の拡大表示を楽しむ(その5)    画像の拡大表示を楽しむ(その7... >>