人気ブログランキング | 話題のタグを見る

画像の拡大表示(その6)画像の整列配置(テスト投稿)

この投稿はテスト投稿です。正式版はもう少しお待ちください。2月1日17時現在

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

最後の仕上げは画像の整列配置です。
画像をキチンと整列させるテクニックをご紹介します。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16230025.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_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枚組のメジロは書き替えられたサイズに縮小されます。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_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>
画像の大きさと配列は次のようになります。
合計横幅が広がりますが、まだ右にスペースがあります。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg

更に300に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|300|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
画像の配列は次のようになります。
合計横幅がさらに広がりますが、まだ右にスペースがあります。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_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段になってしまいました。
合計横幅が最大値を超えたため、自動的に改行されたのです。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_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段になりません。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg

311に書き替えます。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|311|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|200|100#]<br clear=all>
右の画像が次の段に移りました。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg

310に戻します。
この状態が合計横幅の最大値です。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg
合計横幅(最大値)=310+余白 + 200 = 510 + 余白

本来の画像サイズを求めます。
2枚のサイズは同じですから、510を2で割れば1枚の横幅が求まります。
横サイズは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>
表示は次のようになります。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg
合計横幅(最大値)=255+余白 + 255 = 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">
表示は次のようになります。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16230025.jpg
合計横幅(最大値)=200+余白+100+余白+200=500+2余白

本来の画像サイズを求めます。
3枚のサイズは同じですから、500を3で割れば1枚の横幅が求まります。
余りが出たときは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>
表示は次のようになります。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16230025.jpg
合計横幅(最大値)=166+余白+167+余白+167=500+2余白

最後に余白のサイズを求めます。
余白は全て同じサイズですから、3枚組の画像の合計と2枚組の画像の合計の差が余白になります。
上の例では、510-500=10 ピクセルが余白のサイズです。
:余白の値はブログによって違います。余白の無いブログもあります。

以上で合計横幅の最大値(520)と余白(10)が求まりました。

この二つの値が分かればN枚の場合の横幅は次の計算式で求めることが出来ます。
ブログの合計横幅と余白はしっかりと記録してください。

画像の横幅=[合計横幅ー{余白 ×(N-1)}]÷ N
例えば5枚横に並べる場合は、
画像の横幅 =[520-{10 ×(5-1)}]÷ 5 =96 ピクセルとなります。
横96ピクセル×縦72ピクセルに書き替えれば次のように並びます。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16230025.jpg

1枚目の花火の横幅は既定値で表示されています。
既定値を確認して、合計横幅の最大値に設定します。
私のブログは500でしたので520に変更しました。花火の画像も左右が揃い整列配置になりました。
:ブログによっては左右が揃わない場合があります。その場合は既定値を余白分大きくすれば、左右どちらかが揃いますのでお試しください。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16285091.jpg
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_16230025.jpg


【画像の既定値を確認する】
[設定]-[デザインスキン]-[PCデザインスキン]とクリックしていくと「PCデザインスキン」の画面が出ます。
現在使用中のスキン(Cyber 2)の[編集]をクリックします。
画像の拡大表示(その6)画像の整列配置(テスト投稿)_d0181824_12054027.jpg

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


以上は画像の横縦比が同じことが条件です。
横縦比が違う画像も仕組みがわかれば整列配置できます。
次回は最終回です。

by PC-otasukeman | 2017-01-29 17:06 | Comments(4)

Commented by tomiete3 at 2017-01-30 08:11
おはようございます

 一枚一枚表示するより、こうして並べる楽しいもありますね。
Commented by PC-otasukeman at 2017-01-31 16:16
★ tomiete3 さん
コメントありがとうございます。
画像の拡大表示は奥が深く楽しいです。
やさしい改訂版を準備中です。お待ちください。
Commented by shizuo7f at 2017-02-02 15:03
揃いましたね~♪
画面いっぱい、無駄なくきれいに!
それぞれ大きさの違う花火、鳥、
写真の掲載がまた楽しくなりますね^^。
磨かないとね、こういうテク。
わたしの場合、これまで“画面いっぱい”の掲載はしていませんが、
変化を付ける為あえて余白を残し、写真の大きさを変えています。
有難うございます、
今度この掲載方法をチャレンジしてみます。
Commented by PC-otasukeman at 2017-02-05 15:27
★ shizuo7f さん
大きなサイズで見たい画像があった時拡大表示のテクニックを使ってください。
名前
URL
削除用パスワード

<< 画像の拡大表示を楽しむ(その7...    画像の拡大表示(岩屋堂の野鳥 ... >>