2010年10月18日

画像の余白を設定

携帯電話からメールを送信する形で、最近ブログの記事を書いている。
写真を複数枚添付すると、横並びで配置できるときは余白がついているが、縦にならぶ時は余白なしに写真がくっついてしまう。

記事を見ると、

<div align="center"><a href="http://〜〜/image/〜〜.jpg" target="_blank"><img src="http://〜〜/image/〜〜.jpg" border="0" hspace="5" /></a><a href="http://〜〜/image/〜.jpg" target="_blank"><img src="http://〜〜/image/〜.jpg" border="0" hspace="5" /></a></div>

というように記述されていた。
hspace="5"
が自動的に入っているから、横への余白はあるが、
vspace
が自動的には入っていないから、縦への余白が入らない。

記事の編集から

hspace="5" vspace="5"

と記述すれば、上下の余白も設けることができる。

でもそれは写真ごとにしなければならない作業となる。

さくらのブログでは、複数枚の写真はまとめて<div></div>の中に入り、classの設定もない。

そこで、「デザイン」から使用しているデザインを選択し、cssのスタイルシートの中に


img {
padding: 10px;
}


と記述すると、すべての画像にこの設定が適用され、画像の周囲に10pxの余白が設定できた。
posted by かんちゃん at 22:51 | Comment(0) | TrackBack(0) | パソコン
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL


最後までご覧いただきありがとうございました。
人気blogランキングへ ブログランキング・にほんブログ村へ