ものづくり経営革新等支援機関

Elementorで画像がモバイルブラウザの幅を超えてスクロールバーが表示される場合の対処法

https://imamura-net.com

おはようございます!マネジメントオフィスいまむらの今村敦剛です。

年末年始にElementorを使ってちまちまとWeb制作をしていますが、画像がモバイルブラウザの幅を超えてスクロールバーが表示されるケースがあったので、対処法を記録しておきます(ほぼ個人的備忘録)

画像がモバイルブラウザの幅を超えてスクロールバーが表示される

具体的にいうと、以下のような事象です。

どうしてこうなったかと言うと、このページのhero画像(正確にいうと動画)を、scale関数を使って拡大したのです。(Elementorの操作としては、高度な設定→変換→縮尺変更)

具体的には、画像のサイズをx軸およびy軸方向に1.5倍に拡大したのですが、その画像が元のコンテナやビューポートの幅を超えたようで、これが原因で水平方向のスクロールバーが表示されるようになった可能性が高いです。

この問題の解決方法は3つ

この問題を根本から解決するには、拡大する前に画像の幅を小さくする、または拡大しないようにする方法があります(当たり前ですが)。

もしくは、ビューポートのサイズに応じて画像のサイズが調整されるように、画像の幅を width: 100%; と設定しておくのが一般的なんでしょうけど、今回はElementorを使っている上、しかもこの問題を起こしているのはhero画像ではなく動画なので、単純にwidth: 100%; と設定するカスタムCSSを書いてもうまくいきませんでした。(なにかやりようはあるのでしょうけど)

しかたなく今回とった方法は、overflow-x: hidden; を使用して水平方向のスクロールバーを強制的に非表示にする方法でした。根本解決ではなく、対処療法なんですけど、面倒くさいのでこの方法でやりました。

画像がモバイルブラウザの幅を超えてスクロールバーが表示されるのを強制的に非表示にする

以下のCSSをカスタムCSSにコピペすればOKです。

 css
html,body{
width:100%; overflow-x:hidden;
}

ElementorでこのCSSを適用するには、以下のステップに従ってください。

  1. Elementorエディタで該当するセクションを選択します。
  2. 選択したセクションに対して「高度な設定」タブを開きます。
  3. 「カスタムCSS」のフィールドに上記のCSSをペーストします。(この時点でプレビュー画面ではCSSが反映される)
  4. ページを「更新」して効果を確認します。(「更新」を押さないと、最終的に変更が反映されない)

ちなみにこのCSSを解説しておくと、html, body {:というセレクターは、html要素とbody要素の両方を対象とするという意味です。

そしてwidth: 100%;は、html要素とbody要素の幅をビューポート幅の100%に設定するという意味です。これは、画面またはブラウザウィンドウの全幅を占めることを意味します。

overflow-x: hidden;というプロパティは、水平方向のスクロールバーを隠し、水平方向のスクロールを防ぎます。これでスクロールバーを強制非表示にしたというわけですね。

  • B!

最近の人気記事

1

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 国際標準化機構(ISO)は、現行のISO9001:2015(品質マネジメントシステム規格I)を改訂する準備を進めているようです。現在の ...

2

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 2024年2月、ISO(国際標準化機構)は、マネジメントシステム規格に「気候変動への配慮」を盛り込む形で規格の一部を改定しました。今回 ...

3

おはようございます!マネジメントオフィスいまむらの今村敦剛です。 5Sの考え方がISO9001や14001の運用に役立つことがあります。その逆もあって、ISOの仕組みが5S活動に役立つこともあるんです ...