サイト作成システムSIRIUSで記事を作成している時、分割になった画像をセンターに持っていき、上下の2枚の画像を繋げたいけど、画像と画像を並べてみるけど、なぜか隙間が空いてしまって困ったことはありませんか？
今回は、シリウス特有のトラブルを簡単な編集で隙間を解消する方法です。
SIRIUSで上下の2枚の画像を繋げる方法
2枚の画像を記事中央で繋げたいと思い、何も考えずに中央寄せを選択して画像を投入。
すると画像と画像の間に、こんな感じで隙間ができてしまいます。
これは、2枚の画像を中央に持っていくときだけなってしまいます。記事の中のこの2枚の画像のソースはどうなってるかというと、
<p class="txt-img" style="text-align:center"><img src="<% pageDepth %>img/01.jpg" alt="画像1"></p> <p class="txt-img" style="text-align:center"><img src="<% pageDepth %>img/02-02.jpg" alt="画像2"></p>
こんな感じで、画像を<p class=”txt-img” style=”text-align:center”>画像</p>で囲ってあります。
次に、画像と画像を横並びにしたら繋がるんじゃないかなと思い、並べてみました。
画像を横並びに並べてみたソースは
<p class="txt-img" style="text-align:center"><img src="<% pageDepth %>img/01.jpg" alt="画像1"><img src="<% pageDepth %>img/02-02.jpg" alt="画像2"></p>
残念ながら、これでも隙間が空いてしまいダメでした。
画像のソースを見て考えること3分…..
ん？ class設定に気付き、CSSを確認。
.txt-img img{
margin-top:
0px;margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
やっぱり！margin（マージン）（余白）が設定してありました。これでは、いくら画像を中央に持って行っても、隙間はあいたままです。
それで、一番手っ取り早い方法を考え、画像2枚をcenter（センター）タグで囲ってしまいます。
画像2枚をcenterで囲ったソースは、
<center> <img src="<% pageDepth %>img/01.jpg" alt="画像1"> <img src="<% pageDepth %>img/02-02.jpg" alt="画像2"> </center>
<center>画像</center>
これで、画像を確認してみると、
これで、画像と画像がくっつきました。
シリウスで画像を中央に持っていき、画像と画像が引っ付かない時は是非お試しを。
お疲れ様でした。
