どうも。
ビジネスアーティストの永田武です。
今回は、
WordPress（ワードプレス）テンプレート『TCD』で動画をスマホレスポンシブにする方法
についての記事です。
つい先日に現在ご覧のサイトにリニューアルをしたのですが、
WordPress（ワードプレス）のテンプレートも変更しました。
『賢威』というテンプレートから、『TCD』というテンプレートに！
賢威はすごく使いやすくて色々と便利だったんですが、
そのせいか利用されている方も非常に多く、
差別化を狙って、新しいテンプレートに挑戦してみました。
WordPress（ワードプレス）はワンタッチで見た目変更できるのがいいですね♪
ワンタッチでポンとテーマを変更して、その他のデザインを調整したのですが、
スマホで色々とサイトをチェックしていると……
動画がスマホの画面からはみ出ている！
いつも動画を楽しみにしてくれている方にとってはもちろん、
Googleもこれからスマホ対応を検索順位に反映させるということで、
出来る限りスマホでもしっかりと表示をさせたいところです。
賢威であれば、テンプレートのCSSにレスポンシブのコードが組み込まれているため、
<div class="v-wrap al-c m30-b"> 動画 </div>
というコードで囲めば問題なくスマホでもレスポンシブ表示されるのですが、
新しい『TCD』というテンプレートだと、それも反映されない……。
テンプレートによってはデザインを構築するCSS色々とわからないながらにも、CSSを調べながらやってみました。
CSSについてはまったく知識がないため、
調べつつ、バックアップを取りながらちょっとずつ実践。
数時間悩みながら試していたら、非常に参考になるサイトが！
3ステップでできる！CSSを使って動画をレスポンシブ化する方法
http://www.aiship.jp/knowhow/archives/8579
ここで記載されているコードを、自分でTCDのCSSに追記してみました。
注意：CSSを変更する場合は必ずバックアップをとりましょう！
/**************************************************************
【YOUTUBEレスポンシブ】
**************************************************************/
.v-wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.v-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これでTCDテンプレートのスマホレスポンシブCSSの設定が完了したので、
あとは通常の記事投稿で、このCSSコードを利用していきます。
<iframe></iframe>で囲まれた部分はYOUTUBEの埋め込みコードそのままです。
その部分を<div class=”v-wrap”></div>で囲むのですが、これは、
<iframe>の部分に v-wrap のコードを反映させますよ
という意味で、さっきの 4．で追記したコードは、
『v-wrapを使ったらスマホで見たは画面の大きさ関係なく100%表示させます！』
という効果があるので、それがYOUTUBE画面に反映するという感じですね。
＜余談＞
今回は賢威からの移行ということで、賢威のCSSコードでもあった『v-wrap』を利用していますが、ここは任意です。
『youtube』でも『takeshi』でもなんでOKです。
これで設定完了。
スマホで見てみると……
無事に反映されました！
振り返ってみるとめちゃくちゃ簡単ですね（笑）
いやはや、TCDというテンプレートのデザイン性は素晴らしいのですが、
サポートがないというのと、カスタマイズ情報が少ないので、
私のような調べてそのままコピペするだけのCSS初心者にはちょっと手間がかかりました。
ちなみに、PCからの画面でも反映させたい場合はstyle.cssにも同じコードをコピペ追記すればOKです！
以上、
WordPress（ワードプレス）テンプレート『TCD』で動画をスマホレスポンシブにする方法
に関する記事でした。
