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

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」を使うと、ヘッダーの背景に動画を表示させる事ができます。

http://bizvektor.com/add-ons/video-unit/

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

http://demo.vs1.biz/videounit/

Lightningテーマって何?と思われた方は以下の記事を参考にして下さい。

 

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

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

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

  • TCDテーマ
  • DigiPress
  • EMANON
  • isotype
  • AFFINGER

 

TCDテーマ

ORION(TCD037)

出典:公式サイト「ORION」

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

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

ORION(TCD037)テーマの詳細はこちら

価格:12,980円(税込)

STORY(TCD041)

出典:公式サイト「STORY」

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

STORY(TCD041)テーマの詳細はこちら

価格:12,980円(税込)

SKIN(TCD046)

出典:公式サイト「SKIN」

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

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

SKIN(TCD046)テーマの詳細はこちら

価格:12,980円(税込)

SOURCE(TCD045)

出典:公式サイト「SORCE」

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

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

SOURCE(TCD045)テーマの詳細はこちら

価格:12,980円(税込)

UNIQUE(TCD044)

出典:公式サイト「UNIQUE」

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

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

UNIQUE(TCD044)テーマの詳細はこちら

価格:12,980円(税込)

MAXX(TCD043)

出典:公式サイト「MAXX」

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

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

MAXX(TCD043)テーマの詳細はこちら

価格:12,980円(税込)

OOPS!(TCD048)

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

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

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

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

価格:19,800円(税込)

FAMOUS(TCD064)

出典:公式サイト「FAMOUS」

「FAMOUS」は、集客・ブランディングに特化したテーマです。

ヘッダーの動画表示はもちろん、ヘッダー画像の表示パターンも3タイプから選択でき、洗練されたアニメーションによって印象的な表示ができます。

また、モーダルウィンドウ(ポップアップ表示)機能も搭載しており、1回限定表示、遅延表示(秒数指定可)等、細かい表示設定が可能です。

ランディングページを作成機能も用意されているので、集客に強いテーマです。

FAMOUS(TCD064)テーマの詳細はこちら

価格:25,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テーマやプラグインをご紹介しました。

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

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

トップへ戻る
タイトルとURLをコピーしました