解決済
画像を横に並べたときの間隔の設定はどうすればいいのでしょうか？
ブログの記事に、画像を二つ横に並べて入れたいんですが、その二つの画像の間に、ちょっとした隙間を入れたいんです。スペースキーだと間隔があき過ぎます。どうすればいいのでしょうか？
それと、できればその画像の下にそれぞれ、一文ずついれたいと思っています(しかも画像の真ん中に文がくるように)。
細かいことですいませんが、やり方を教えてください<(_ _)>
回答(3)
2.
変更前 <img ***** /><img ***** />
変更後 <img ***** style="margin-right:XXpx"/><img ***** />
XXpxはお好みの広さにします。
1.
これだけだと、img タグの中に class 属性を付け足して、それに CSS で指示をすれば、簡単にできます。ですが、その下に文字を一文づつ入れ、真中にとなるとテーブルタグを使用しないと無理ですね。このようになります。
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr> <td align="center"> <img class="クラス指定文字" hspace="0" src="左側の画像のアドレス" align="left" border="0" width="左側の画像の幅" height="左側の画像の高さ"></td> <td align="center"> <img class="クラス指定文字" hspace="0" src="右側の画像のアドレス" align="left" border="0" width="右側の画像の幅" height="右側の画像の高さ"></td> </tr> <tr> <td align="center">左側の文字</td> <td align="center">右側の文字</td> </tr></table>
クラス指定文字はお好きな文字を。例えば基本で初めから、pict が使われていますから、pict2 とか、pict3 とか・・・。
CSS （ スタイルシート ） の中に、それの指示を追加します。
例えば・・・。
.pict2{margin:5px 5px 5px 5px;} のように。
マージンの説明は、こちらを参考に！
3.
<p align="center">
<img hspace="0" src="左の画像" border="0" width="幅" height="高さ">
<img hspace="0" src="右の画像" border="0" width="幅" height="高さ"><br>
左の文字 右の文字</p>
は、半角のスペースですから、これで表示を見ながら手作業をするというのはどうでしょうか？
コメント(16)
回答ありがとうございます。
スタイルシートもいじらないとできないですかね？
というか、ここまで追求して記事を作ろうとしなくてもいいんじゃないかって感じですか？(T_T)
スタイルシートいじらなくてもできます。ただテーブルタグで間を開けると、色々なブラウザーに対応できません。他の方法としては、透明のgjiを間にはさむという手段もありますが、そっちのほうがめんどうです。
いいんじゃないですか (^^) 私はいつも、記事もデザインのうちと捉えて綺麗に表示させる事を意識しています。キャンディーさんのこだわりは、好きですよ！
2番目のコメントおかしいですね。
gji じゃなくて gif です。
その下に文字書くとすると難しいかな。
文字の部分はspanタグで囲んで、
widthとmargin-rightをimgタグと同じ大きさにすれば
ダメかな
文字を画像の左下寄せでしたら、テーブルは使わなくてもいいとかはないですか？
今思ったのは、自分でスペースキーで納得のいくところまで文字を持ってこればいいのかも…
＞たっけーさん
そこなんですよ ^^; 画像の間だけの問題なら、スタイルの指定で事足りるんですけど ・・・。文字が絡むとなると ・・・。
＞ キャンディーさん
それだと、ブラウザーによっては、正しく表示されないと思うんです。特に Mac 系はきびしい (>_<)
<div><img ***/><div>コメント</div></div>
<div style="float:left;margin-left:XXpx;"><img ***/><div>コメント</div></div><br clear="both" />
てのはダメかな
なんかややこしいですね…
一度やってみます！
いっそのこと簡単に、画像の下に一文いれるやり方だけとか…
コメント９のようにやってみましたら画像の下に左寄せですけど記事が入りました！ですが、画像が横に並んでくれません！どうすればいいですか？！
float:left;があるので画像は横に並ぶと
思ったんだけど、
最初の<div>を
<div style="float:left;">に変更してもダメですか
コメ12のようにやったら横並びにできました！
あとは画像と画像の間が決めれれば完璧なんですが…
「画像と画像の間が決めれれば」
というのは間隔という意味ですか？
どういう状況かがすみません。
よくわかりません。
できました…！！！
ありがとうございました。めちゃくちゃ嬉しいです☆
そしてスッキリしました。
画像と画像の間は今回は特に何も指定しなくてもこのままでいい感じになりました。ありがとうございました☆
AQさんも回答ありがとうございました。
教えていただいたやり方も試してみます☆
今回はたっけーさんにベスト回答をさしあげます。。。
