Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

Youtube動画をヘッダーの背景に表示させる事ができるWordPressテーマやプラグインを紹介

サイトの印象を決めよう

WordPressサイトのトップページに、ファーストビュー(ヘッダー部分)に動画を表示させたいと思った事ありませんか?

動画を表示させる方法は以下の方法があります。

  • テーマを直接カスタマイズ
  • 動画を表示させる事ができるテーマ・プラグインを使う

テーマを直接カスタマイズするのはハードルが高いと思いますが、テーマ自体に動画を表示させる事ができる機能が付いていれば、誰でも簡単にヘッダーに動画を表示させる事ができます。

今回は、ヘッダーの背景に動画を設置する事ができるテーマやプラグインをご紹介します。

WordPressのデフォルトテーマ「Twenty Seventeen」

WordPressのインストール直後に表示される以下の画面を覚えていませんか?

WordPressのデフォルトテーマ「Twenty Seventeen」です。

実はこのテーマ、ヘッダー部分に動画を表示させる事ができるんです。

設定は簡単で、テーマのカスタマイズにある「ヘッダーメディア」を選択すると、設定する事ができます。

動画は以下2つの表示方法から設定できます。

  • Youtube動画:URLを入力するだけで背景に動画が表示されます。
  • mp4形式の動画:動画ファイルをアップロードして、表示させる事ができます。

動画のサイズは2000×1200pxが推奨との記載がありますが、このサイズだと両端に黒い帯が表示されてしまい、完璧に全面表示させることができません。
全面表示させるには、2000×1125px(16:9の比率)にすると全面表示されます。

 

「BizVektor」テーマの「BizVektor Video Unit」プラグイン

「Lightning」テーマの開発元であるビズベクトル社が配布している無料テーマ、「BizVektor」テーマの有料プラグイン「BizVektor Video Unit」を使うと、ヘッダーの背景に動画を表示させる事ができます。

Video Unit | 無料WordPressテーマ BizVektor [ ビズベクトル ]
機能紹介 「BizVektor Video Unit」は 無料WordPressテンプレート「BizVektor」 用のプラグインです。 このプラグインを使用するとBizVektorのメインビジュアルをスライドショーから動画に変更することができます。管理画面からの操作でYouTubeにアップロードした動画または、W...

以下はデモサイトのリンクです。ファーストビュー(ヘッダー部分)が動画だと躍動感がありますね。

SKATEBOARDERS | 幅広い品揃えと安心の対応でスケートボードライフをバックアップします。このサイトはVideo Unitのデモサイトです。
幅広い品揃えと安心の対応でスケートボードライフをバックアップします。このサイトはVideo Unitのデモサイトです。

 

ヘッダーに動画を表示可能な有料テーマの紹介

こちらはすべて有料ではありますが、ヘッダーに動画を表示可能なテーマをご紹介します。カスタマイズするよりも確実で、簡単にできますので、無料テーマをカスタマイズするよりも買った方が早いと思います。

今回は、以下4つのメーカーのテーマをご紹介します。

  • TCD
  • DigiPress
  • EMANON
  • isotype
  • AFFINGER

 

TCD

ORION

出典:公式サイト「ORION」

「ORION」は、ヘッダーにフルスクリーンの動画を再生する事ができるテーマです。

Youtube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。アップロードした動画や静止画は、明るさを落としてシックに見せたり、高級感のあるドットパターンをかけるといった、オーバーレイ選択機能もあります。

ORIONテーマの詳細はこちら

価格:12,980円(税込)

STORY

出典:公式サイト「STORY」

「STORY」は、高級なホテルやブライダル事業のコンセプトやサービス情報を的確に伝える事ができるテーマです。ヘッダー部分にYoutube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。

STORYテーマの詳細はこちら

価格:12,980円(税込)

SKIN

出典:公式サイト「SKIN」

「SKIN」は、エステサロン等の美容業界に特化したテーマです。

動画はもちろん、静止画を組み合わせてスライダー表示できるため、ターゲットに請求する静止画を表示させた後に、店舗内の空間や施術風景の動画を表示させることができます。

SKINテーマの詳細はこちら

価格:12,980円(税込)

SOURCE

出典:公式サイト「SOURCE」

「SOURCE」は、インターネットビジネスに最適化された、高機能かつ充実した機能を搭載したテーマです。

集客を売上に直結させるために検索エンジンやSNSなど、様々なインターネットからの集客を囲い込むために、トップページはハイエンドなランディングページ仕様となっています。

SOURCEテーマの詳細はこちら

価格:12,980円(税込)

UNIQUE

出典:公式サイト「UNIQUE」

「UNIQUE」は、広告代理店、デザイン会社、独創的なアイデアを創造するクリエイター向けに作られたテーマです。

コンテンツビルダーを搭載しているため、トップページに表示するコンテンツ(NEWS・コンセプト・会社概要・ブログ一覧・ポートフォリオetc)の順序や配色を自由自在にカスタマイズできます。

UNIQUEテーマの詳細はこちら

価格:12,980円(税込)

MAXX

出典:公式サイト「MAXX」

「MAXX」は、スポーツジムやヨガスタジオなどに使える、インパクト溢れる店舗サイト用のテーマです。

ヘッダーの動画表示はもちろん、写真の背景色や透明度も変更することができますので、、それぞれ拡大率やスライドの方向、フェードの透過率や背景色など細かい微調整も可能です。

MAXXテーマの詳細はこちら

価格:12,980円(税込)

OOPS!

出典:公式サイト「OOPS!」

「OOPS!」は、インターネットビジネス、店舗ホームページ、商品販売の成約率を高めるために開発されたテーマです。

デザイン性が高いだけでなく、コンテンツマーケティングの効果を最大限に発揮するために開発された「OOPS!」は、インプレッション、クリック数、コンバージョン率の計測が可能なCTA(ABテスト機能)を搭載している高機能なテーマです。

OOPS!テーマの詳細はこちら

価格:19,800円(税込)

 

DigiPress

Voyageur

出典:公式サイト「Voyageur」

「Voyageur」は、ヘッダーにフルスクリーン動画を再生できるテーマです。トップページだけでなく、アーカイブページ、シングルページごとで別々の動画を設定する事も出来ます。

ちなみに、こちらのテーマは、「Voyageur」と「Voyageur Light」の2種類がありますが、フルスクリーン動画に対応しているのは「Voyageur」の方なので、購入される時はお気をつけ下さい。

Voyageur!テーマの詳細はこちら

価格:7,880円(税込)

Clarity

出典:公式サイト「Clarity」

「Clarity」は、ヘッダー部分にフルスクリーンの静止画像、モーションエフェクト付きのスライドショー、そしてYouTubeまたはVimeoのビデオを表示する事ができるビジネスサイト向けのテーマです。

こちらのテーマは「Business Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。

Clarityテーマの詳細はこちら

価格:8,980円(税込)

Macchiato

出典:公式サイト「Macchiato」

「Macchiato」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、パララックススクロールの静止画を表示させる事ができるテーマです。

こちらのテーマは「Macchiato」と「Macchiato Light」の2種類がありますが、フルスクリーン動画に対応しているのは「Macchiato」の方なので、購入される時はお気をつけ下さい。

Macchiatoテーマの詳細はこちら

価格:8,580円(税込)

Luminous

出典:公式サイト「Luminous」

「Luminous」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、ビジネスサイト、パーソナルユースのどちらでもマッチする4種類のヘッダースライドショーを表示させる事ができるテーマです。

こちらのテーマは「Business Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。

Luminousテーマの詳細はこちら

価格:8,980円(税込)

 

EMANON(EMANON Pro)

出典:公式サイト「EMANON Pro」

「EMANON Pro」は、ヘッダーの動画表示の他に、スライダーセクション、スライダーコンテンツセクション、おすすめ記事セクション、ぺージボックスセクション、アイキャッチセクションといった、計6種類のファーストビュータイプを使う事が出来ます。

「EMANON Pro」で表示できる動画は、MP4形式の動画です(Youtube動画は表示できません)。

ちなみに、無料で使える「EMANON Free」ではヘッダーの動画表示を使う事が出来ません。ヘッダーの動画表示は有料版のみの機能となります。

EMANON Proテーマの詳細はこちら

価格:9,800円(税込)

 

isotype

MAJESTIC

「MAJESTIC」は、インパクトと美とミニマルを突き詰めた、ビジネスサイトをターゲットとしたWordPressテーマです。

ヘッダー部分にYoutubeの動画を表示させる事はもちろん、パララックスコンテンツを作成できたり、カルーセルスライダーを表示させることもできます。

MAJESTICテーマの詳細はこちら

価格:10,800円(税込)

MOMENTUM

「MOMENTUM」は、多彩なテーマオプション機能を備え、柔軟にサイトを制作することをコンセプトとしたWordpressテーマです。

グリッドレイアウトを組むためのウィジェットエリアにより、オシャレで、なおかつ複雑なグリッドレイアウトを組むことができます。

ヘッダー動画は動画をアップロードして表示させる事ができます。

MOMENTUMテーマの詳細はこちら

価格:10,800円(税込)

 

AFFINGER(AFFINGER5)

「AFFINGER5」は、ビジネスサイトはもちろん、アフィリエイトサイトやブログでも効果が発揮できるようマルチに設計されたWordPressテーマです。

トップページに動画を表示させる事ができるのですが、動画が一部コンテンツで見えない部分があります。ただ、コンテンツの大部分が半透明化されていますので、そこまで気にならないと思います。

サンプルサイトで確認できますので、興味のある方は直接確認してみて下さい。

AFFINGER5テーマの詳細はこちら

価格:14,800円(税込)

 

まとめ

以上、トップページのヘッダー部分に動画を設置する事ができるWordPressテーマやプラグインをご紹介しました。

ヘッダー部分に動画を表示させたいけど、カスタマイズするのが面倒という方は、フルスクリーン動画を表示させる事ができるテーマを導入すると簡単に表示させる事が出来ます。

動画を表示させるとサイトの読み込みが遅くなる場合がありますので、動画のファイルサイズにはご注意ください。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
サイトの印象を決めよう
クリエイトエクスプレス