今日なかもび！にyoutubeにアップしてある動画を埋め込んだときのこと。なかもび！はレスポンシブル・デザインに対応したテーマを使っているが、埋め込んだ動画部分がブラウザに合わせてサイズが変動しないことに気付いた。

ということで調べてみると、CSSを使えば対応できることが分かったのでそのメモ。

①埋め込んだiframeタグをdivで囲む。
例：
<div class=”aaa（適当なクラス名）”><iframe ________></iframe></div>

②CSSにクラスを設定する。
例：
.aaa（適当なクラス名） {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
      height: 0;
      overflow: hidden;
}

.aaa（適当なクラス名） iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

とこれで対応できた。ただひとつ問題が。今使っているテーマがバージョンアップされたらCSSも上書きされるため、バージョンアップの都度CSSを変更しなくてはならない。とそこで活躍するのが、Wordpressの子テーマの機能ということも分かった。子テーマとはテーマ（親テーマ）の内容を定義しなおし上書きすることができるテーマであり、これを利用すれば親テーマがバージョンアップされても定義しなおした内容は子テーマとして保持されるというわけである。

今回はCSSだけ変更してみたのでそのメモ。

①子テーマ用のディレクトリを作成

テーマディレクトリ（wordpress/wp-content/themes）以下に子テーマ用のディレクトリ（子テーマ名で）を作成する。

②style.cssの作成

親テーマを上書きするためのstyle.cssを作成する。下記例にあるTheme NameとTemplateが必須項目で、これを記述すればWorkdressが子テーマとして認識する。@import urlは親テーマをインポートするための文言。そのあとに上書きしたい部分を記述する。作成したcssを①で作成したディレクトリにアップロードする。
例：
@charset “utf-8”;
/*
Theme Name: 子テーマの名前
Template: 親テーマの名前
Description: 親テーマの子テーマです
Author: 自分の名前など
Version: 0.1.0
*/

@import url(“../親テーマの名前/style.css”);

.aaa（適当なクラス名） {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
}

.aaa（適当なクラス名） iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

③子テーマの有効化

WordPressで子テーマを有効化する。

これでうまくできた。