2006年02月23日
ブログの画像をタテ並びに
ブログに写真を載せたときの並びが気になったことってないでしょうか。普通に2枚以上掲載したときって、写真は横にならびます。
これをタテ並びにしたい時って・・・結構悩みます。やり方としては二つあって、簡単な方法と、文法的にキレイな方法です。
1.簡単な方法
簡単な方法は、画像と画像の間に改行をたくさん入れる方法です。改行が少ないと、こんな感じに階段状になるので、いくつか改行をいれると、タテにならんでくれます。
2.文法的にキレイな方法
方法としては、タテに並べたい画像を表すタグ<img ・・・ /><img ・・・ />を、<p style="float:left">と</p>ではさんでやります。そうすると、はさまれた画像は左にひとまとまりになって、その後から打った文字は右にキレイに並んでくれます。
この時、画像のalign="left"の属性を削除しておくのをお忘れなく。これがあると、画像が横に並ぼうとするので消しておく必要があります。
あと、画像と画像の間は改行をいれておく必要があります。
・・・ん〜、結構ステップがあるのでまとめてみると、
(1)画像を<p style="float:left">と</p>ではさむ
(2)画像のalign="left"の属性を削除する
(3)画像と画像の間に改行をいれる
2.の方法のほうがキレイなんですが、手間のことを考えると私も1.の簡単な方法をよく使ってるような気がします。
こんな感じです。
これをタテ並びにしたい時って・・・結構悩みます。やり方としては二つあって、簡単な方法と、文法的にキレイな方法です。
1.簡単な方法
簡単な方法は、画像と画像の間に改行をたくさん入れる方法です。改行が少ないと、こんな感じに階段状になるので、いくつか改行をいれると、タテにならんでくれます。
2.文法的にキレイな方法
方法としては、タテに並べたい画像を表すタグ<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失礼しました!
一応足跡ですw失礼しました!
2. Posted by ごぶさたしてます 2006年02月23日 06:25
ちょっとサボってましたm(。≧Д≦。)mスマーン!!
3. Posted by twoboy20 2006年02月23日 14:13
ブログも配置1つでイメージがまったく
変わりますね。自分は単純な左右に
サイドバーがあるものです。もっと変えたいな
と思っているのですが、センスがないです(笑)
変わりますね。自分は単純な左右に
サイドバーがあるものです。もっと変えたいな
と思っているのですが、センスがないです(笑)
4. Posted by フェン 初心者のディスカバリーネット&アフィリエイトBlog 2006年02月23日 15:55
おぉ〜、この情報知りたかったです♪
痒いところに手が届きました!
応援ポチッ!!
痒いところに手が届きました!
応援ポチッ!!
5. Posted by wo 2006年02月23日 22:03
twoboy20さん、こんばんは。
情報量を一画面に並べたいときは、やっぱり左右にサイドバーがあるデザインがいいですよね。
私も季節ごとに変えるぞ!なんて、ブログ始めた当初は思ってたんですが、ん〜未だに始めたころのままのデザインですw。
情報量を一画面に並べたいときは、やっぱり左右にサイドバーがあるデザインがいいですよね。
私も季節ごとに変えるぞ!なんて、ブログ始めた当初は思ってたんですが、ん〜未だに始めたころのままのデザインですw。
6. Posted by wo 2006年02月23日 22:04
フェンさん、こんばんは〜。
お役に立ててよかったです。応援ありがとうです〜。
お役に立ててよかったです。応援ありがとうです〜。