本文へジャンプします。

ココログサポート Top>>Questions List>>二つの画像を、ぴったりと隙間なくくっつけ...

fixed_question

二つの画像を、ぴったりと隙間なくくっつけて表示させたい

　二つの画像を並べて表示させた時に、どうしても間に余白があいてしまうのですが、これを一つの画像に見えるように隙間なくぴったりとくっつけて表示させる方法はないのでしょうか？
　
　とあるゲームのユーザー参加企画で貼るバナーが、二つの画像を保存して、横に並べて表示させる、というものなのですが、うまくできなくて困っています。どなたか、おわかりになられる方がいらっしゃいましたら、教えていただけますでしょうか。よろしくお願いします。

http://rouge-justice.cocolog-nifty.com/blog/
basic infomations

美猫 | 2009/10/05 18:56(5723days ago) | permalink | 記事の投稿／管理

Please login to comment.

Re: 二つの画像を、ぴったりと隙間なくくっつけて表示させたい
こんな感じでいいですか？

<a href="http://www.liar.co.jp/val_top.html" target="_blank">
<img src="http://rouge-justice.cocolog-nifty.com/pb2_as.png" alt="白光のヴァルーシア オフィシャルHPへ！" border="0" width="70" /></a>
<a href="http://liar26th.blog47.fc2.com/" target="_blank">
<img style="margin-left:-4px" src="http://rouge-justice.cocolog-nifty.com/pb2_bs.png" alt="白光のヴァルーシア オフィシャルBlogへ！" border="0" width="70" /></a>

一番右の画像に「style="margin-left:-4px"」と追加するだけです。

take_on | 2009/10/05 19:13(5723days ago) | permalink

Re: 二つの画像を、ぴったりと隙間なくくっつけて表示させたい
ごめんなさい。改行を削るだけでいいです。たぶん。
間違ってたら、誰かフォローよろしくです。

<a href ～ ><img ～ /></a><a href ～ ><img ～ /></a>

take_on | 2009/10/05 19:25(5723days ago) | permalink

Re: 二つの画像を、ぴったりと隙間なくくっつけて表示させたい
お答えいただいてありがとうございます！
なるほど「style="margin-left:-4px"」と入れるだけで良かったのですね。
　
　質問を投稿した後、自分でも何とかできないか調べてみた結果、imgタグのhspace属性というものを設定して余白を無くすことができたのですが、記述がややこしくなってちょっとした打ち間違いで崩れてしまったりして、しばらく悪戦苦闘していました。

<a href="http://www.liar.co.jp/val_top.html" target="_blank">
<img src="http://rouge-justice.cocolog-nifty.com/pb2_as.png" alt="白光のヴァルーシア オフィシャルHPへ！" border="0" width="70" hspace="0" /></a>
<a href="http://liar26th.blog47.fc2.com/" target="_blank">
<img src="http://rouge-justice.cocolog-nifty.com/pb2_bs.png" alt="白光のヴァルーシア オフィシャルBlogへ！" border="0" width="70" hspace="0" /></a>
　
　これでもぴったりくっつくようになったのですが、教えていただいた方法の方が簡単にできますね。

　ちなみに改行を削ってみてもうまくいきませんでした。ひょっとしたら改行をきちんと削れていないのかもしれませんが、どうも記事本文中でもマイリストのメモでも、保存をすると途中で勝手に改行されてしまったりして、うまく行きませんでした。教えていただいた方法が手軽で確実だと思います。

　お答えいただいてありがとうございました！　助かりました。

美猫 | 2009/10/06 01:58(5722days ago) | permalink