初心者 ワードプレス 余白を消したい 投稿詳細ページ アイキャッチ画像下の余白

Question

よろしくお願い致します。

###実現したい事

このようにアイキャッチ画像の上下に不要な余白がなく正常に表示させたいです。

###できない事

例えばワードプレス管理画面で投稿ページ作成をしてアイキャッチや文字を入力します。
表示を押すと、ほぼアイキャッチ写真を同じ余白が以下図のように生まれてレイアウトが下にずれてしまいます。

###ためした事

chrome検証で余白部分をチェックしました。またレイアウトの色が余白部分と写真部分で色が異なっていました。

さらにchrome検証で調べた所、padding-top: 60%;　で余白の幅が狭まる事がわかりました。
しかしpadding-top: 60%を削除してしまうと写真そのものが見えなくなってしまいます。
また写真縮尺はレスポンシブも考えて60%でベストな為変更したくありません。

html側のソースは以下です。

<a href="https://xxx.com" title="https://xxx.com">
			<span itemprop="image">
				<img width="2000" height="1200" src="https://xxx.com.jpg" class="img-responsive max-width wp-post-image" alt="" itemprop="image" srcset="https://xxx.comjpg 2000w, https://https://xxx.com-300x180.jpg 300w, https://https://xxx.com-768x461.jpg 768w, https://https://xxx.com-1024x614.jpg 1024w" sizes="(max-width: 2000px) 100vw, 2000px">				</span>
</a>

上記に対応したCSS部分は以下になります。

main .wrap .thumbnail a {
    width: 100%;
    padding-top: 60%;
    /* height: 420px; */
}

.thumbnail a {
    position: relative;
    display: table;
    width: 100%;
    /* height: 180px; */
    padding-top: 60%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

重複しているのかと思い padding-top: 60%;　の全箇所をCSS上で探すと以下がありました。上記４つのファイルのwidthとpadding-topをそれぞれ非表示にしながらひとつひとつ調べCSSを修正しサーバーにアップしましたが余白はなくなりませんでした。

.thumbnail a {
  position: relative;
  display: table;
  width: 100%;
  /*height: 180px;*/
  padding-top: 60%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

main .wrap .thumbnail a {
   width: 100%;
   padding-top: 60%;
/* height: 420px  */
}

@media only screen and (max-width: 479px) {
main .wrap .thumbnail a {

  width: 100%;
   padding-top: 60%;
/* height: 250px  */
  }
}

@media only screen and (max-width: 479px) {
  .relatedposts .inner .thumbnail a {
    width: 100%;
    /* height: 180px */
    padding-top: 60%;
  }
}

宜しくお願い致します。

Answer 1

さらにchrome検証で調べた所、padding-top: 60%;　で余白の幅が狭まる事がわかりました。
しかしpadding-top: 60%を削除してしまうと写真そのものが見えなくなってしまいます。

CSS の padding-top: 60%; が何を指定しているかを理解されていますか？

この指定は、簡単に説明すると「コンテンツエリアの上に 60% の余白を設定する」という指定になります。

また写真縮尺はレスポンシブも考えて60%でベストな為変更したくありません。

？

padding で、コンテンツのサイズを指定することはできません。
おそらく、余白が指定されたことで、表示エリアの比率に合わせて　たまたまコンテンツが縮小されているだけと思われます。

マージンやパディングについては、CSSのmarginとは？paddingとは？余白の指定方法まとめ の「CSSの余白の考え方」等の図がわかりやすいと思いますので、一度読んでみてください。

---

どうすればよいかですが...　記載されている内容だけでは回答は難しいと思います。

一般的な方法では、コンテンツのサイズを指定するのであれば、コンテンツの部分に width や height や max-width や max-height を使って、サイズ指定をすることが多いと思います。

Comments

[退会済みユーザー]

ご連絡頂きましてありがとうございます。

＞＞一般的な方法では、コンテンツのサイズを指定するのであれば、コンテンツの部分に width や height や max-width や max-height を使って、サイズ指定をすることが多いと思います。

御提案頂いたwidth や height や max-width や max-heightですとレスポンシブに対応できず画像縮尺ができないと思います。例えばメディアクエリでそれぞれの画像の大きさを指定するイメージでしょうか？レスポンシブにした際に％で表記すれば常に横幅が一定になると思います。
60%は縦1200/横2000pxから設定いたしました。

丁寧に回答頂きありがとうございます。引き続き宜しくお願い致します。

[退会済みユーザー]

https://y-com.info/contents/?p=4309

を参考に調べてpaddingを計算しました。