サイトアイコン 歴史トラベル

YouTubeの埋め込みサイズを自動でスマホ対応(レスポンシブ)に TCDテーマ「GENSEN」

YouTubeをwordpressで紹介したいときには、

Youtubeを開いて、見たい番組を見て、矢印マークの「共有」を押して、

「youtu.be」なんちゃらというアドレスをコピーして

ワードプレスのダッシュボードを開いて、新規投稿で、「テキスト」タブの状態で、
ぺたっと、貼り付け(ペースト、Ctrl+V)をするだけで、自動的に動画を流してくれるので、らくちんです。

簡単すぎるほど簡単なのですが、実はこれ、スマホの画面を見ると、画面におさまらずに、右の3分の1くらいが見えくなってしまいます。

そこで、自動的にスマホの画面に合わせて左右の大きさが調整されるレスポンシブデザインの設定をしました。

参考にしたのは、このブログです。ありがとうございます。

サイト内に埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介します。スマホでサイトを観覧した時でも、もうYOUTUBE動画が画面からはみ出すことはありません。このカスタマイズは3分間でマスターできます!
WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法 - 岡山のWordPressを使ったホームページ制作ならOffise Kondo

基本的に、ブログのやり方をそのまんまやればOKなのですが、例によってTCDテーマを使っている人は、若干、複雑なので、私がTCDのGensenをカスタマイズした方法を補足しておきます。

2種類のコードを、あるところに貼り付ければいいだけですが、TCDテーマの場合は、どこに張ればいいのかが、ちょっと悩みどころでしたが、いろいろ試して、以下のようにやれば、gensenの場合は大丈夫でした。

1段階

一つ目が下のコードをコピーして、

ダッシュボード→外観→テーマの編集
右の上から2番目の「テーマのための関数(function.php)」をクリックして、
<?php
の次の行に、上のコードをペーストして、「ファイル更新」を押します。(間違えちゃうと大変なことになるので、事前のバックアップをおすすめします)

2段階

次に、ダッシュボード→外観→カスタマイズで、一番下の「追加CSS」を選びます。(追加CSSは間違っても致命的にならないので、CSSを増やすときは原則的にこちらでやるのが安全です。上のfunction.phpへの記述は仕方ありませんが、要注意です)

その一番上に以下のコードを貼り付けます。

貼り付けたら、「公開」を押せば、設定の完了です。

古い記事のYoutube貼り付けについても、ぜんぶレスポンシブになりますので、楽ちんです。

一度設定してしまえば、あとはなんの作業もなく、ただ、URLを張るだけなので、おすすめの方法です。

やりかたを教えていただいたtakaya kondoさん、ありがとうございました!

モバイルバージョンを終了