2015.03.07

WordPress(ワードプレス)テンプレート『TCD』で動画をスマホレスポンシブにする方法

Pocket
LINEで送る

どうも。
ビジネスアーティストの永田武です。

今回は、

WordPress(ワードプレス)テンプレート『TCD』で動画をスマホレスポンシブにする方法

についての記事です。

20120110_rdw

つい先日に現在ご覧のサイトにリニューアルをしたのですが、
WordPress(ワードプレス)のテンプレートも変更しました。

『賢威』というテンプレートから、『TCD』というテンプレートに!

賢威はすごく使いやすくて色々と便利だったんですが、
そのせいか利用されている方も非常に多く、
差別化を狙って、新しいテンプレートに挑戦してみました。

WordPress(ワードプレス)はワンタッチで見た目変更できるのがいいですね♪

 

動画が……はみ出る……

ワンタッチでポンとテーマを変更して、その他のデザインを調整したのですが、
スマホで色々とサイトをチェックしていると……

275231

 

動画がスマホの画面からはみ出ている!

 

いつも動画を楽しみにしてくれている方にとってはもちろん、
Googleもこれからスマホ対応を検索順位に反映させるということで、
出来る限りスマホでもしっかりと表示をさせたいところです。

賢威であれば、テンプレートのCSSにレスポンシブのコードが組み込まれているため、

<div class="v-wrap al-c m30-b"> 動画 </div>

というコードで囲めば問題なくスマホでもレスポンシブ表示されるのですが、
新しい『TCD』というテンプレートだと、それも反映されない……。

テンプレートによってはデザインを構築するCSS色々とわからないながらにも、CSSを調べながらやってみました。

 

style_sp.cssにコードを追加する

CSSについてはまったく知識がないため、
調べつつ、バックアップを取りながらちょっとずつ実践。

数時間悩みながら試していたら、非常に参考になるサイトが!

3ステップでできる!CSSを使って動画をレスポンシブ化する方法
http://www.aiship.jp/knowhow/archives/8579

ここで記載されているコードを、自分でTCDのCSSに追記してみました。

注意:CSSを変更する場合は必ずバックアップをとりましょう!

 

  1. ダッシュボード『外観』の『テーマの編集』をクリックします。01
  2. 右側のサイドバーから『style_sp.css』をクリックします。
    02
  3. テーマ編集の画面が表示されます。
    TCDテンプレートでは、ここがスマホ用のCSSのようですね。
    03
  4. 編集画面の一番下に以下のコードをそのままコピペで追記します。
     

    /**************************************************************
    【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%;
    }

  5. 『ファイルを更新』をクリックします。
    これでCSSの編集は完了です。
    04 

 

これでTCDテンプレートのスマホレスポンシブCSSの設定が完了したので、
あとは通常の記事投稿で、このCSSコードを利用していきます。

05

<iframe></iframe>で囲まれた部分はYOUTUBEの埋め込みコードそのままです。

その部分を<div class=”v-wrap”></div>で囲むのですが、これは、

<iframe>の部分に v-wrap のコードを反映させますよ

という意味で、さっきの 4.で追記したコードは、

『v-wrapを使ったらスマホで見たは画面の大きさ関係なく100%表示させます!』

という効果があるので、それがYOUTUBE画面に反映するという感じですね。

<余談>
今回は賢威からの移行ということで、賢威のCSSコードでもあった『v-wrap』を利用していますが、ここは任意です。
『youtube』でも『takeshi』でもなんでOKです。

 

これで設定完了。
スマホで見てみると……

275230

無事に反映されました!

 

TCDで動画をスマホレスポンシブにする まとめ

  1. テーマを編集で『style_sp.css』にコードを追記する。
  2. YOUTUBEの埋め込みコードを<div class=””>で囲む。

振り返ってみるとめちゃくちゃ簡単ですね(笑)
いやはや、TCDというテンプレートのデザイン性は素晴らしいのですが、
サポートがないというのと、カスタマイズ情報が少ないので、
私のような調べてそのままコピペするだけのCSS初心者にはちょっと手間がかかりました。

ちなみに、PCからの画面でも反映させたい場合はstyle.cssにも同じコードをコピペ追記すればOKです!

 

以上、

WordPress(ワードプレス)テンプレート『TCD』で動画をスマホレスポンシブにする方法

に関する記事でした。

ハッピーの秘密が”毎日”届く永田武のLINE



毎日30秒で読める!
ブログやメルマガでは書けないリアルタイムメッセージ。

▼『友だち追加』から登録する▼

友だち追加

パソコンの場合は、QRコードか、友達検索で以下のIDを入力!
@takeyan

Pocket
LINEで送る