2013年 03月 07日
画像横並べの術(その4)
【本文横幅と画像の余白を求める】
ご自分のブログの本文横幅と画像の余白を求めてみましょう。
スキン変更にある「CSS編集」で調べることができますが、
ここでは測定と計算で求める方法をご紹介します。
手順の通り行ってください。
(注:本文横幅が固定長のスキンが対象です)
① 互換表示をオフにします。
画像の自動改行の性質を利用して測定します。
② 投稿画面を出して、デジカメで撮影した画像を「左」配置で2枚続けてアップロードします。
2枚目のタグの後ろに改行タブを挿入します。
下の画像タグは相談室の例です。
③ プレビューします。自動改行が働いて2枚の画像が2段に表示されている筈です。
2段になっていないときは画像が小さ過ぎるか、互換表示がオンになっているかです。見直してください。
下の2枚の画像が2段に見えていればOKです。
④ 1枚目の画像タブの画像横幅を300に書き換えます。
⑤ プレビューを見ます。
1枚目の画像の横が縮みますが、まだ2段に表示されています。
⑥ 2枚目の画像タブの画像横幅を200に書き換えます。
⑦ プレビューを見ます。
2枚の画像が横に並んでいたら、2枚目の画像横幅を10ピクセル増やして210に書き換えます。
2枚の画像がまだ2段になっていたら、更に10ピクセル減らして190に書き換えます。
⑧ プレビューを見ます。
2枚目の画像がまだ横に並んでいたら更に10ピクセル増やして220に書き換えます。
2枚目の画像がまだ2段になっていたらさらに10ピくセル減らして180に書き換えます。
⑨ プレビューを見ます。
横並びが2段に、2段が横並びに変わるまで10ピクセル単位で増やしたり減らしたりします。
⑩ プレビューを見ます。
横に2枚並んでいた画像が2段に変わったら、今度は1ピクセルずつ減らし、再び横に2枚並ぶまで1ピクセルずつ減らしていきます。横に並んだらストップです。
2段に表示されていた画像が横に並んだら、今度は1ピクセルずつ増やします。
1ピクセル増やして再び2段に表示されたら、1ピクセル減らして横に並んだ状態でストップします。
プレビューを見ながら根気よく続けてください。
⑪ プレビューを見ます。
横に2枚並んだところが本文横幅一杯に画像が配置された状態です。
この時の1枚目と2枚目の画像横幅を記録してください。
相談室のブログでは1枚目が300ピクセル、2枚目が210ピクセルでした。
⑫ 次に3枚目の画像を「左」配置でアップロードします。
このとき、2枚目の画像タグの後ろをクリックしてカーソルを点滅させてからアップロードしてください。
⑬ 1枚目と2枚目の画像横幅を200ピクセルに書き換えます。
⑭ 今度は3枚目の画像横幅を増やしたり減らしたりして、横に3枚表示されたところでストップします。
画像横幅に目安がついていますから、相談室の場合は 90 からスタートしました。
要領は⑦~⑪と同じです。
1枚目~3枚目の画像横幅を記録します。
相談室のブログでは
200ピクセル、200ピクセル、100ピクセルでした。
以上の2つの測定値から「本文横幅」と「画像の余白」を求めます。
画像の余白 = (2枚の画像横幅の合計) ー (3枚の画像横幅の合計)
本文横幅 = (2枚の画像横幅の合計)+(画像の余白)×2
相談室の場合は、
画像の余白=510-500=10 ピクセル
本文横幅=510 + 10×2=530 ピクセル
となります。
今日はここまで。
次回は「画像横並べ術」の最終回です。
by PC-otasukeman | 2013-03-07 12:00 | Comments(0)