「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

テーマ共通:スマホ表示時にコンテンツが左側に寄って表示される際の対処方法

Q.スマホで表示すると、コンテンツが画面の左側に寄って表示されてしまいます。

トップページのフリースペース、あるいは記事詳細ページでYouTubeやGoogle Mapの埋め込みタグ等のiframeタグを使用した場合にお問い合わせを頂く事象です。
基本的には、iframeタグはそのままの記述ではレスポンシブ表示になりませんので、クイックタグの「Youtube動画」をご活用頂くことでPC・スマホ共に崩れないよう表示させることが可能かと存じます。
 
▼発生時イメージ  (OOPS!のトップページフリースペースにYouTubeの埋め込みタグを記述しました。)
・コンテンツが画面左側に寄っているように見えます。
発生時イメージ
 
・YouTube埋め込み部分だけ表示幅が広く表示されています。
発生時イメージ

当記事は「テーマ共通」としておりますが、すべてのテーマに当てはまる内容ではなくお使いのテーマによっては異なった調整(記述)が必要となる場合もございます。

A.下記の方法でご対応ください。

クイックタグ「YouTube動画」の機能を流用します。以下のように記述を変更してください。

<iframe…省略…></iframe>

 ↓

<div class="ytube"><iframe…省略…></iframe></div>

※上記適用後、さらなるレイアウト調整をされたい場合は、恐れ入りますが、お客様ご自身にてご対応頂きますようお願い申し上げます。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事