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

画像の拡大表示(その6・改訂)画像の整列配置

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

最後の仕上げは画像の整列配置です。
余白で仕切られた6枚の画像がブログの合計横幅の中にキチンと整列しています。
そして各画像をクリックすると拡大画像が表示されます。
画像の拡大表示(その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

画像の横幅、余白、合計横幅はブログによって決まっています。この値が分かれば整列配置は自由自在です。
以下、これらの値を求める手順をご紹介しましょう。
HTMLやCSSなどの難しいことを知らなくても出来る方法です。

アップロードする画像を画像加工ソフト(PhotoScape等)で作成します。
6枚の画像は全て同じサイズにします。
推奨画像サイズ:縦600ピクセル~700ピクセル(パソコン画面に収まるサイズです)
重要!ファイルサイズは500KB以下であること。

記事を書く画面を出し、6枚の画像をアップロードして、HTML編集の記事欄に6枚連続して挿入します。
【挿入された画像タグ】
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|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#](:実際の画像タグは連続して表示されます)

2枚目~6枚目の画像タグを次の赤字のように書き替えます。3枚目と6枚目の後ろに改行タグ②(赤字)を挿入します。
:文字は全て半角英数です)
[#IMAGE|d0181824_16233500.jpg|201701/07/24/|mid|900|600#][#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16285091.jpg|・・・/24/|left|100|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|100|100#]<br clear=all>
画像の表示は下のようになります。
1枚目の花火の画像は書き替えなくても自動的に既定値(このブログは500ピクセル)に縮小されます。
:赤字以外の改行タグが入った時は必ず削除してください。
画像の拡大表示(その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に書き替えます。
:ここでは100ピクセル増やしましたが、増やす量は自由に選んでください。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|200|100#]
画像の大きさと配列は次のようになります。
横幅が広がりますが、まだ右にスペースがあります。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

更に300に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|300|100#]
画像の配列は次のようになります。
横幅がさらに広がりますが、まだ右にスペースがあります。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

更に400に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|400|100#]
画像の配列は次のようになります。
横幅がさらに広がりますが、まだ右にスペースがあります。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

更に500に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|500|100#]
画像の配列は次のようになります。
ブログの横幅を超えると自動的に右の画像が次の段に移ってしまいます。移ったら前のサイズ(400)に戻します。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

ここからは横サイズを401、402、・・・・408、409・・と1ピクセルづつ増やしていきます。
410に書き換えた状態です。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|410|100#]
画像の配列は次のようになります。
まだ大丈夫です。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

411に書き替えます。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|411|100#]
画像の配列は次のようになります。
右の画像が次の段に移りました。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

横サイズを410に戻します。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg

要は合計横幅の一番大きいサイズを求めるのです。

このときの合計横幅は、
合計横幅=1枚目の横幅(410)+ 2枚目の横幅(100)+ 余白となります。
画像部分の合計(510)を枚数(2)で割れば1枚の横幅が求まります。上の例では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

次に3枚のメジロの画像を求めます。
手順は2枚の場合と同じですので説明は割愛します。

[#IMAGE|d0181824_16224739.jpg|201612/31/24/|left|300|100#][#IMAGE|d0181824_16225179.jpg|201612/31/24/|left|100|100#][#IMAGE|d0181824_16230025.jpg|201612/31/24/|left|100|100#]<br clear="all">
表示は次のようになります。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16224739.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16225179.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16230025.jpg


3枚の横幅を加算して3で割れば本来の画像の横幅が求まります。
上の例では3枚の横幅を加算すると500ピクセルになります。余りが出たときは1ピクセルづつ配分しますので、
1枚目:166、2枚目と3枚目:167 となります。
縦サイズは比例計算で求め、125とします。画像タグを次のように書き替えれば完成です。
:1ピクセルは調整範囲です。余りの配分は余り気にせずに。ただし、合計横幅はキッチリ合わせてください。
[#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

最後に余白のサイズを求めます。
余白=2枚の画像の合計ー3枚の画像の合計
  =510-500
  =10
余白が求まれば
 ブログの合計横幅が求まります。上の例では520ピクセルとなります。
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


ブログの合計横幅と余白が分かれば、N枚並べる時の横幅は次の計算で求めることができます。
画像の横幅={ブログの合計横幅ー余白 ×(N-1)}÷ N
例えば上の例では5枚並べるには横幅は、
{520-10 ×(5-1)}÷ 5=96ピクセルとなります。
野鳥の画像5枚を横に並べると次のようになります。
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16233500.jpg
画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16285091.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16224739.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16225179.jpg画像の拡大表示(その6・改訂)画像の整列配置_d0181824_16230025.jpg

以上は画像の横縦比が同じことが条件です。
横縦比が違う画像も仕組みがわかれば整列表示できます。少し複雑になりますので、次の機会に説明しましょう。

by PC-otasukeman | 2017-01-16 22:12 | Comments(3)

Commented by shizuo7f at 2017-01-17 10:10
そうですね~、
何でもそうなんですけど、写真編集もまさに“根気作業”そのもの^^。
でも手間がかかる、そこんところが楽しい部分かも。
思い通りに行ったときの満足度、
次に繋がりますよね~♪
お助けマンさんから、いつも刺激を頂いています。

Commented at 2017-01-18 11:31
ブログの持ち主だけに見える非公開コメントです。
Commented by tomiete3 at 2017-01-19 07:54
おはようございます。

微に入り細に入りの説明ありがとうございます。・・できた時の喜びを味わいたいです。
名前
URL
削除用パスワード

<< 既定のアプリ(メール編)    画像の拡大表示(その7・最終回) >>