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

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

大変分かりにくようです。16日投稿の改訂版をご覧ください。

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

最後の仕上げは画像の整列配置です。
下の画像が完成形です。
15枚の画像が同じ余白で仕切られキチンと配置しています。
小さな画像もクリックすれば拡大表示されます。
このテクニックをマスターすれば、ブログが更に楽しくなると思います。
画像の拡大表示(その6)画像の整列配置_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16230025.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16404322.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16234531.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16253006.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16261212.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16262436.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16270014.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16274145.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16274980.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16275402.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16285091.jpg画像の拡大表示(その6)画像の整列配置_d0181824_11025205.jpg画像の拡大表示(その6)画像の整列配置_d0181824_11032212.jpg画像の拡大表示(その6)画像の整列配置_d0181824_11035238.jpg画像の拡大表示(その6)画像の整列配置_d0181824_11042287.jpg


HTMLやCSSの難しいことを知らなくても出来る方法をご紹介します。

【画像の既定値を確認する】
上の花火の画像サイズは「既定値」になっていると説明しましたが、まずは既定値を確認します。
[設定]-[デザインスキン]-[PCデザインスキン]とクリックしていくと「PCデザインスキン」の画面が出ます。
現在使用中のスキン(Cyber 2)の[編集]をクリックします。
画像の拡大表示(その6)画像の整列配置_d0181824_12054027.jpg

「PCデザインスキン編集」の画面が出てきます。
基本設定のサイズ欄にある数値が既定値です。画像の横幅をピクセルで指定します。
私のブログは520(ピクセル)に設定されていますから、上の花火の画像は横幅が520ピクセルということになります。
標準のスキンは500ピクセルでしたが、私は520ピクセルに変更しています。
その理由はこの記事の最後に説明しましょう。
画像の拡大表示(その6)画像の整列配置_d0181824_13150258.jpg


【画像を横に並べるテクニック】
上のアオサギの写真で説明します。
ちょっと複雑ですが、パズルを解く感覚で読み進めてください。
4枚の画像を続け挿入します。アップロードした画像サイズは横1244ピクセル×縦700ピクセルです。画像タグは次のようになります。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|mid|1244|700#][#IMAGE|d0181824_11042287.jpg|201610/31/24/|mid|1244|700#]
画像タグの配置をすべて[left]に書き替えます。
画像タグの最後に改行タグ②(<br clear=all>)を加えます。
次に横・縦すべてのサイズを[100]に書き替えます。すべて書き替えたら[プレビュー]をクリックします。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|100|100#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|100|100#]<br clear=all>
4枚の画像は下の様に表示されます。まだ右にスペースがあります。
画像の拡大表示(その6)画像の整列配置_d0181824_16091344.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16095044.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16102099.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16105002.jpg

1枚目の横幅のみ100から200に書き替えます。書き替えたら[プレビュー]をクリックします。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|200|100#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|100|100#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|100|100#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|100|100#]<br clear=all>
4枚の画像は下の様に表示されます。 大き過ぎると1行に収まらず、右の画像は次の段に移ってしまいます。
画像の拡大表示(その6)画像の整列配置_d0181824_16091344.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16095044.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16102099.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16105002.jpg


2段になったら 横幅を少し減らし、4枚横並びに戻ったら、少し減らすという操作を繰り返し、最終的には1ピクセルで調整します。
190にして4枚横並びに戻した状態です。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|190|100#]
画像の拡大表示(その6)画像の整列配置_d0181824_16091344.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16095044.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16102099.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16105002.jpg


最終調整です。1ピクセル増やして191に書き替えます。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|191|100#]
1ピクセル増やして2段表示になりましたので、190ピクセルが最大値ということになります。
画像の拡大表示(その6)画像の整列配置_d0181824_16091344.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16095044.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16102099.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16105002.jpg

次に画像のサイズを求めます。
【横幅】
4枚の仮の横幅を合計し、それを4で割れば1枚分の横幅になります。
190+100+100+100=490
490÷4=122 余り2
余りが出た時は1ピクセルづつ配分します。
【縦幅】
比例計算で求めます。
新縦=元縦(700)÷ 元横(1244)X 新横(122)=69

求めた画像サイズに書き替えて[プレビュー]確認します。
[#IMAGE|d0181824_11025205.jpg|201610/31/24/|left|122|69#][#IMAGE|d0181824_11032212.jpg|201610/31/24/|left|122|69#][#IMAGE|d0181824_11035238.jpg|201610/31/24/|left|123|69#][#IMAGE|・・・・・87.jpg|201610/31/24/|left|123|69#]<br clear=all>
これで完成です。
画像の拡大表示(その6)画像の整列配置_d0181824_16091344.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16095044.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16102099.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16105002.jpg

枚数が違っても手順は同じです。
ヒヨドリの2枚の画像は次のようになります。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|255|191#][#IMAGE|d0181824_16285091.jpg|201612/31/24/|left|255|191#]
画像の拡大表示(その6)画像の整列配置_d0181824_16284578.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16285091.jpg

【横幅を計算で求める方法】
2枚と4枚の横幅が決まれば、任意の枚数の横幅を計算で求めることができます。
まず、余白のサイズを求めます。
4枚の合計横幅=122+余白+122+余白+123+余白+123=490+3余白
2枚の合計横幅=255+余白+255=510+余白
両方の合計横幅が等しいことから、
490+3余白=510+余白
余白=10ピクセルとなります。
余白が分かれば、
N枚を横に並べる時の横幅は次の式で求めることができます。
横幅=[合計横幅 -{(N-1)× 余白}]÷ N

【既定値の見直し】
1枚の場合を計算式で求めると横幅520ピクセルになります。
画像タグの横幅を520ピクセルに変更しても既定値が小さいと既定値のサイズで表示されます。
整列表示を完成させるために既定値を合計横幅(520ピクセル)に変更しなければなりません。
【既定値=500ピクセル(標準スキン)】
画像の拡大表示(その6)画像の整列配置_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16230025.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16404322.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16234531.jpg

【既定値を520ピクセルに変更】
画像の拡大表示(その6)画像の整列配置_d0181824_16233500.jpg
画像の拡大表示(その6)画像の整列配置_d0181824_16224739.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16225179.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16230025.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16404322.jpg画像の拡大表示(その6)画像の整列配置_d0181824_16234531.jpg


次回は最終回です。
画像の拡大表示の応用編です。

by PC-otasukeman | 2017-01-12 16:07 | Comments(1)

Commented by 751686 at 2017-01-15 22:42
PC-otasukeman様
なおなおです。
今日も一日ガンバリましたが、理解できたようで???です。
何しろ、30分前の作業を忘れるのですから、、、、、難解です。
明日、また、挑戦することにいたします。
デザインスキン編集は、使いませんでした。
今までの、設定が無くなるようで。
また、明日よく読んで試してみます。
ご指導をありがとうございます。
名前
URL
削除用パスワード

<< 画像の拡大表示(その7・最終回)    画像の拡大表示(その5)画像の... >>