@shinjiukaiposted at 2024-04-06

スマホで見たときにトップ画像を画面いっぱいに表示したいです。

Q&A

WordPress 画像 img

解決したいこと

スマホで表示したときにトップ画が小さいので、縦横比を変えずに画像を画面いっぱいに表示したいです。
具体的にはこちらの3か所の赤丸の部分を消したいです。

wordpressのaffinger5で以下のサイトを作りました。
https://kameyama-sauna.com/

解決方法を教えて下さい。

発生している問題・エラー

エラーは起きておりません。

自分で試したこと

①htmlの画面で

<img class="aligncenter wp-image-983 top-img" src="https://kameyama-sauna.com/wp-content/uploads/2023/10/dbc4aa4acbffa249faefa83e88c132bd-1-jpg.webp" alt="" width="1273" height="954"/>

を

<img class="aligncenter wp-image-983" src="https://kameyama-sauna.com/wp-content/uploads/2023/10/dbc4aa4acbffa249faefa83e88c132bd-1-jpg.webp" alt="" width="2000" height="954"/>

widthを1273から2000に変更しても、効果はなかったです。

②cssで

.top-img {
    margin-left: -2.5px;
    width: calc(100% + 100px);
    width: -webkit-calc(100% +100px);
}

と記載しても効果がなかったです。

③CSSで

.element {
    width: 120%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
}

としてもオーバーフローで画像が表示されなくなりました。

④cssで

body, html {
    margin: 0;
    padding: 0;
}

img.aligncenter.wp-image-983 {
    width: 100%;
    height: auto;
}

これも効果なかったです。

どの部分を変更すれば画面いっぱいに表示されるか、わかる方いらっしゃいますでしょうか。

0 likes

1Answer

@shigeokamoto posted at 2024-04-06

edgeやchromeのデベロッパーツールで見れば何の要素(あるいはマージン)が場所を占拠しているのか確認できるのでそれを見ながら調整すれば良いと思います。

2Like

Comments

@tokotoko33ok

【横幅の対応】
スマホ画面の時には、margin: 0 auto;と記述されている箇所で、必要のない箇所は、marign:0, padding:0に変えて上げると良いと思います。
上記の対応で、横幅の全画面はできると思います。

【縦幅の対応】
縦の余白は、
こちらの要素を、id="headbox"、スマホの場合のpxに、display:none などで消してあげると良いと思います。（要素を使わない場合）

【別の対応】
上記以外の対応ですと、デベロッパーツールの矢印で全画面なっている箇所を探して、その要素のbackground-imageで画像を付けてあげるてもいいかもしれません。
@shinjiukai
Questioner
wordpressを使ってHPを作成しているのですが、ディベロッパーツールと編集画面の関連性がわからず、どこを修正すればいいかわからず困っております。

外観->追加CSSの箇所に
@media only screen and (max-width: 767px) { #contentInner main { max-width:100%; margin: auto; }
padding:0
を追加したところ
変化はなく、
display:none
を追加したところ
HPの内容が全て消えてしまいました。
wordpressでどの部分を修正するとよいのでしょうか？
@tokotoko33ok
外観->追加CSSの箇所で良いと思いますよ。display:none で非表示になるということは、cssが効いているということですので、
padding:0などを記述するセレクターなどが違っているのかもしれません。

Are you sure you want to delete the question?