WordPressで人気のTHE THOR(ザ・トール)のテーマを使っている方も多いと思います。
人気なTHE THOR(ザ・トール)ですが、GoogleMapsの地図やYoutubeを入れた際に、スマホの画面で見るとはみ出してしまう問題が発生することを確認しています。
※このブログは、別のテーマを使っています!
今回は、この問題を簡単に解決する方法をお伝えしていきます!
目次
WordPressのテーマTHE THORで地図やYoutubeがはみ出てしまう問題
THE THOR(ザ・トール)のテーマは、見た目がすごくオシャレでカッコイイので使用している方も多いと思います。
通常に画像や文章を入れる分には、問題なく利用ができていると思いますが、GoogleMapsの地図やYoutubeを入れた際にスマホの画面で見ると謎の問題が発生します。
以下のようにスマホで見ると地図の部分だけがはみ出て、また謎の余白が出てしまってグラグラしてしまうんですよね、、、、
(Youtubeも同様の状態となるかと思います。)

【解決】THE THORで地図やYoutubeがはみ出てしまう問題
GoogleMapsの地図やYoutubeは<iframe>というインラインフレーム要素を使用しているのですが、そこに対しておそらくレスポンシブ対応がされていないみたいなんですよね。
レスポンシブ対応とは、簡単にいうとスマホやタブレットなどPCとは違う端末で見た際に表示に合わせることを言います!
以下、手順でCSSを追加して、GoogleMapsの地図やYoutubeがスマホで問題なく表示されるか試してみましょう!
THE THORで地図やYoutubeがはみ出てしまう問題の解決手順
①Word Pressのメニューにある 外観 > カスタマイズ > 追加CSSを選択してください。
②以下CSSを追加

iframe {
max-width:100%;
}
「max-width」を指定することで、「要素幅をこれ以上大きくしない」という制限を付けることができるので、これで簡単に解決ができると思います。
実際に以下のように修正をすることができました。

THE THORで地図やYoutubeがはみ出てしまう問題を簡単に解決まとめ
THE THORでGoogleMapsの地図やYoutubeがはみ出てしまう問題を簡単に解決する方法をお伝えしていきました。
テーマを入れれば基本的に修正をせずに済むテーマが多いのですが、THE THORはちょっと調整が必要そうなテーマのようです。。。
地図やYoutubeを入れる方は多いと思うので、困っている人が多いのではないかと思い、この記事を作成してみました。
HTMLやCSSを利用したことない方には、めちゃめちゃ難題ですよね、、、、くぬぬ。
もし解決しない等あれば、やり方や別の方法も検討してみるので、コメントいただければ幸いです。