こんにちは。ジロウです。
TCDテーマ「MAG」を使っている自分のブログをスマホで見てみたら、特定の記事ページだけが縦に細長く表示されていてました。
記事全体が画面の左に寄っていて、文字も画像も小さくて読みづらい状態です。
「どうしてかなぁ～・・・？」
ってことで調べてみると、その記事に貼り付けたYouTube動画がレスポンシブ対応に反映されていないみたいなんです。
記事自体は指でドラッグして拡大すれば読めるんですが、YouTube動画は画面からはみ出してしまいます。
というわけで、同じような状況にある方がどれくらい存在するか分かりませんが、その解決方法についてお話しします。
意外に簡単なことだったんですけど・・・ね。
ある日気づいたこんな状態・・・
文章でお話しすると伝わりにくいと思いますので、僕が出くわした状況を画像で説明したいと思います。
早い話がこんな感じです。
同じブログ内の別の記事は、スマホ画面いっぱいにキレイに表示されているんです。
でも、特定の記事だけが、上図のように左に片寄っています。
で、いくつかの記事をチェックしてみたところ、同じ状態で表示される記事に共通していたのが「YouTube動画を貼り付けていた」・・・ということだったんです。
実際に問題の記事を表示して、下にスクロールしてみると、YouTube動画の枠だけが画面いっぱいになっています。
いや、以前はこんな現象は見られなかったんですよ。
もしかしたら、更新したWordPressのヴァージョンとYouTubeの仕様が噛み合っていないのかもしれません。
よく「WordPressの更新はしないほうが良いよ」なんて言われますが、プラグインとの兼ね合いなんかで、最新版にした方が良いような気がしちゃって・・・。
でも何がベターなのか、僕には分かりません。
この点についてご指摘、ご教示などいただけると嬉しいです♪
今や、ブログを閲覧してくださる方の70％以上はスマホユーザーです。
これは捨て置けない！ ってんで、ちょっと泡を食ったんですが、意外に簡単に解決しました。
WordPressブログへのYouTube動画の貼り付け方はコレ！
じつは以前、似たような現象に悩まされた経験がありました。
それは、記事内にテーブルタグを使って表作成をしたときのこと。
テーブルの表示幅（フレーム全体、セル単体のどちらも）を指定した場合に限って、今回と同じ状態で表示されたんです。
このときはレスポンシブのテーブルタグに入れ替えることで解決できました。
では、今回のYouTube動画についても、表示幅を指定していることが問題なのか・・・？
とも思ったんですが、埋め込みコードをイジるのも面倒くさい・・・。
というわけで、ある方法を試してみたら、いとも簡単に解決できたんです♪
もしかしたら、これまで僕のやっていた方法がおかしかっただけで、大多数の人から
「何を今さら・・・」
「はぁ～？ 当然っしょ！？」
なんて言われちゃうのかもしれませんが、恥かきついでに解決方法を記しておきますよ♪
YouTube動画を記事内に埋め込むとき、従来は、下記のような手順を踏んでいました。
① 共有ボタンをクリック
② 埋め込みボタンをクリック
③ コードをコピー
このコードを「中央揃え」のタグで囲み、WordPressエディター画面を「テキスト」モードにして貼り付ける。
で、これだと先述のように記事全体が細長く、埋め込み動画だけが画面の左右いっぱいにはみ出すように表示されてしまいます。
そこで、WordPressの投稿画面にある、［YouTube動画］のクイックタグを使ってみることにしたんです。
※ 「テキスト」モードで行います。
エディターの入力画面の任意の場所を指定してクイックタグボタンをクリックすると、
「ここにYoutubeのコードを入力してください」
と表示されます。
この部分に、YouTube動画の埋め込みコードをコピペするだけなんです。
すると、ただ埋め込みコードを貼り付けただけの場合と違って、スマホ表示でもしっかり画面均一に記事が表示されるようになりました。
「そんなのとっくに知ってるよ！」
って場合にはスルーしていただいて結構な話なんですが、万が一、僕と同じような状況に陥っていたら、参考にしていただければ幸いです。
今回は、たまたまスマホ表示をチェックしていたら気づいたわけですが、今後はちょくちょく確認するようにしようと思います。
コメントを残す