【AFFINGER6】ヘッダーに背景画像を設定する

2025-01-21

AFFINGER6のヘッダーに背景画像を設定してカッコイイ見た目にしたい！
と思ったことはありませんか？

AFFINGERはヘッダー画像のカスタマイズが分かりにくいという難点を抱えています。
この記事でしっかり説明していきますよ！

「ヘッダー画像」ではない…

よくある間違いですが、AFFINGER6においての”ヘッダーの背景画像”は「ヘッダー画像」エリアとは異なります。

「外観＞カスタマイズ＞ヘッダー画像」で設定した画像は、メニューとメインコンテンツの間に画像が表示され、メインビジュアルのような扱いとなります。

「外観＞カスタマイズ＞ヘッダー画像」はメインビジュアルの画像であって、ヘッダー画像ではない。

AFFINGER6では、ヘッダーの画像は基本設定エリアから設定していきますが、メニューも透過するかどうかで設定箇所は変わってきます。

「外観＞カスタマイズ＞背景＞ headerエリア」で設定した画像がヘッダー部分に表示されます。

画像サイズは、この後の設定に依存するため、推奨サイズはありません。
トライアンドエラーを繰り返して各自調整してみましょう。

ヘッダー画像は「外観＞カスタマイズ＞背景＞ headerエリア」から設定する！

ヘッダーメニューの背景を透過させたい場合は、以下の設定を変更します。
ただしヘッダーメニューを透過すると、メニューの文字は見にくくなります。
背景画像とメニュー文字の相性をしっかり考えなければなりません。

「外観＞カスタマイズ＞ヘッダーナビゲーション」と進むと、”パソコン（PC）”と”スマホ（SP）”がありますが、どちらにも同じように設定します。

「色を選択」ボタンを押下すると、色コード（#●●●のような3桁 or 6桁の英数字）が設定されていることがあります。※事前の設定によります

この色コードを削除した状態で、色コード欄外をクリックすると色がなくなるため透過が反映されます。
これをPC/SP両方に設定します。

これは任意ですが、背景画像によってはヘッダーメニューが目立たなくなります。
そこで、枠線の色を変えることでメニューを少し目立たせることができます。

「外観＞カスタマイズ＞メニュー＞ PC ヘッダーメニュー」と進み、ヘッダーメニューの背景色・ボーダー・文字色を変更してみましょう！

ヘッダーの大きさを変更することで、画像とメニューの比率を適切に調整します。

「外観＞カスタマイズ」ではなく、「AFFINGER管理＞ヘッダー」からヘッダーの高さを変更します。
使用した画像やブログの雰囲気などによって適切な高さは異なると思いますので、何度か数値を変えつつ確認してみましょう！

変更	操作箇所
ヘッダー画像（メインビジュアル）の設定	外観＞カスタマイズ＞ヘッダー画像
ヘッダー背景画像の設定	外観＞カスタマイズ＞背景＞ headerエリア
ヘッダーを透明に	外観＞カスタマイズ＞ヘッダーナビゲーション色コード（#●●●）を消去
メニュー背景・枠線を変更	外観＞カスタマイズ＞メニュー＞ PCヘッダーメニュー
ヘッダーの縦サイズを変更	AFFINGER管理＞ヘッダー＞ PCヘッダーの高さ

ヘッダーメニューやサイト名を縁取りすることで、さらに目立たせることも可能です。
縁取り方法は別の記事でご紹介していますので、ぜひこちらもご覧ください！