2018.11.27WordPressサイトのトップページに、ファーストビュー(ヘッダー部分)に動画を表示させたいと思った事ありませんか?動画を表示させる方法は以下の方法があります。テーマを直接カスタマイズ動画を表示させる事ができるテーマ・プラグインを使うテーマを直接カスタマイズするのはハードルが高いと思いますが、テーマ自体に動画を表示させる事ができる機能が付いていれば、誰でも簡単にヘッダーに動画を表示させる事ができます。この記事では、ヘッダーの背景に動画を設置する事ができるテーマやプラグインをご紹介します。Seventeen」です。実はこのテーマ、ヘッダー部分に動画を表示させる事ができるんです。設定は簡単で、テーマのカスタマイズにある「ヘッダーメディア」を選択すると、設定する事ができます。動画は以下2つの表示方法から設定できます。YouTube動画:URLを入力するだけで背景に動画が表示されます。mp4形式の動画:動画ファイルをアップロードして、表示させる事ができます。動画のサイズは2000×1200pxが推奨との記載がありますが、このサイズだと両端に黒い帯が表示されてしまい、完璧に全面表示させることができません。全面表示させるには、2000×1125px(16:9の比率)にすると全面表示されます。Unit」を使うと、ヘッダーの背景に動画を表示させる事ができます。https://bizvektor.com/add-ons/video-unit/以下はデモサイトのリンクです。ファーストビュー(ヘッダー部分)が動画だと躍動感がありますね。https://demo.vs1.biz/videounit/Lightningテーマって何?と思われた方は以下の記事を参考にして下さい。【WordPress】テーマをインストールする方法【Lightningテーマ】ヘッダーに動画を表示可能な有料テーマの紹介こちらはすべて有料ではありますが、ヘッダーに動画を表示可能なテーマをご紹介します。カスタマイズするよりも確実で、簡単にできますので、無料テーマをカスタマイズするよりも買った方が早いと思います。今回は、以下5つのメーカーのテーマをご紹介します。「ORION」は、ヘッダーにフルスクリーンの動画を再生する事ができるテーマです。Youtube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。アップロードした動画や静止画は、明るさを落としてシックに見せたり、高級感のあるドットパターンをかけるといった、オーバーレイ選択機能もあります。「STORY」は、高級なホテルやブライダル事業のコンセプトやサービス情報を的確に伝える事ができるテーマです。ヘッダー部分にYoutube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。「SKIN」は、エステサロン等の美容業界に特化したテーマです。動画はもちろん、静止画を組み合わせてスライダー表示できるため、ターゲットに請求する静止画を表示させた後に、店舗内の空間や施術風景の動画を表示させることができます。「SOURCE」は、インターネットビジネスに最適化された、高機能かつ充実した機能を搭載したテーマです。集客を売上に直結させるために検索エンジンやSNSなど、様々なインターネットからの集客を囲い込むために、トップページはハイエンドなランディングページ仕様となっています。「UNIQUE」は、広告代理店、デザイン会社、独創的なアイデアを創造するクリエイター向けに作られたテーマです。コンテンツビルダーを搭載しているため、トップページに表示するコンテンツ(NEWS・コンセプト・会社概要・ブログ一覧・ポートフォリオetc)の順序や配色を自由自在にカスタマイズできます。「MAXX」は、スポーツジムやヨガスタジオなどに使える、インパクト溢れる店舗サイト用のテーマです。ヘッダーの動画表示はもちろん、写真の背景色や透明度も変更することができますので、、それぞれ拡大率やスライドの方向、フェードの透過率や背景色など細かい微調整も可能です。「OOPS!」は、インターネットビジネス、店舗ホームページ、商品販売の成約率を高めるために開発されたテーマです。デザイン性が高いだけでなく、コンテンツマーケティングの効果を最大限に発揮するために開発された「OOPS!」は、インプレッション、クリック数、コンバージョン率の計測が可能なCTA(ABテスト機能)を搭載している高機能なテーマです。「FAMOUS」は、集客・ブランディングに特化したテーマです。ヘッダーの動画表示はもちろん、ヘッダー画像の表示パターンも3タイプから選択でき、洗練されたアニメーションによって印象的な表示ができます。(秒数指定可)等、細かい表示設定が可能です。ランディングページを作成機能も用意されているので、集客に強いテーマです。「Voyageur」は、ヘッダーにフルスクリーン動画を再生できるテーマです。トップページだけでなく、アーカイブページ、シングルページごとで別々の動画を設定する事もできます。Light」の2種類がありますが、フルスクリーン動画に対応しているのは「Voyageur」の方なので、購入される時はお気をつけ下さい。「Clarity」は、ヘッダー部分にフルスクリーンの静止画像、モーションエフェクト付きのスライドショー、そしてYouTubeまたはVimeoのビデオを表示する事ができるビジネスサイト向けのテーマです。Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。「Macchiato」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、パララックススクロールの静止画を表示させる事ができるテーマです。Light」の2種類がありますが、フルスクリーン動画に対応しているのは「Macchiato」の方なので、購入される時はお気をつけ下さい。「Luminous」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、ビジネスサイト、パーソナルユースのどちらでもマッチする4種類のヘッダースライドショーを表示させる事ができるテーマです。Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。Pro」は、ヘッダーの動画表示の他に、スライダーセクション、スライダーコンテンツセクション、おすすめ記事セクション、ぺージボックスセクション、アイキャッチセクションといった、計6種類のファーストビュータイプを使う事ができます。Pro」で表示できる動画は、MP4形式の動画です(Youtube動画は表示できません)。Free」ではヘッダーの動画表示を使う事ができません。ヘッダーの動画表示は有料版のみの機能となります。Proテーマの詳細はこちら価格:9,800円(税込)isotypeMAJESTIC「MAJESTIC」は、インパクトと美とミニマルを突き詰めた、ビジネスサイトをターゲットとしたWordPressテーマです。ヘッダー部分にYoutubeの動画を表示させる事はもちろん、パララックスコンテンツを作成できたり、カルーセルスライダーを表示させることもできます。MAJESTICテーマの詳細はこちら価格:19,800円(税込)MOMENTUM「MOMENTUM」は、多彩なテーマオプション機能を備え、柔軟にサイトを制作することをコンセプトとしたWordpressテーマです。グリッドレイアウトを組むためのウィジェットエリアにより、オシャレで、なおかつ複雑なグリッドレイアウトを組むことができます。ヘッダー動画は動画をアップロードして表示させる事ができます。MOMENTUMテーマの詳細はこちら価格:27,000円(税込)AFFINGER(AFFINGER5)「AFFINGER5」は、ビジネスサイトはもちろん、アフィリエイトサイトやブログでも効果が発揮できるようマルチに設計されたWordPressテーマです。トップページに動画を表示させる事ができるのですが、動画が一部コンテンツで見えない部分があります。コンテンツの大部分が半透明化されていますので、そこまで気にならないと思います。サンプルサイトで確認できますので、興味のある方は直接確認してみて下さい。AFFINGER5テーマの詳細はこちら価格:14,800円(税込)まとめ以上、トップページのヘッダー部分に動画を設置する事ができるWordPressテーマやプラグインをご紹介しました。ヘッダー部分に動画を表示させたいけど、カスタマイズするのが面倒という方は、フルスクリーン動画を表示させる事ができるテーマを導入すると簡単に表示させる事ができます。動画を表示させるとサイトの読み込みが遅くなる場合がありますので、動画のファイルサイズにはご注意ください。隆司ブログ・Webマーケティング・SEO、アフィリエイトの情報など、実践していることや、ITガジェット・RPA・チャットボット・ドローンなどの情報を発信。me!WordPressを活用したWebマーケティング、SEOを中心に情報を発信しています。このブログを通してブログマーケティングに取り組んでいます。隆司ブログ・Webマーケティング・SEO、アフィリエイトの情報など、実践していることや、ITガジェット・RPA・チャットボット・ドローンなどの情報を発信。t("").html(tocplus.visibility_show).text():default:t(this).html(tocplus.visibility_hide),t.cookie&&(o?t.cookie("tocplus_hidetoc","1",{expires:30,path:"/"}):t.cookie("tocplus_hidetoc",null,{path:"/"})),t("#toc_container").css("width",tocplus.width).removeClass("contracted"),t("ul.toc_list").show("fast")}})}}});タイトルとURLをコピーしました。