WordPressテーマとして人気のある「SANGO」
用意されているショートコードを使えばYouTube動画をレスポンシブ対応にはできます。
ただ、記事を書くたびにいちいちショートコードを追記するのは面倒なんですよね・・・。
また、過去記事にショートコードを追加していく作業も大変です。
ということで、わずか数行のコードを追加するだけでYouTube動画をレスポンシブにする方法を紹介します。
Coco
目次
することはたった3つだけ
YouTube動画をレスポンシブにする手順は以下の3つだけ。
- プラグイン「コードスニペット」を使う
- コードをコピペする
- CSSをコピペする
何にも難しく考える必要はありません。順番に解説しますね。
1:まずは「コードスニペット(Code Snippets)」をインストール
厳密には「function.php」にコード(後述)を書き込めばいいのですが、PHPに詳しくない限り、もともと用意されているファイルをいじるのはあまりオススメしません。
少しでもミスったら画面が真っ白になってしまい、ユーザーはもちろん自分ですらFTPソフトを使用しないとアクセスできなくなります…。
WordPressのプラグイン「コードスニペット(Code Snippets)」なら、プラグイン上で「function.php」に書き込むコードを管理できるので便利です。
それでは、さっそくインストールしていきましょう!
WordPressのダッシュボードを開き、【プラグイン】→【新規追加】→【プラグインの検索】と移動しましょう。
(私の画面にはすでにSnippetsがありますが気にせず)
次の画面で「Code Snippets」と入力しましょう。
「Code Snippets」が表示されるので、【有効化】→【インストール】
(画面ではすでに有効になっていますが気にせず)
インストールが完了したら、あとはYouTube動画をレスポンシブにするコードを入れるだけです。
2:コードを追加しよう
では、コードスニペットに実際にコードを追加します。
ダッシュボードの「Snippets」を選択しましょう。
【Add New】をクリック
タイトルは何でもいいのですが、後で見てわかりやすく「YouTube動画をレスポンシブにする」としておきましょう。
そして、「Code」の部分に以下のコードをコピペしてください。
function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
他には何も入力しなくてOKです。
コードをコピペしたら、「Save Changes and Activate」をクリックします。
プログラミングがわからない場合は理解が大変かもしれませんが、これは「サイト内のすべてのYouTube動画をdivというタグで囲む」という作業をしています。
さて、お次は動画をレスポンシブにするCSSコードを追記していきましょう。これで最後なので、もうちょっとだけ頑張りましょう!
3:YouTube動画をレスポンシブにするCSSを追記
「divタグで囲んだYouTube動画をレスポンシブデザインにする」という作業をおこないます。
レスポンシブデザインにするには、CSSというウェブ上の見た目を変更する機能を使います。
WordPressの【外観】→【テーマ編集】へ行きましょう。そして、「style.css」に以下のコードを追記します。
.youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }
レスポンシブになっているか確認しよう
実際に確認しましょう。以下は、レスポンシブにする前の画面です。動画が縦に大きく、横にはみ出てちゃってますね。
そして、上記のコードを設定すると・・・
はい、レスポンシブになりました!これでスマホから見てもデザインが崩れていないはずです。
おわりに
以上、『WordPressテーマ「SANGO」でYouTube動画を自動でレスポンシブにするカスタマイズ方法』でした!
今の時代、サイトへのアクセスの、7〜8割はスマホ経由です。
しっかりレスポンシブ対応にしておきたいところですね。
Coco