トレンドアフィリエイトの基礎知識と、トレンドアフィリエイトの始め方、リアルタイムな情報発信や、マル秘テクニックも紹介!

YouTubeやGoogleマップがスマホからはみ出る場合の対策方法

※当サイトではアフィリエイト広告を利用しています。

 

【期間限定】無料プレゼントのお知らせ

これからアフィリエイトを始める方のために、
アフィリエイトを始めるための素材【再配布権付き】で無料プレゼント中!

 

 

さらに、Amazonで現在も1,250円で販売している電子書籍2冊
今だけ、無料でプレゼントしていますよ!

 

 ↓ ↓ ↓

\今だけ無料プレゼント/

無料プレゼントの受け取りはこちら

 

 

トレンドアフィリエイトを実践する場合、
記事の中にYouTubeの動画を埋め込む場合もありますよね?

また、イベント系の記事の場合は、
Googleマップを埋め込む場合もあるのではないでしょうか?

 

 

YouTubeの動画やGoogleマップを記事の中に埋め込む場合、
気を付けなければいけないことがあります。

 

 

それは、スマホからの見え方です。

YouTubeの動画やGoogleマップが埋め込まれた記事を、
スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。

 

 

こちらを見てみてください。
 

YouTubeがスマホからはみ出る場合の対策方法></center><br />
 </p>
<p><center><img decoding=

 

 

YouTubeの動画が右側にはみ出してしまっているのがわかると思います。

 

 

また、こちらを見てみてください。
 

Googleマップがスマホからはみ出る場合の対策方法

 

Googleマップがスマホからはみ出る場合の対策方法

 

 

Googleマップが右側にはみ出してしまっていますよね。

 

 

このように、YouTubeの動画やGoogleマップを
記事の中に埋め込むと、スマホから見た場合、
スマホの画面からはみ出してしまう場合があるんです。

 

 

この場合、見た目も悪いですし、
動画の再生ボタンが押せなかったり、画面が左右に動いてしまったりと、
不都合なことも発生してしまいます。

せっかくサイトにアクセスがあっても、こんな風に表示されていたら、
サイトから離脱されてしまうことにもなりかねません。

大きな機会損失になってしまうこともあるんですね。

 

 

ですので、スマホから見ても、
YouTubeの動画やGoogleマップがはみ出してしまわないように、
対策をする必要があるんです。

 

 

YouTubeやGoogleマップがスマホからはみ出る場合の対策方法

YouTubeやGoogleマップがスマホからはみ出る場合の対策方法としては、
CSSHTMLタグの2つを設定する必要があります。

 

 

まずは、CSSコードからですね。

スタイルシートに下記のコードを記載してください。

ワードプレスの場合、
ダッシュボードメニューの外観→テーマエディタ→スタイルシートの中の
一番下の空いている場所に記載しましょう。

 

 

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

 

これで準備は完了です。

あとは、YouTubeやGoogleマップを埋め込む場合に、
埋め込みタグを<div class="video-container">と<⁄div>で挟むだけです。

 

 

<div class="video-container"><YouTube動画の埋め込みタグ><⁄div>

 

<div class="video-container"><Googleマップの埋め込みタグ><⁄div>

 

 

これで、スマホから確認した場合でも、
画面内にYouTubeやGoogleマップがきれいに収まりますよ。

 

 

スマホから見た際に、YouTubeやGoogleマップががはみ出していれば、
機会損失になってしまうこともありますので、
今回ご紹介させていただいた方法で、きっちりと対策しておきましょう。

.

 

ナガーノのトレンドアフィリエイトのアフィリエイトコンサルについて

ナガーノはあなたと1対1のマンツーマンでのアフィリエイトコンサル
【アフィリエイトマンツーマンコンサル】をお受けしています。

マンツーマンコンサル

 ↓ ↓ ↓

\0→1を徹底的にサポート/

ナガーノのマンツーマン・コンサルの詳細はこちら

 

 

マンツーマンコンサルの上位コンサルの
【アフィリエイトプレミアムサポート】もお受けしています。

プレミアムサポート

 ↓ ↓ ↓

\ナガーノのサイトをお手本にできる/

ナガーノのプレミアムサポートの詳細はこちら

※すでに定員に達してしまっていた場合は、ご了承ください。

2種類のアフィリエイトコンサルのより詳しい内容は
こちらのサイトでご案内しています。

⇒アフィリエイトコンサルの詳しいご案内サイトはこちら

 

 

トレンドアフィリエイト推薦教材【下克上∞(MUGEN)】

ナガーノは、トレンドアフィリエイトの実践には、
【下克上∞(MUGEN)】のノウハウを実践することをおすすめしています。

下克上∞(MUGEN)

 ↓ ↓ ↓

\豪華特典付きレビュー/

下克上∞(MUGEN)のレビューはこちら

 

 

ワードプレス初期設定代行サービスについて

※ワードプレスの設置・初期設定でお困りの方は、
【ワードプレス初期設定代行サービス】で、ナガーノが代行作業させて頂きますね。

ご希望の方は、【ヘッダー画像】の作成代行のみをお申し込み頂く事もできますよ。

ワードプレス(WordPress)初期設定代行サービス

 ↓ ↓ ↓

\コンサル生は無料/

ワードプレス初期設定代行サービスのご案内はこちら

 

 

トレンドアフィリエイトのことだけでなく、
アフィリエイト全般のご質問もお気軽にお問い合わせください。

基本的に12時間以内、遅くても24時間以内には必ずご返信させて頂きます。

お問い合わせはこちらから

ナガーノ

 

 

 

 

トップページへ戻る

 

 

この記事を読まれた方は次にこの記事も読まれています

 

 

【期間限定】無料プレゼントのお知らせ

これからアフィリエイトを始める方のために、
アフィリエイトを始めるための素材【再配布権付き】で無料プレゼント中!

 

 

さらに、Amazonで現在も1,250円で販売している電子書籍2冊
今だけ、無料でプレゼントしていますよ!

 

 ↓ ↓ ↓

\今だけ無料プレゼント/

無料プレゼントの受け取りはこちら

 

 

ナガーノのLINE公式アカウントに登録するだけで【メルマガポイント】プレゼント中

今なら、LINE公式アカウントに友達登録して頂くだけで、
2000円相当のメルマガポイントプレゼント中!

スマートフォンからサイトをご覧になっている場合は、
こちらから友達に追加してくださいね。

 

友だち追加

 

パソコンからサイトをご覧になっている場合は、
スマートフォンでこちらのQRコードを読み取って、友達に追加してください。

 

 

もしくは、@641pjexe(@も含む)で友達検索してください。

 

 

トップページへ戻る

 

 

ビジネス雑誌や新聞で紹介されました

月刊BIGtomorrow(ビッグトゥモロウ)2017年3月号

月刊BIGtomorrow2017年3月号(1月25日発売)でナガーノが紹介されました。

詳しくはこちらをご覧ください。

 

スポーツニッポン新聞(スポニチ)西部版2018年6月20日発売

2018年6月20日発売のスポーツニッポン新聞(スポニチ)西部版でナガーノが紹介されました。

詳しくはこちらをご覧ください。

 

デイリースポーツ 大阪本社版2018年7月1日発売

2018年7月1日発売のデイリースポーツ 大阪本社版で、ナガーノが紹介されました。

詳しくはこちらをご覧ください。

エッジプラス1

エッジプラス1

エッジプラス1

下克上∞(MUGEN)の実践と相性の良いワードプレスのテンプレートです。

レスポンシブ対応なので、スマホからのアクセスも逃しません。

当サイトもエッジプラス1のテンプレートを利用しています。

エッジプラス1の詳細はこちらをご覧ください。

「ワードプレス(WordPress)の基礎知識・使い方初心者講座」のサイトはこちらをご覧ください。

サイト運営者について

一般社団法人
日本情報販売論理機構(JIBEO)
第3期認定レビュアー

ナガーノ

こんにちは、ナガーノです。

当サイトにお越し頂きありがとうございます。

ナガーノは2008年後半よりアフィリエイトをはじめ、2012年12月31日、14年間勤めてきた会社を退職し、現在は専業アフィリエイターとして活動しています。

ナガーノの詳しいプロフィールはこちらをご覧ください。

当サイトではトレンドアフィリエイトの基礎知識と、トレンドアフィリエイトの始め方、リアルタイムな情報発信や、マル秘テクニックなどを紹介しています。

また、ナガーノは、メインサイトで、アフィリエイトで月収10万円稼ぐための情報配信も行っています。

ナガーノのメインサイトはこちらからご覧ください。

また、ナガーノは1対1のマンツーマンでアフィリエイトコンサルもさせて頂いています。

ナガーノのアフィリエイトコンサルの詳細はこちらをご覧ください。


ナガーノは2011年11月に一般社団法人 日本情報販売論理機構(JIBEO)の第3期認定レビュアーに就任。

2012年12月までの在任期間中、詐欺商材を排除するために活動していました。

在任期間終了後も、ナガーノは中身も確認せずに、サイト等で紹介するという行為は、読者さまを裏切る行為になるので絶対に行っていません。

詐欺商材などでお悩みの方は、一度、ナガーノにご相談くださいね。

LINE公式アカウント

Line公式アカウントに友達登録して頂くだけで、今なら、2000円相当のメルマガポイントプレゼント中!

スマートフォンからサイトをご覧になっている場合は、こちらから友達に追加してください。

友だち追加

パソコンからサイトをご覧になっている場合は、スマートフォンでこちらのQRコードを読み取って、友達に追加してください。

もしくは、@641pjexe(@も含む)で友達検索してください。

サイト内検索
ブログランキング

今日も応援クリックありがとうございます。

あなたの応援が励みになります♪

人気ブログランキングへ

お問い合わせ

トレンドアフィリエイトのことだけでなく、アフィリエイト全般のご質問もお気軽にお問い合わせください。

基本的に12時間以内、遅くても24時間以内には必ずご返信させて頂きます。

お問い合わせはこちらから

お気に入り登録

お気に入り登録しておくと次回からのアクセスが便利です♪

お気に入りに登録するには、【CTRL + D ボタン】で登録できます。