STORK(ストーク)で画像下のスペースを消す２つの対処方法

こんにちは！ チョット勉強になったネイネイ(@NEYNEYx2)です。

記事をいつものように書いていて、ふと画像下に謎のスペースができていることに気づき、「チョットこれどうにかならないかな？」っと思い解決方法を探りましたので、対処法をまとめます。

 

画像下に謎のスペースができる原因

ボックス内に画像を入れると、画像下のスペースがチョット目立ってしまい美しくないですよね。

このブログは、WordPressのテーマにSTORK(ストーク)を使用しているのですが、どうやらこのテーマでは画像のデフォルト設定がそうなっているようです。

親テーマのstyle.cssで「.entry-content img」を検索すると下記のように記述されています。

.entry-content img {
  margin: 0 0 1.5em 0;
  max-width: 100%;
  height: auto;
}

 

上記のimg内の「margin」が影響しています。

marginは、要素の外にスペース領域を作成します。marginの後ろに値が４つある場合は、「上、右、下、左」が適用されます。

上記図を見るとわかりやすいと思いますが、margin下が1.5emになってことで画像下に謎のスペースができていました。

なのでこの値をゼロにすれば、画像下にスペースが入らなくなります。 変更前後の画像が下記になります。

 

STORK(ストーク)で画像下のスペースを消す方法

画像下のスペースを消すためにCSSをカスタマイズしていきますので、下記のどちらかお好みな方を編集ください。

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

 

画像１つ１つに個別に適用する方法

まず、下記をCSSに記述します。 「sita」の部分は、クラス名になるのでご自身でわかりやすい名前に変更ください。

img.sita {
  margin-bottom: 0;
}

 

CSSに追加できたら、普段と同じように画像を挿入していきます。

 

ビジュアルエディタの場合

挿入した画像を選択した時にでるボタンの中から、下記の赤枠内の「編集」ボタンを押します。

1. 上級者向け設定内の「画像CSSクラス」に先ほど、カスタマイズしたCSSのクラス名を入力します。(下記は「sita」と入力してます)
2. 「更新」ボタンを押して内容を反映させます。

上記の内容で画像下のスペースが消えます。

 

テキストエディタの場合

下記のようにimg要素のクラスを定義すれば、カスタマイズの内容が反映されます。

<img class="sita" src="https://〇〇〇〇.jpg" />

 

サイト内全ての投稿画像に適用する方法

下記をCSSに記述することで、サイト内全ての投稿画像下のスペースが消えます。

.entry-content img {
  margin-bottom: 0;
}

 

 

まとめ

基本的には、CSSにコピペで対処できますので同じ内容でお困りなら、この記事を参考にしてみて下ださい。

それでは、まったです。　(‘◇’)ゞ

 

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。