ウェブリブログの旧デザインを継承した CSS を変更する(パート4)

画像を配置した時に本文との間に余白を取るには・・・

画像と本文の余白ゼロ.pngウェブリブログサポートの「画像の回り込みについて」に、画像が貼り付けられた場合の、具体的な表示例が記されていますが、画像と文章の間にまったく余白がありません(右図)。

これでは見難くて仕方がありません。画像を配置する際には、文章との間の余白を設定できることが望ましいと思われますが、そういった設定機能はないようです。そこで、CSS 編集を・・・

【旧デザインの場合】
136 行から
img {
border-style: none;
margin: 10px; ← 追加した行
}

画像と本文の余白15px.pngmargin プロパティは、上下左右のマージンをまとめて指定する際に使用します。上下左右を同じマージン幅にしたい場合は、パラメータは 1つだけ指定します。上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。上記の場合は、上下左右の余白がすべて 10px とする設定です。
margin プロパティのパラメータ設定
パラメータ数挙 動
1[上下左右]のマージンになる
2[上下][左右]のマージンになる
3[上][左右][下]のマージンになる
4[上][右][下][左]のマージンになる

※ マージンは領域間のスペース、パディングは領域内のスペースです。

この画像と本文との間の余白がない設定は、旧ウェブリデザインの場合だけではなく、新デザインの場合もそうなっているようで、その場合には、CSS 編集する場所が異なっています。

【新デザインの場合】
364 行から
img {
vertical-align: bottom;
margin: 10px; ← 追加した行
}

※ デザインテンプレートによって異なっているかもしれません。その場合には、CSS をエディタに貼り付けて、「img」を検索して、一番後に出現した img にmargin プロパティ行を追加してみてください。

ただし、margin を多くとりすぎると、サムネイル画像にも影響してサムネイル画像がずれますから、margin の値を小さく設定するか、下記のようにサムネイル画像では余白を取らないように設定を追加する必要があります。
1105 行
.CategoryRecentEntryThumbnail__inner img {
width: 100%;
margin: 0px !important; ← 追加する行
}

1338 行
.Entry .EntryThumbnail .EntryThumbnail__inner img {
max-height: 100%;
margin: 0px !important; ← 追加する行
}

1509 行
.Module .RecentEntry .RecentEntryThumbnail .RecentEntryThumbnail__inner img {
width: 100%;
margin: 0px !important; ← 追加する行
}

1769 行
.Module .ArticleLink .ArticleLinkThumbnail .ArticleLinkThumbnail__inner img {
width: 100%;
margin: 0px !important; ← 追加する行
}

2183 行
.PermalinkThumbnail__inner img {
max-width: none;
width: 200px;
margin: 0px !important; ← 追加する行
}

これが、正しいやり方なのかどうかは、私も「シロート」なんで分かりません。専門の方が見られてご教授いただければ助かります。よろしくお願い致します。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント