スマホでyoutubeやGoogleMapがはみ出る現象を解消/WordPress

こんにちはnino(@kurashilog)です!

ぼくはワードプレスでブログを書いてます。
で、ブログにyoutubeやGoogleマップを貼り付けることがあります。

PCでは問題なく表示されてても、スマホで見るとはみ出ちゃう事に気付きました。

アレコレと調べていたら解消方法を見つけましたので書き残しておきます。

スポンサーリンク

これがおハミ現象だ

盛大にハミ出している

この世にはハミ出ていいものとそうでないものと2種類ありますが、これは圧倒的に後者。
というわけで早速解消しましょう。

おハミ現象を解消しよう

CSSにコードを追記する

スタイルシート(style.css)の最後に以下を追記します。

スタイルシートは、ダッシュボードの「外観」→「テーマの編集」にあります。

作業前にバックアップを取っておきましょう。

埋め込みコードを挟みこむ

あとは記事を書くときに、埋め込みコードを<div class=”video-container”>と</div>で挟みます。

つまり

<div class=”video-container”>埋め込みコード</div>

と書けばOKです。

ビジュアルエディタではなく、テキストエディタで書いてくださいね。
また、「”」が全角になっていると反映されませんので、きちんと半角になっているか確認してください。

ブラウザのキャッシュをクリアしてないと変更したCSSが反映されないことがあるので、キャッシュクリアも試してみましょう。

ちなみに、Googleマップも同様に埋め込みコードを挟めばOKですよ。

これでもうはみ出ません

すっきり!

プラグインでも対応できるけど…

プラグインで幅を最適化する方法もあるようです。
(たとえば「Advanced Responsive Video Embedder」など)

でも、プラグインを入れると重くなったり、他のプラグインとの相性もあるので、なるべくプラグインは入れずにカスタマイズしたいと思ってます。

以上、スマホでyoutubeやGoogleMapがはみ出る現象を解決する方法でした。

【参考記事】

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です