適当メモ

手っ取り早く画像を横並びにする方法

ブログとかで画像を載せるとき、画像を横並びにさせたいなーと思うことがけっこうあるわけですよ。縦に並べるとスクロールさせなきゃいけないし、横に間が空いちゃって変だなー、みたいに思うし。だから出来れば横並びにしたほうがいい場合は横にしちゃいたい。で、そういうときに手っ取り早く画像を横並びにする方法をなんとなくメモ。役に立たないし、今さらな内容なので、読んでも仕方ないです。自分とごく一部のひとに向けたメモです。しかも以下の方法はあんまりスマートな方法じゃない場合もあるから、よい子はあんまり真似しないほうがいいと思うです。ちなみに以下の例では改行を入力すれば出力結果も改行で表示されるブログを想定しています

改行させるスキを与えない

画像を載せる場合、<img 〜 />っていうタグを挿入すると思うんだけど、横並びにさせるには、文章を編集するときもこの画像を表示させるタグを改行しないで、ひたすら横並びでつなげていく。つまり以下のような感じ。

<img /> <img />
この場合の見え方
画像左 画像右

ブログとかの場合、編集途中で改行を入れちゃうとそれが反映されちゃうから画像も縦並びになっちゃう。だから以下のようにすると縦に並んじゃう。

<img />
<img />
この場合の見え方
画像左
画像右

つまりは横に並べたければ改行しなければいいというもの。横並びをやめたいときは、改行すればいいだけ(seesaaやMovable Typeなどのブログの、改行を反映するモードの場合)。あら簡単。

普通はこれで十分だと思う。入力するとき改行しなければ表示結果も改行されない。それだけ。

余計なものは取り除け

livedoorのブログで画像挿入すると、たしか以下のような文字列がブログの入力欄に出てくる。気がした。

<a href="xxx.jpg" target="_blank"><img src="xxx-s.jpg" alt="カレーの写真" align="left" /></a><br />

この中に画像を横に並べるのを阻害するものがある。わかりにくいので分解。

<a href="xxx.jpg" target="_blank">
<img src="xxx-s.jpg" alt="カレーの写真" align="left" />
</a>
<br />

このうち、<a ...> と、<img ...></a>は画像を表示したり、大きな画像へリンクするものだからここではとくに問題はない。

問題なのは<br />とかいうやつ。これは改行させるためのものなので、以下のようになってる(便宜上改行してあるけど本来は一行ひとつながり)と、

<a href="xxx1.jpg" target="_blank">
<img src="xxx1-s.jpg" alt="カレーの写真" align="left" />
</a>
<br />
<a href="xxx2.jpg" target="_blank">
<img src="xxx2-s.jpg" alt="カレーの写真その2" align="left" />
</a>
<br />
<br />が入っちゃってる場合の見え方
画像左
 画像右

でこぼこになります。つまりこの<br />を取り除けばいいだけ。そうするとたぶん横並びになるでしょう。たぶん。

ちなみに、このlivedoorの画像挿入を使うと画像の横に文字が回りこむようになっています。この回り込むのがいやなときは、

<a href="xxx.jpg" target="_blank">
<img src="xxx-s.jpg" alt="カレーの写真" align="left" />
</a>
<br />
文字文字文字文字文字文字文字文字文字文字

この中から、align="left"という部分を削除すればいい。そうすれば文字は画像の横に回りこまない。

画像同士の間を空けたいときは、タグのなかでスタイルを指定する

何か理由があって画像同士のあいだを空けたいときは、imgと書かれたタグの間、つまり、

<img src="hogehoge1" /> |←この空間→| <img src="hogehoge2" />

に全角/半角スペースを入れれば隙間を調整できる。ただし、スペースで間を調節するのは無意味な空白を置いてるということなので、あんまりいい方法じゃない。スペースを置くのがよろしくないので、画像と画像の間をスペース1つ分以上空けるときは、以下のように、imgのタグのなかでstyleを指定する。

<img style="margin: 1em;" /> <img style="margin: 1em;" />
この場合の見え方
画像左 画像右

ちなみにこれも途中で改行したら意味ないので注意。 style="margin:1em;" というのはその分だけ隙間を空けますよーという意味。emという単位は、その数字の分の文字サイズだけマージン(隙間)をとりますよーと考えておけばいいと思う。上の例の場合それぞれで1文字分のマージンをとってることになる。だから、画像と画像の間は1文字分+1文字分、すなわち2文字分の間が空いてることになる。全角スペース2つを置くのと同じ効果がある。たぶん。

最初からcssで指定する

cssをいじれる場合は、最初からそこで指定しちゃう。一番楽な方法。cssをいじれるひとにやってもらう。自分もよくわかんないから誰かやってください。

まとまらないまとめ

こんな簡単なこと知ってるよバーゲ!と思ったらごめんなさい。でも意外とハマったりするので(自分が)、いちおうメモしておきました。

てか文章が下手なのでわかりづらい。箇条書きでまとめれば以下の通り。

全然まとまらねー。ごめんなさい。

補足

当たり前のことですが、環境によって表示は変わってきます。たとえばブログによってはブログの記事全体の横幅が指定されているので、画像を並べたときの幅(並べた画像を合計した横幅+マージンの横幅)がブログ全体の横幅より大きい場合は、画像を並べることは出来ません。また、幅が指定されていなくても、ブログを閲覧するひとのブラウザによって表示が変わってくることがあります。自分と同じように見えているとは限らないので、その辺を配慮しないとね!

あと、cssをいじるときはバックアップを取ってからやってください。表示が崩れたナリー!とか言われても責任取れません。

あとブログを投稿する前にプレビューして確認したほうがいいと思われます。変なミスしてる場合も無きにしも非ず。

HTMLとかスタイルシートについては、web上に諸先輩方のありがたい資料があるのでそれを参考にしてください。これはあくまでも自分用メモなのでひとのためになるようなものではないです。自分と自分に関連する一部の人にむけたメモです。よって役に立ち得るリファレンスといったものでもないです。もっと役に立つこと書けってはなしですね。役に立たなくてすいません。

追記

yahooの検索で迷い込んで来られるかたがたまにいらっしゃるようですが、おそらくお探しのものはここにはないと思います。どうぞgoogleで再検索してください。