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

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

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

最後の仕上げは画像の整列配置です。
画像をキチンと整列させるテクニックをご紹介します。
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 + 余白

本来の画像サイズを求めます。
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>
表示は次のようになります。
d0181824_16284578.jpgd0181824_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">
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_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>
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_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ピクセルに書き替えれば次のように並びます。
d0181824_16284578.jpgd0181824_16285091.jpgd0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

1枚目の花火の横幅は既定値で表示されています。
既定値を確認して、合計横幅の最大値に設定します。
私のブログは500でしたので520に変更しました。花火の画像も左右が揃い整列配置になりました。
:ブログによっては左右が揃わない場合があります。その場合は既定値を余白分大きくすれば、左右どちらかが揃いますのでお試しください。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg


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

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


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

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

画像の拡大表示(岩屋堂の野鳥 2017-2)

画像の拡大表示のテクニック 間もなく改訂版を投稿します。

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

岩屋堂・神田池にて  撮影時間:朝9時から10時 (クリックで拡大、再クリックで戻る)
d0181824_21524502.jpgd0181824_21584538.jpg
d0181824_21493326.jpgd0181824_21491892.jpgd0181824_21472481.jpgd0181824_21470522.jpg
d0181824_22501508.jpgd0181824_21465771.jpgd0181824_21464868.jpgd0181824_21463970.jpg
d0181824_21462772.jpgd0181824_21520046.jpgd0181824_21522523.jpgd0181824_21523688.jpg

d0181824_22130282.jpgd0181824_22125766.jpg
d0181824_22131371.jpgd0181824_22125261.jpgd0181824_22124505.jpg
d0181824_22123699.jpgd0181824_22122581.jpgd0181824_22121991.jpg

d0181824_22235557.jpg
d0181824_22261331.jpgd0181824_22255128.jpg
d0181824_22273759.jpgd0181824_22270916.jpgd0181824_22270132.jpgd0181824_22264230.jpgd0181824_22263746.jpg


# by PC-otasukeman | 2017-01-26 22:46 | Comments(4)

画像の拡大表示(岩屋堂の野鳥 2017)

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

岩屋堂の野鳥 2017年1月(クリックで拡大)
d0181824_15481876.jpgd0181824_15504465.jpgd0181824_15501544.jpgd0181824_15483967.jpg
d0181824_15095787.jpgd0181824_15100475.jpgd0181824_15101436.jpgd0181824_15102622.jpg
d0181824_16113140.jpgd0181824_16115268.jpgd0181824_16120096.jpgd0181824_16110644.jpg
d0181824_16271162.jpgd0181824_16364215.jpgd0181824_16260892.jpgd0181824_16335475.jpg



# by PC-otasukeman | 2017-01-25 16:39 | Comments(6)

Windows Live Maile 2012 サポート終了

久し振りの野鳥撮影 IN 岩屋堂(クリックで拡大)
d0181824_15481876.jpgd0181824_15504465.jpgd0181824_15501544.jpgd0181824_15483967.jpg

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

【ご相談内容】
1月10日でライブメールのサポートが終了したとのことですが、
このまま使っていてもいいでしょうか?

【回答】
通常のWindows 製品は発売後 5年間でサポートが終了します。
ご使用のライブメールは、
「Windows Live Mail 2012」という製品であり、Windows 7 以降のパソコンにインストールされているものです。
2017年1月10日をもって5年間のサポート期間が終了したということです。

サポートが終了すると、仕様変更や新機能の追加はもとより、プログラムの不具合も直してくれなくなります。
すなはち、Windows アップデートによる修正プログラムが提供されなくなるのです。
一部の製品(OS等)ではセキュリティ関連の修正プログラムだけは、更に5年間延長して提供してくれますが、ライブメールに適用されるかはどうかわかりません。

【お助けマンの見解】
プログラムの不具合は5年間で修正され尽くしたと考えられます。
また、セキュリティ関連の不具合も経験上心配することはないと思います。
万が一、致命的な不具合が発見されたとしてもWindows アップデートで修正してくれると信じています。
以上のことから、一般家庭のパソコンの場合このまま使い続けても問題はないと思います。
私自身も使い続ける予定です。

注意:会社など信用を重んずるところではライブメールの使用は慎重にしてください。

【ご参考】
Windows OS のサポート期間です。
基本的には5年+5年=10年間は安全に使えるように考えられています。さてライブメールはどうでしょうか?
d0181824_15352945.jpg
d0181824_15351699.jpg
d0181824_15350815.jpg

# by PC-otasukeman | 2017-01-22 15:45 | Comments(0)

リモートサポートの点検商法にご注意を!!

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

「リモートサポート」詐欺が横行しているようです。
遠隔操作のソフトウエアをダウンロードさせて、パソコンを診断し、有料サポートを押し付ける手口です。
高齢者に被害が多く、テレビでも手口が報道されていました。
ブロ友さんからも数件相談があり、脅威が身近に迫っています。
Aさんが体験した詐欺の手口をご紹介しますので、皆様も被害に遭わぬよう注意してください。
【手口】
インターネットをクリックしながら楽しんでいたら、
突然ピ!ピ!ピ!・・・と 警報音が鳴り始め、画面に次のような警告文が表示された。
内容は「エラーが発生したのでカスタマーサポートに問い合わせてください」というもの。
d0181824_21452668.jpg

訳も分からず指示された Windowsサポートに電話をすると、すぐに繋がった。
電話の対応も丁寧であったので、オペレータの指示に従い、遠隔操作用のソフトウエア(TeamViewer)をダウンロードした。
さらにオペレータの指示に従って、ダウンロードしたプログラムを起動して遠隔操作状態にした。
(Aさんのパソコンはオペレータから操作できる状態になっています)
遠隔操作によりパソコンの診断が始まります。
診断が終わるとオペレータから、「重要な障害が見つかったので修理が必要です。この先は有料です」との説明で有料サポートの案内に変わった。
この段階でおかしいと思い有料サポートをお断りして電話を切った。
しかし、電話を切ったものの、警報音 ピ!ピ!ピ!・・と鳴り止まず、画面は診断状態のまま。どうすることもできず、お助けマンに相談。
お助けマンの指示を受けてパソコンを強制終了させて解決した。
【強制終了の方法】
キーボードの[Ctrl]キーと[ALT]キーと[Delete]キーを押して「タスクマネージャー」を出してプログラムを終了する。
この操作はとっさの場合はなかなかできません。
私は非常時の場合は[電源スイッチ]の長押し(5秒位)を多用しています。

Aさんはなんとか被害に遭わずに済みましたが、お助けマンが現れなかったらどうなったでしょうか!?!?!?
次の対処方法をしっかり頭に入れておいてください。
【対処方法】
インターネットの閲覧中に出る警告文は100%詐欺と思ってください。
一切無視することです。問題の画面は早く閉じてください。
閉じることが出来ないときはパソコンを強制終了してください。
電話をかけたり、メールを送信したり、リンクをクリックしたりしないでください。

プログラムをダウンロードしてしまったときは直ぐにアンインストールしてください。
再起動したら、念の為履歴の削除を実行してください。

【被害に遭ったBさんの例です】
我が家は接続会社のリモートサポートに加入しております。
我が家の接続会社の紹介だと言ってPCを診断してくれる会社がありますから、してみてくださいと言われました。
早速、問い合わせてみました
そして、私のPCをリモートサポートで調べてくれました。
結果、「多くの不要ファイルが見つかりました。不要ファイルには、ウイルスが入り込む、、、、、、」とかなんとか?
(74歳の私は、不安になりました。)
削除するには、9千○○円と消費税です。
「まぁーーー良いカッ!」と、お願いしました。
そして、広告(ウイルスが付いてくる)を消す方法もあります。非表示にするには、9千○○円と消費税です。
それも、「まぁーーー良いカッ!」と、お願いしました。
主人のPCと2台ですから、約4万円の出費になりました。
不要ファイルの確認は、私には解りませんが、広告は、係の人が「ホラネ!」と見せてくれた時は見えませんでしたが、何日かして気が付いたら出ていました。
私が、納得してお願いしたことですから、文句はありませんが少々首を傾げております。

いずれの場合も カスタマーセンタになりすました詐欺の手口です。

不安に感じたことがありましたら相談室にお知らせください。

# by PC-otasukeman | 2017-01-20 17:35 | Comments(13)

既定のアプリ(メール編)

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

【ご相談内容】
お助けマンにメールを送ろうと思い、相談室のポストの絵をクリックしたところグーグルが開いてしまいます。
どのようにすると、メールを送信出来るのでしょうか。
Windows 10、メールソフトはOutlookを使っています。

【回答】
既定のアプリを次の手順でOutlookに変更してください。
スタートメニューを出して[ 設定]をクリックします。
d0181824_10242796.jpg

設定画面が出たら[システム]をクリックします。
d0181824_10243792.jpg

設定画面が出ますので、[既定のアプリ]をクリックして開きます。
相談室のポストのように起動するアプリが指定されていないとき、既定のアプリで起動するようになっています。
ご相談者の場合、メールの既定のアプリは「Google Chrome」になっていると思います。
[Google Chrome]をクリックします。
d0181824_10250386.jpg

プログラムリストが出てきますので、[Outlook]をクリックします。
d0181824_10251185.jpg

メールの既定のアプリがOutlookに切り替わりました。
d0181824_10251794.jpg

画面を閉じて相談室のポストをクリックしてください。
Outlookの送信メッセージが出てきます。
d0181824_10460911.jpg

同じようなケースが他にもありますので、
既定のアプリを見直すことをおすすめします。
こちらの記事も参考にしてください。
http://sukettopc.exblog.jp/22781016/

# by PC-otasukeman | 2017-01-19 11:04 | Comments(2)

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

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

最後の仕上げは画像の整列配置です。
余白で仕切られた6枚の画像がブログの合計横幅の中にキチンと整列しています。
そして各画像をクリックすると拡大画像が表示されます。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg
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ピクセル)に縮小されます。
:赤字以外の改行タグが入った時は必ず削除してください。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

ここからは根気作業になります。
先ずはヒヨドリの2枚の画像を横に整列配置してみましょう。
左のヒヨドリの横サイズを200に書き替えます。
:ここでは100ピクセル増やしましたが、増やす量は自由に選んでください。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|200|100#]
画像の大きさと配列は次のようになります。
横幅が広がりますが、まだ右にスペースがあります。
d0181824_16284578.jpgd0181824_16285091.jpg

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

更に400に増やします。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|400|100#]
画像の配列は次のようになります。
横幅がさらに広がりますが、まだ右にスペースがあります。
d0181824_16284578.jpgd0181824_16285091.jpg

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

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

411に書き替えます。
[#IMAGE|d0181824_16284578.jpg|201612/31/24/|left|411|100#]
画像の配列は次のようになります。
右の画像が次の段に移りました。
d0181824_16284578.jpgd0181824_16285091.jpg

横サイズを410に戻します。
d0181824_16284578.jpgd0181824_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>
表示は次のようになります。
d0181824_16284578.jpgd0181824_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">
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_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>
表示は次のようになります。
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

最後に余白のサイズを求めます。
余白=2枚の画像の合計ー3枚の画像の合計
  =510-500
  =10
余白が求まれば
 ブログの合計横幅が求まります。上の例では520ピクセルとなります。
1枚目の花火の横幅を合計横幅に合わせるには既定値を合計横幅に設定変更することです。500から520に変更すると次のように表示されます。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpg
d0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg


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

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


ブログの合計横幅と余白が分かれば、N枚並べる時の横幅は次の計算で求めることができます。
画像の横幅={ブログの合計横幅ー余白 ×(N-1)}÷ N
例えば上の例では5枚並べるには横幅は、
{520-10 ×(5-1)}÷ 5=96ピクセルとなります。
野鳥の画像5枚を横に並べると次のようになります。
d0181824_16233500.jpg
d0181824_16284578.jpgd0181824_16285091.jpgd0181824_16224739.jpgd0181824_16225179.jpgd0181824_16230025.jpg

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

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