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

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

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

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

 

おすすめASP

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

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

画像下に謎のスペース?
左図:画像下に謎のスペース??  右図:ボックス内に画像を配置

このブログは、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の後ろに値が4つある場合は、「上、右、下、左」が適用されます。

margin説明

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

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

カスタマイズ前後

 

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

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

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

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

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

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

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

CSS
img.sita {
  margin-bottom: 0;
}

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

 

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

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

ビジュアルエディタ説明

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

ビジュアルエディタ説明

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

 

テキストエディタの場合

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

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

 

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

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

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

MEMO

下記の画像は、画像下のスペースを消した時のものですが、画像下にテキスト文字がある場合、スペースをなすと画像との距離がなくなるので見栄えが悪いと感じるかもしれません。

このへんは好みの問題なので「投稿画像すべてに適用する」か「1つ1つ個別に適用する」かは、個々に判断お願いします。

 

まとめ

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

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

 

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

関連記事

こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /