WordPressテーマTCDのカスタマイズを研究するサイト

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

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

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

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

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

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

<iframe…省略…></iframe>

 ↓

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

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

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

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。