YouTubeやGoogleマップがスマホからはみ出る場合の対策方法
※当サイトではアフィリエイト広告を利用しています。
これからアフィリエイトを始める方のために、
アフィリエイトを始めるための素材を【再配布権付き】で無料プレゼント中!
![](https://trendaffiliate.com/affiliatesozai.png)
さらに、Amazonで現在も1,250円で販売している電子書籍2冊も
今だけ、無料でプレゼントしていますよ!
![](https://trendaffiliate.com/amazons.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
トレンドアフィリエイトを実践する場合、
記事の中にYouTubeの動画を埋め込む場合もありますよね?
また、イベント系の記事の場合は、
Googleマップを埋め込む場合もあるのではないでしょうか?
YouTubeの動画やGoogleマップを記事の中に埋め込む場合、
気を付けなければいけないことがあります。
それは、スマホからの見え方です。
YouTubeの動画やGoogleマップが埋め込まれた記事を、
スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。
こちらを見てみてください。
![YouTubeがスマホからはみ出る場合の対策方法></center><br />
</p>
<p><center><img decoding=](https://trendaffiliate.com/youtyubehamidasi1.png)
YouTubeの動画が右側にはみ出してしまっているのがわかると思います。
また、こちらを見てみてください。
![Googleマップがスマホからはみ出る場合の対策方法](https://trendaffiliate.com/googlemap1.png)
![Googleマップがスマホからはみ出る場合の対策方法](https://trendaffiliate.com/googlemap2.png)
Googleマップが右側にはみ出してしまっていますよね。
このように、YouTubeの動画やGoogleマップを
記事の中に埋め込むと、スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。
この場合、見た目も悪いですし、
動画の再生ボタンが押せなかったり、画面が左右に動いてしまったりと、
不都合なことも発生してしまいます。
せっかくサイトにアクセスがあっても、こんな風に表示されていたら、
サイトから離脱されてしまうことにもなりかねません。
大きな機会損失になってしまうこともあるんですね。
ですので、スマホから見ても、
YouTubeの動画やGoogleマップがはみ出してしまわないように、
対策をする必要があるんです。
YouTubeやGoogleマップがスマホからはみ出る場合の対策方法
YouTubeやGoogleマップがスマホからはみ出る場合の対策方法としては、
CSSとHTMLタグの2つを設定する必要があります。
まずは、CSSコードからですね。
スタイルシートに下記のコードを記載してください。
ワードプレスの場合、
ダッシュボードメニューの外観→テーマエディタ→スタイルシートの中の
一番下の空いている場所に記載しましょう。
|
これで準備は完了です。
あとは、YouTubeやGoogleマップを埋め込む場合に、
埋め込みタグを<div class="video-container">と<⁄div>で挟むだけです。
|
|
これで、スマホから確認した場合でも、
画面内にYouTubeやGoogleマップがきれいに収まりますよ。
スマホから見た際に、YouTubeやGoogleマップががはみ出していれば、
機会損失になってしまうこともありますので、
今回ご紹介させていただいた方法で、きっちりと対策しておきましょう。
.
ナガーノのトレンドアフィリエイトのアフィリエイトコンサルについて
ナガーノはあなたと1対1のマンツーマンでのアフィリエイトコンサル
【アフィリエイトマンツーマンコンサル】をお受けしています。
![マンツーマンコンサル](https://trendaffiliate.com/consul.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
マンツーマンコンサルの上位コンサルの
【アフィリエイトプレミアムサポート】もお受けしています。
![プレミアムサポート](https://trendaffiliate.com/premium.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
※すでに定員に達してしまっていた場合は、ご了承ください。
こちらのサイトでご案内しています。
トレンドアフィリエイト推薦教材【下克上∞(MUGEN)】
ナガーノは、トレンドアフィリエイトの実践には、
【下克上∞(MUGEN)】のノウハウを実践することをおすすめしています。
![下克上∞(MUGEN)](https://trendaffiliate.com/gekokujo.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
ワードプレス初期設定代行サービスについて
※ワードプレスの設置・初期設定でお困りの方は、
【ワードプレス初期設定代行サービス】で、ナガーノが代行作業させて頂きますね。
ご希望の方は、【ヘッダー画像】の作成代行のみをお申し込み頂く事もできますよ。
![ワードプレス(WordPress)初期設定代行サービス](https://trendaffiliate.com/wpdaikou.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
トレンドアフィリエイトのことだけでなく、 基本的に12時間以内、遅くても24時間以内には必ずご返信させて頂きます。 ![]() |
![]() |
この記事を読まれた方は次にこの記事も読まれています
【期間限定】無料プレゼントのお知らせ
これからアフィリエイトを始める方のために、
アフィリエイトを始めるための素材を【再配布権付き】で無料プレゼント中!
![](https://trendaffiliate.com/affiliatesozai.png)
さらに、Amazonで現在も1,250円で販売している電子書籍2冊も
今だけ、無料でプレゼントしていますよ!
![](https://trendaffiliate.com/amazons.jpg)
![↓ ↓ ↓](https://trendaffiliate.com/yaji.gif)
ナガーノのLINE公式アカウントに登録するだけで【メルマガポイント】プレゼント中
今なら、LINE公式アカウントに友達登録して頂くだけで、
2000円相当のメルマガポイントプレゼント中!
スマートフォンからサイトをご覧になっている場合は、
こちらから友達に追加してくださいね。
![友だち追加](https://scdn.line-apps.com/n/line_add_friends/btn/ja.png)
パソコンからサイトをご覧になっている場合は、
スマートフォンでこちらのQRコードを読み取って、友達に追加してください。
![](https://qr-official.line.me/gs/M_641pjexe_GW.png)
もしくは、@641pjexe(@も含む)で友達検索してください。