「トップページのヘッダーエリアにYouTube動画を流すにはどうやればいいの？」
という疑問に答えます。
AFFINGER6のヘッダー画像エリアとは、この部分のことです。
もしくは、ヘッダーエリア～ヘッダー画像エリアまでの範囲に動画を流すこともできます。
やることは、大きく以下の3つです。
- ヘッダーに流すYouTubeのURLを用意する
- AFFINGER管理での設定
- カスタマイズでの設定
今回は、ヘッダー画像エリアのみにYouTube動画を流すための手順を詳しく解説していきます。
ヘッダーに流すYouTubeのURLを用意する
まずは、ヘッダーに流すYouTube動画の共有URLをコピーします。
１．YouTubeで、好きな動画のページを開きます。
動画プレーヤーの下にある「共有」をクリック。
２．https:// youtu.be/←ここから後ろの部分だけをコピーする。
クリップボードにコピーしたまま、次に「AFFINGER管理」を開きます。
AFFINGER管理で動画背景の設定をする
WordPress側でYouTubeの共有URLを設定します。
１．まずは管理画面の左メニューにある「AFFINGER管理」をクリック。
２．AFFINGER管理メニューの「トップページ」をクリックし、下までスクロールすると、動画背景の設定項目があります。
３．「背景に流すYouTube動画ID ①」に先ほどコピーした共有URL（ https:// youtu.be/ ←ここから後ろだけ）を貼り付けます。
「② トップページ（PC）の背景で動画を流す」にチェックを入れ、「Save」をクリックし保存します。
スマホのトップページにも動画を反映させたい場合は、「スマホにも反映」にもチェックを入れておきましょう。
「トップページ（PC）の背景で動画を流す」にチェックを入れて「Save」すると、スマホにも反映にチェックが入れられるようになります。
これでAFFINGER管理の設定は終わりです。
次はカスタマイズ設定に移ります。
ここでは「ヘッダー画像エリアのみに動画を表示させるパターン」を解説します。
カスタマイズ設定ヘッダー画像エリアのみに動画を表示させたい場合
ヘッダー画像エリアのみに動画を表示させたい場合は、
- ヘッダー画像エリアの高さを設定する
- headerエリアの背景を削除する
- ヘッダーエリアの背景色を設定する
- header以下のエリアの背景色を設定する
この流れで設定していきます。
ヘッダー画像エリアの高さを設定する
ここの高さがなければ迫力出ないので、500pxぐらいにはしておきましょう（これはお好みで）。
１．カスタマイズメニューの「ヘッダー画像」を開きます。
２．ヘッダー画像エリア最低の高さを500にします。
これでヘッダー画像エリアの設定は完了です。
headerエリアの背景画像を削除する
headerエリアに背景画像を設定している場合は、ここもクリアに変更しましょう。
１．「基本エリア設定」→「headerエリア」の順にクリック。
２．headerエリアに画像を設定している場合は「削除」します。
これでheaderエリアの設定は完了です。
ヘッダーエリアの背景色を設定する
ヘッダーエリアとは、サイトタイトル（ロゴ）やキャッチフレーズが表示されているエリアのことです。
ここに背景色を設定することで、サイトロゴやヘッダーメニュー（横列）を目立たせることができます。
背景色をクリアすれば、ヘッダーエリアにも動画を流せます。
１．「基本エリア設定」→「ヘッダーエリア」の順にクリック。
２．背景色を設定し、「ヘッダー背景の横幅を100%にする」にチェックを入れます。
header以下のエリアの背景色を設定する
「header以下のエリア」とは、その名の通り、ヘッダーより下のエリアのことです。
ヘッダーエリアの一番下は「ヘッダーカードエリア」です。
ここの背景色を設定していなければ、記事エリアの両サイドに動画が流れてしまいます。
なのでここは背景色を設定しておきましょう。
１．「基本エリア設定」→「header以下のエリア」の順にクリック。
２．デフォルトはクリアになっているので、色を選択します。
これで手順は完了です。
ヘッダー画像エリアのみにYouTube動画を流すことができたはずです。
もしうまくいかない場合はコメント欄より連絡ください。
