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

画像横並べの術(その4)

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

【本文横幅と画像の余白を求める】
ご自分のブログの本文横幅と画像の余白を求めてみましょう。
スキン変更にある「CSS編集」で調べることができますが、
ここでは測定と計算で求める方法をご紹介します。
手順の通り行ってください。
(注:本文横幅が固定長のスキンが対象です)
互換表示をオフにします。
画像の自動改行の性質を利用して測定します。
投稿画面を出して、デジカメで撮影した画像を「左」配置で2枚続けてアップロードします。
2枚目のタグの後ろに改行タブを挿入します。
下の画像タグは相談室の例です。
画像横並べの術(その4)_d0181824_11311664.jpg

プレビューします。自動改行が働いて2枚の画像が2段に表示されている筈です。
2段になっていないときは画像が小さ過ぎるか、互換表示がオンになっているかです。見直してください。
下の2枚の画像が2段に見えていればOKです。
画像横並べの術(その4)_d0181824_13273757.jpg画像横並べの術(その4)_d0181824_13283796.jpg

1枚目の画像タブの画像横幅を300に書き換えます。
画像横並べの術(その4)_d0181824_1133591.jpg

プレビューを見ます。
1枚目の画像の横が縮みますが、まだ2段に表示されています。
2枚目の画像タブの画像横幅を200に書き換えます。
画像横並べの術(その4)_d0181824_1535914.jpg

プレビューを見ます。
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ピクセルでした。
画像横並べの術(その4)_d0181824_15101489.jpg
画像横並べの術(その4)_d0181824_13273757.jpg画像横並べの術(その4)_d0181824_13283796.jpg

次に3枚目の画像を「左」配置でアップロードします。
このとき、2枚目の画像タグの後ろをクリックしてカーソルを点滅させてからアップロードしてください。
画像横並べの術(その4)_d0181824_112985.jpg

1枚目と2枚目の画像横幅を200ピクセルに書き換えます。
画像横並べの術(その4)_d0181824_1124845.jpg

今度は3枚目の画像横幅を増やしたり減らしたりして、横に3枚表示されたところでストップします。
画像横幅に目安がついていますから、相談室の場合は 90 からスタートしました。
要領はと同じです。
1枚目~3枚目の画像横幅を記録します。
相談室のブログでは
200ピクセル、200ピクセル、100ピクセルでした。
画像横並べの術(その4)_d0181824_1133662.jpg
3枚の画像が本文横幅一杯に配置された状態です。
画像横並べの術(その4)_d0181824_13273757.jpg画像横並べの術(その4)_d0181824_13283796.jpg画像横並べの術(その4)_d0181824_147734.jpg

以上の2つの測定値から「本文横幅」と「画像の余白」を求めます。

 画像の余白 = (2枚の画像横幅の合計) ー (3枚の画像横幅の合計)
 本文横幅 = (2枚の画像横幅の合計)+(画像の余白)×2


相談室の場合は、
 画像の余白=510-500=10 ピクセル
 本文横幅=510 + 10×2=530 ピクセル
となります。

今日はここまで。
次回は「画像横並べ術」の最終回です。

by PC-otasukeman | 2013-03-07 12:00 | Comments(0)

名前
URL
削除用パスワード

<< 画像横並べの術(その5)    画像横並べの術(その3) >>