WordPressテーマの背景を動画にするカスタマイズ方法

WordPressテーマの背景に動画を利用する方法の紹介です。

編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタグを記入して、そのタグに対するスタイルシートを書くだけの簡単な編集で利用できます。

以下のような動画背景が、ちょっとした編集で実装することができます。

背景が動画のWordpressテーマ

photo by Laineema

スポンサーリンク
レクタングル(大)広告

カスタマイズの主な手順

テーマの背景を動画にするには、以下の手順が必要です。

  1. mp4、webm動画を準備する
  2. HTML要素とスタイルの記入

やることは至って単純です。

動画を準備する

まず、動画は.mp4と.webmファイルを用意する必要があります。

webmは、GoogleがHTML5標準をねらう、オープンでロイヤリティフリーな動画コンテナフォーマットです。Chrome、Firefox、Operaで標準対応をしています。今後Googleは、YouTube動画をすべてWebMに変換することを発表していることからも、今後、一般的な動画フォーマットになるのではと思います。

ただ、動画を用意すると言っても大変です。たとえ動画があったとしても、ライセンスなどのことも考える必要があります。

ただ、こういったときに便利なのがMazwaiという動画素材サイトです。

Mazwai

Mazwai

Mazwai

ここの動画は、あらかじめmp4とwebmファイルがzipに含まれた形で配布されています。また、ライセンスも、商用利用OKです。

僕が利用したのは、klimetsさんのCHIMNYという作品ですが、CC BY 3.0ライセンスで利用可能になっています。

ライセンスは、動画ダウンロード時に表示されます。

動画のダウンロード

ダウンロードしたファイルは、「videos」フォルダの中にでも入れて、そのフォルダごとWordpressテーマ(子テーマ)フォルダ内に放り込みます。

あとは、「videos」フォルダ内に、動画が表示できなかった場合用の画像も準備しておいてください。(動画の1シーンをキャプチャしたものでOKです。)

コードを記述する

あとは、ビデオ背景用のコードを記述するだけです。

以下のようなコードを<body></body>タグ直下内に書けばOKです。とりあえずは</body>手前に書けば良いかなと。通常のテーマであれば</body>はfooter.phpにあると思います。

スタイル部分は、CSSファイルに書いてもOKです。

ビデオ要素

以下は、動画を「自動再生」、「ループ」で呼び出すvideo要素です。

スタイルのポイント

あとは、先程のvideo要素を「position: fixed;」にして固定表示にします。あとは、「z-index: -100;」に設定して、要素の最も背面に配置しています。

今回のコードは、以下を参考にさせていただきました。

参考 HTML5 Video

あと、サイトを作成するならこちらが参考になります。

参考 背景に動画を使ったWebサイトの作り方 | Webクリエイターボックス

まとめ

やってみる前は、「動画を利用した背景なんてかなり難しいのだろうなと思っていたのですが、実際にやってみると、結構単純な実装でできました。

動画を利用した背景は、「ページサイズが重くなる」、「デザインによっては文字が見づらくなるなど難点もありますが、インパクトだけはでかいです。

何か、人を「おっ!」と驚かせたいページで利用するにはいいかもしれません。

Video by klimets

『WordPressテーマの背景を動画にするカスタマイズ方法』へのコメント

  1. 名前:はる 投稿日:2015/04/07(火) 16:56:47 ID:a9b95ff19

    Simplicityでいつもお世話になっております。

    htmlにvideoタグを入力するのはわかったのですが、wordpressでの作業はテーマの編集で子テーマ(ヘッダー?)をつくって、そこにvideoタグを入力すれば良いのでしょうか?

    まだ勉強を始めたばかりで知識が足りなくて申し訳ありません。

    教えていただけたら幸いです。
    よろしくお願い申し上げます。

  2. わいひら 名前:わいひら 投稿日:2015/04/07(火) 20:03:05 ID:a02173cb5

    Simplicityを利用している場合は、子テーマはこちらです。

    Simplicityの子テーマ

    動画を準備して、コードをfooter-insert.phpあたりに貼り付ければOKかと思います。
    子テーマに関することは「Wordpress 子テーマ」などで検索してみてください。

  3. 名前:はる 投稿日:2015/04/07(火) 20:20:38 ID:a9b95ff19

    ご丁寧にありがとうございました!
    早速試してみます。

  4. 名前:りゅうちん 投稿日:2017/05/13(土) 03:35:23 ID:d5932c1f2

    はじめまして。最近Wordpressを使い始めました初心者です。
    いろいろと参考にさせてもらっています。

    2点教えていただきたいのですが、
    【1】「そのフォルダごとWordpressテーマ(子テーマ)フォルダ内に放り込みます。」とありますが、
    子テーマとは、どういったものでしょうか?
    Wordpressフォルダ直下にvideosフォルダを配置すれば良いのでしょうか?

    【2】「以下のようなコードをタグ直下内に書けばOKです。」とありますが、
    「メニュー」→「外観」→「テーマの編集」で右側にあります、~.phpのどれになりますか?
    全て見たのですが、わかりませんでした。
    別のところでしょうか?

    よろしくお願いいたします。

  5. わいひら 名前:わいひら 投稿日:2017/05/13(土) 08:08:29 ID:ae1f25094

    はじめまして。

    【1】子テーマについては、以下の記事を参照してください。
    WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
    カスタマイズをするなら、子テーマを使った方が後々便利になるというだけで、必ず使う必要ありません。
    テーマフォルダ(親テーマ)内にvideosフォルダを作成して動画を配置しても良いです。
    子テーマを利用する場合は、子テーマフォルダ内にvideosフォルダを作成して動画を配置します。

    【2】これはテーマによって変わってくるかもしれません。
    ただ、通常であれば/bodyタグ(bodyの閉じタグ)はfooter.phpの最後のほうにあると思います。

  6. 名前:りゅうちん 投稿日:2017/05/14(日) 17:34:31 ID:c9c67e4db

    回答ありがとうございました。
    何とか設定できました。
    もう1点お聞きしたいのですが、「少し透過して背景を見えるようにする」コードの
    記載がありますが、の前に上記のコード全て追記したのですが
    透過しているように見えないのですが、何か他に設定が必要なのでしょうか。

  7. 名前:りゅうちん 投稿日:2017/05/15(月) 16:40:27 ID:b451e7db8

    度々、すいません。
    動画の設定ですが、なんとか設定できました。
    私の場合、子テーマが「TwentyEleven」だったので、
    /wordpress/wp-content/themes/twentyeleven配下にvideosのフォルダを配置して
    設定することができました。
    あと、「少し透過して背景を見えるようにする」設定ですが
    各投稿で表示している画像は、薄くなっているのですが、背景は透けていない状態です。
    style.cssに記載してみたのですが、変化なしでした。
    寝ログさんが使用している子テーマでないと無理なのでしょうか。
    始めたばかりで素人質問となってしまってすみません。

  8. わいひら 名前:わいひら 投稿日:2017/05/15(月) 19:48:11 ID:909aac5d1

    以下のCSSセレクタは、当サイトのものに合わせて指定してあります。

    「TwentyEleven」テーマを利用しているのであれば、「TwentyEleven」のメインカラムとフッターに合わせたCSSセレクタを書く必要があります。
    ブラウザのデベロッパーツールなどでCSSセレクタを調べて書き換えてみてください。
    WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方