【WordPress】Emanonテーマのファーストビューで動画が切れる？CSSで簡単解決✨

WordPressのEmanonテーマを使ってファーストビューにヘッダー動画を設定したとき、PCでは問題なく表示されるのに、タブレットやスマホでは横が切れてしまう…そんな経験はありませんか？💦

この問題、追加CSSをほんの少し加えるだけで簡単に解決できます！今回は、実際に私が試してうまくいった方法をご紹介します。

ヘッダー動画が切れる原因

Emanonテーマでは、動画の高さを設定できますが、デフォルトのレスポンシブ設定が影響して期待通りに表示されないことがあります。特に、スマホやタブレットでは横が見切れてしまうことがあるんです。

この問題を解決するには、高さを自動に設定することがポイントになります。

追加CSSで解決する方法

まずは、以下のCSSを追加しましょう。

div#js-header-video {
    height: auto;
}

このコードを適用すると、高さが自動調整され、スマホやタブレットでも動画の横が切れなくなります🎵

※　#で設定されているタグのIDは環境に合わせて変更してください。

さらに調整して完璧な仕上がりに！

この設定だけでもかなり改善されますが、PCの大きな画面で見ると動画がどこまでも広がってしまうという新たな問題が発生することも💡

そこで、最大幅を1500pxに設定し、中央配置にするCSSを追加します。

div#js-header-video {
    max-width: 1500px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

さらに、タブレット、スマホサイズ（900px以下）の場合は高さを自動にするように調整すると、どんな画面サイズでもバランスよく表示できます。※タブレットサイズを768pxにしていることも多いようですが、今回は初期のスタイルシートで900pxで分けられていたので合わせています。

@media screen and (max-width: 900px) {
    div#js-header-video {
        height: auto;
    }
}

まとめ🌿

Emanonテーマのヘッダー動画がスマホやタブレットで切れてしまう問題は、追加CSSを少し調整するだけで解決できたりします。

1. height: auto; を設定して、スマホやタブレットでの切れを防ぐ
2. max-width: 1500px; でPC画面の際限ない拡大を防ぐ
3. メディアクエリでモバイル向けの高さ調整をする

この3ステップで、どのデバイスでもバランスの取れた美しいヘッダー動画を表示できます✨

ぜひ試してみてくださいね😊

KISEKIのサービスでは、こんなかゆい所に手が届く！そんなWebに関するいろいろなサービスを提供しております。興味のある方は是非お問い合わせください。