お蔵入り

clip!clip!
Ads By Google

文字のサイズによってブログの表示が異なる

私のブログは以下のとおりです。


「表示」→「文字のサイズ」で、最小から最大までありますよね。このサイズによって、ブログの写真、文章などがズレます。写真がずれて右側に長く広がってしまった時などは、2コラムの左側コラム(プロフィール、カテゴリー等)が一番下までずれてしまいます。

ブログを書いた後、最後のチェックとして、文字サイズは最大から最小まで変えてずれが無いことを確認しています。

このとき、全ての文字サイズでずれが無いようにするには、「最小」に合わせる必要があります。最小で合わせれば全ての文字サイズでずれが無くなりますが、「最大」にすると、隙間が多すぎます(最小に合わせて改行が多いため)。

文字サイズで写真や文章、コラムがずれないようにするためには、どうすればよいでしょうか?

2008-01-18 23:20の質問
ブログ  コラム  
ブログ
ブログのかわいいポータルサイト「ヤプログ!」
www.yaplog.jp/
この質問は、30日間解決しなかったために自動的に質問が一旦閉じられました。

回答(2)

1.

2008-01-19 01:58:15
思想的な部分があるので、アドバイスとして。
文字のサイズをブラウザ側で変更された時に、レイアウトがある程度崩れてしまうのはしょうがないです。
「表示~文字のサイズ」で変更されないようにするには、文字サイズの相対的な指定を止めて数値pt的な指定にすれば、とりあえず変更されないようにはなりますが、字を大きく表示したいのに表示されないということはユーザインターフェース的によくないです。
「中」の表示でレイアウトされている時に、字を大きくしてレイアウトが崩れることはある程度ユーザ側では納得済みだと思うのであまり気にしない方がいいような気がします。

>「最大」にすると、隙間が多すぎます(最小に合わせて改行が多いため)。
改行が多いというより、「隙間」を作るために
<P><FONT size=4></FONT>&nbsp;</P>
を多用していることが問題なのだと思います。
<p style="margin-bottom:50px">文章</p>
のようにすれば、文字のサイズに関係なく、下側に「隙間:マージン」を作ることができると思います。
スタイルシートで、適当なクラス(名前は自分がわかる略語でいいけど)
.b_margin { margin-bottom:50px }
などしておけば
<p class="b_margin">文章</p>
でいちいち全部入力しなくていいです。
回答レベル : アドバイス

2.

2008-01-24 14:00:41
 画像と文章を並べて表示しよとするから、無理が出るのだと思います。
テーブルのwidthサイズを決めて、画像を貼り付けたら、<br>で改行して、文章を入れるとすっきりするんじゃないですか?
<TABLE cellSpacing=0 cellPadding=0 width=500 border=1 color-fff20f>
で、 TABLEの中に入れるimgです。
<TBODY>
 <TR>
   <TD width=320><IMG height=19 src="usagi.gif" width=456> 
画像のサイズを統一すればきれいです。
画像の後ろに<br>。
次に文字サイズを指定します。
<font size="3">あるいは<font size="5">などと。
文字サイズと文字カラーは、必ず文字のすぐ前につけると自分で納得できますよ。
回答レベル : アドバイス
Ads By Google

コメント(2)

#1.  ヒロシ
2008-01-20 03:59:58

アドバイスどうもありがとうございました。
でも、
<p style="margin-bottom:50px">文章</p>
以下の意味が理解できません。
具体的には、どの位置にどの文章を挿入すればよいですか?素人なのでよく分かっていません。

よろしくお願いいたします。

#2.  BLUEPIXY
2008-01-20 13:52:11

>>#1 どの位置にどの文章を挿入すればよいですか?
文章は、回答の「文章」の位置に入れます(つまり実際の文章をそこに入れるということ)。
>以下の意味が理解できません。
「スタイルシートで…」以下の意味ですか?
タグの中にスタイルの設定をするのではなくて、スタイルシートで設定するための方式について書いています。

トラックバック(2)

トラックバックURL: