ヘッダー画像の代わりに動画ヘッダー-Volar2
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。
【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。
動作チェック済み（対応可能）なのはmp4動画のみです。
またトップページのみでの利用となり、それ以外のページでは使えません。
Youtube動画は再生開始時のタイトル等が現状では消すことができず、”背景動画としてはみっともない”ので動作チェックすらしておりません。
動画の作成及び設定について
動画というと「敷居が高い」とつい思っちゃいますが、実はそうでもありません。
もちろん企業サイトであればそれなりのレベルのものを作る必要もあるでしょうけど、それなりの機材や人材も揃ってるはずですからそういう意味では問題はないかと思います。
ではアフィリエイトサイトなどを運営する個人ならどうでしょう。
スキルがある人はそれなりの動画を作ればいいでしょう。
そうでない方は…フリーの動画を使うのが手っ取り早いです。
ただしフリー動画とうたっていても実際には著作権の表示が必要だったりするのもあるので、その辺はちゃんと確認する必要があります。
筆者
DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。
可能な動画形式はmp4
設置可能な動画形式は拡張子が「.mp4」の動画のみです。
mp4動画であれば今は基本的にはどのブラウザでも表示可能です。
iPhoneで撮影した動画は拡張子が「.mov」になるためそのままだとうまく表示されません。
この場合、動画編集ソフトやオンライン動画変換サービスなどを利用してmov→mp4へ変換する必要があります。
そもそもそのままだとファイルサイズが大きすぎて使えないので、いずれにしても変換作業は必要です。
動画サイズ
動画の解像度は特に制限はありません。
問題なのはファイルサイズです。
一般的に解像度が大きければ大きいほどファイルサイズは大きくなります。
ファイルサイズが大きければ画質はよくなりますが読み込みに時間がかかってしまうという大きなデメリットがあります。
結論から申し上げますとファイルサイズは最大でも3MB以下に抑えた方がよろしいかと。
ファイルサイズを落とす方法はいくつかあります。
「解像度を低くする」「画質を若干落とす」「コマ数を落とす」など。
（動画の種類や内容によって選択肢が変わってきます）
これらは動画圧縮サービスを使えば手軽に実行可能です。
私も使ったことがあるのがこちらのサービス。（使い方はググってください）
DEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。
筆者
ファイルサイズがあまりに大きいとオンラインサービスでは受け付けてくれない場合もあります。
そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。
粗さ（ボケ感）解消エフェクト
ヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様にしてます。
それゆえファイルサイズを落としたいがために解像度があまりに低い（たとえば640pxとか）と、ブラウザの広さに応じて縦横に伸びた場合は粗さが目立ったりボケ感がかなり強調される可能性もあります。
そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。
- SIRIUS2に標準で備わってるヘッダー画像の「オーバーレイの表示」をONにする（少し暗っぽい感じになります）
- 【Volar2】側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる
背景動画の設定方法
動画ヘッダーの設置手順を概要だけご紹介します。
動画の登録
SIRIUS2には動画表示機能が搭載されてるのでこれを利用して動画を登録します。
（ここに登録しておくといろいろ使いやすいんです）
①をクリックした後、②のフォルダアイコンをクリックして表示したい動画を選択すると青枠内に動画URLが設定されます。
OKをクリックすると専用の”動画タグ”が出力されます。
同時に「media」フォルダ内に動画が登録（コピー）されます。
ただ今回は動画をサイト内に登録させるのが第一目的なので、一つ前の画像の”動画タグ”は動画ファイル名だけコピーしてさくっと全削除しちゃいます。（使いません）
「media」フォルダは先ほどの画像でもわかるように、【Windows】→【ACES WEB】→【SIRIUS2】→【data】→【※動画を設置するサイト名】→【media】の位置にあるので、動画登録機能を使わず「media」フォルダに直接動画フィルを放り込んでもOKです。
【※動画を設置するサイト名】は特にいじってなければ”サイト名”が表示されます。
ただし『サイトデータのフォルダ名変更』で名称変更をしている場合はこの限りではありません。
モジュールの有効化とその中身
＜動画ヘッダー＞機能はデフォルトでは無効化されてます。
そのためヘッダー画像を動画ヘッダーにするには専用モジュールのコメントアウトを解除して有効化する必要があります。
テンプレート→HTMLテンプレート編集→トップページと開き、以下の2つのモジュールのコメントアウトを解除します。
※＜コメントアウト＞についてはこちらの記事をご参照ください。
①のモジュールには専用のスタイルが格納されてます。
今は特に変更の必要はないのでこのままで。
（変更の必要性がありそうなところはマニュアルでご説明してます）
②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を先ほどコピーしたファイル名で差し替えます。
（※一部を抜粋）
これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。
筆者
動画ヘッダーの上に画像やテキストを表示させることもできます。
背景動画設定時の注意点
【Volar2】の動画ヘッダーはできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。
メリットは簡単な手順で動画ヘッダーに切り替えられること。
しかしながらデメリットもいくつか存在します。
そのあたりを解決策も含めてご説明していきます。
レイアウトは1カラム（ワイド）
トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。
（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません)
なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。
＜レイアウト設定＞で【全体設定】の『ページトップ』を「1段（上部固定・ヘッダーワイド）」に設定すると、DEMOサイトのトップページのように動画表示エリアがロゴ画像やメニューの背景部分にまで広がって表示されます。
その場合ロゴ画像は透過情報を保持したPNG画像などを用意する必要があります。
オーバーレイが使える
【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。
筆者
【Volar2】の動画ヘッダーは動画の上に静止画やテキストを表示させることもできるので『オーバーレイの表示』をONにすればテキストがより見やすくなります。
ほかにも「グレースケール・モノクロ・ぼかし・セピア」といたエフェクト類も用意してます。
ヘッダー画像が一瞬表示される
【Volar2】の動画ヘッダーはSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。
これはちょっとみっともない動作で可能な限り避けたいところ。
じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。
（おそらくスタイルがどこかでぶつかってるんだと思いますが）
それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。
話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。
ただこれの変更（改修）作業はかなり手がかかりそうなので2つの代替策を考えてみました。
①白のヘッダー画像
ヘッダー画像が表示されるのが避けられないのなら、”真っ白なヘッダー画像（ファイル名はheader.jpg）”であればヘッダーエリアは一瞬白っぽくなるだけなので違和感はかなり薄れます。
その代わりヘッダー画像をトップページ以外でも表示するよう設定しているサイトでは今度はその白画像がヘッダー画像として表示されてしまうことになります。
そこでそれを避けるために「header.jpg」ではなく「headers.jpg」をヘッダー画像として読み込む独自タグも別途用意してあります。
そちらに切り替えればトップページは白画像（header.jpg）を読込み、上の独自タグを有効化したテンプレートではファイル名を変更（headers.jpg）した元のヘッダー用画像がヘッダー画像として表示されるようになります。
予めこちらで100×100pxの白画像（header-empty.jpg）を用意してあります。
（ダウンロードファイル内に同梱済み）
必要であれば元のヘッダー画像「header.jpg」は「headers.jpg」に名称変更し、上記白画像（header-empty.jpg）を「header.jpg」に切り替えます。
筆者
反対のやり方、つまりトップページだけheaders.jpgをヘッダーとして読み込む設定にすれば他のテンプレートでの操作はいっさい必要なくなるのでそちらの方がラクと言えばラクです。
でも今回の構成ではそれが無理そうなのでやむなく他のテンプレートでの操作にしてあります。
②ローディング画面
2つ目は個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）
筆者
本来であればサイトを開くと1～3秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。
（1～3秒という時間は回線速度などによって前後します）
しかしながらDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。
【Volar2】には上記ローディング画面用の設定も搭載してるのでお好みでご利用いただけます。
なおデフォルトでは無効化されてますが、下の3つのモジュールのコメントアウトを解除するだけで即発動します。
動画ヘッダーを止めたときは3つのローディング用モジュールも再度コメントアウト状態に戻します。
先に「ヘッダー画像が一瞬表示される…」と書きましたが、この”一瞬”の時間はコンマ◯秒～1秒程度の世界です。
もしかしたら【サイトオプション】→【基本設定】→【サイトの表示速度】→『画像の遅延表示』をOFFにすることでもっと短くすることもできるかもしれません。
『画像の遅延表示』というのは「画面をスクロールしていって画像が表示領域に来たらその時点で画像を読み込む」といういわゆる”画像遅延読み込み”機能のことです。
ページ表示時には画像の読み込みをスキップするのでその分サイト表示スピードの改善に役立つ機能と言われてます。
この機能、本来であればファーストビュー（最初に表示されるエリア、つまりヘッダーエリア）では逆にいち早く画像を表示できるようそこだけ画像遅延読み込み機能を外せるような設定を付けてるテンプレートもあるんですが、SIRIUS2にはその設定はなく一括での画像遅延読み込み機能になってます。
それがヘッダー画像の一瞬表示の時間が長くなってしまう可能性がなきにしもあらず。
（あくまで推測です）
それゆえ『画像の遅延表示』機能をOFFにすれば多少は…多少は読み込みが早くなって一瞬がホントに一瞬になる可能性も残っています。（あくまで推測ですよ）
ただしこの機能をOFFにしてしまうとすべてのページで画像遅延読み込みが機能しなくなるというデメリットも併せ持ってるのでご注意ください。
『ヘッダー画像の代わりに動画ヘッダー』の関連記事
-
SIRIUS2テンプレート【Volar2】にはテーブル（表）のデータの背景にアイコンをつけたりセル幅を自在に調節できたりする便利な機能が搭載されてます -
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞のシンプル版。使い勝手が向上しました。 -
SIRIUS2テンプレート【Volar2】のテキスト周りを彩る＜独自の装飾効果＞についての詳細ページ。