シリウスで記事中央の2枚の画像が引っ付かない時の対処法!

シリウスの記事の中の画像と画像を縦にTOP

 

サイト作成システムSIRIUSで記事を作成している時、分割になった画像をセンターに持っていき、上下の2枚の画像を繋げたいけど、画像と画像を並べてみるけど、なぜか隙間が空いてしまって困ったことはありませんか?

今回は、シリウス特有のトラブルを簡単な編集で隙間を解消する方法です。

Sponsored Links

SIRIUSで上下の2枚の画像を繋げる方法

2枚の画像を記事中央で繋げたいと思い、何も考えずに中央寄せを選択して画像を投入。

中央寄せ

 

 

すると画像と画像の間に、こんな感じで隙間ができてしまいます。

画像が離れてる

 

 

これは、2枚の画像を中央に持っていくときだけなってしまいます。記事の中のこの2枚の画像のソースはどうなってるかというと、

こんな感じで、画像を<p class=”txt-img” style=”text-align:center”&gt;画像</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>画像</center>

 

これで、画像を確認してみると、

画像と画像が引っ付く

 

これで、画像と画像がくっつきました。

シリウスで画像を中央に持っていき、画像と画像が引っ付かない時は是非お試しを。

 

お疲れ様でした。

Sponsored Links

SNSでもご購読できます。

コメントを残す

*

CAPTCHA