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