2006年02月23日

ブログの画像をタテ並びに

 ブログに写真を載せたときの並びが気になったことってないでしょうか。普通に2枚以上掲載したときって、写真は横にならびます。

sample_imgsample_imgこんな感じです。



これをタテ並びにしたい時って・・・結構悩みます。やり方としては二つあって、簡単な方法と、文法的にキレイな方法です。

1.簡単な方法
sample_img簡単な方法は、画像と画像の間に改行をたくさん入れる方法です。改行が少ないと、こんな感じに階段状になるので、いくつか改行をいれると、タテにならんでくれます。
sample_img

2.文法的にキレイな方法

sample_img
sample_img

1.の簡単な方法は、写真も文章も上から下に流れていく構成でしたが、文法的に正しい文章の構成としては、左側に写真をタテに並べて、右の空いたスペースに文字が入ってくるのが本来のカタチです。

方法としては、タテに並べたい画像を表すタグ<img ・・・ /><img ・・・ />を、<p style="float:left">と</p>ではさんでやります。そうすると、はさまれた画像は左にひとまとまりになって、その後から打った文字は右にキレイに並んでくれます。

この時、画像のalign="left"の属性を削除しておくのをお忘れなく。これがあると、画像が横に並ぼうとするので消しておく必要があります。

あと、画像と画像の間は改行をいれておく必要があります。

・・・ん〜、結構ステップがあるのでまとめてみると、
(1)画像を<p style="float:left">と</p>ではさむ
(2)画像のalign="left"の属性を削除する
(3)画像と画像の間に改行をいれる

2.の方法のほうがキレイなんですが、手間のことを考えると私も1.の簡単な方法をよく使ってるような気がします。

トラックバックURL

この記事へのコメント

1. Posted by    2006年02月23日 03:49
色々まわってたらたどり着きました。
一応足跡ですw失礼しました!
2. Posted by ごぶさたしてます   2006年02月23日 06:25
ちょっとサボってましたm(。≧Д≦。)mスマーン!!
3. Posted by twoboy20   2006年02月23日 14:13
ブログも配置1つでイメージがまったく
変わりますね。自分は単純な左右に
サイドバーがあるものです。もっと変えたいな
と思っているのですが、センスがないです(笑)
おぉ〜、この情報知りたかったです♪

痒いところに手が届きました!


応援ポチッ!!
5. Posted by wo   2006年02月23日 22:03
twoboy20さん、こんばんは。

情報量を一画面に並べたいときは、やっぱり左右にサイドバーがあるデザインがいいですよね。

私も季節ごとに変えるぞ!なんて、ブログ始めた当初は思ってたんですが、ん〜未だに始めたころのままのデザインですw。
6. Posted by wo   2006年02月23日 22:04
フェンさん、こんばんは〜。
お役に立ててよかったです。応援ありがとうです〜。

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
アクセスカウンタ

    ブログ内検索
    Google


    よりみちweb
    www