注目度UP！？アフィンガー５でヘッダー全体に画像を表示させる方法

「ヘッダーに画像を表示させたいけれど、なんかうまくいかない…」

カスタマイズをしているとヘッダーがなんか微妙…
ヘッダーエリアは特にこだわりたいものです。

今回はヘッダー全体を画像にしてしまう方法について紹介してみようと思います。

アイナ

ヘッダーは最初に目につくから特にこだわりたいですよね。

ヘッダーエリア全体に画像を表示する方法とは？

アフィンガー５ではヘッダー全体のことを『header』という表現になっています。なのでこのサイトでもそれに合わせることにします。

ヘッダー全体に画像を表示したい場合にはヘッダーで設定した色をすべて透明にする必要があります。

headerエリアの画像はサイトの一番下に表示されるようになっているので、上に表示されている部分をすべて消さなければなりません。

そこではじめにヘッダーエリアとヘッダー画像エリアの設定を消しましょう。

アイナ

ヘッダーエリアとヘッダー画像エリアで設定した画像は前面に表示されているからheaderで設定した画像は隠れてしまうんです。

ヘッダーエリアの設定を消す方法

順番は特に決まっていませんが、とりあえず最初にヘッダーエリアの設定を変更することにします。

操作手順は【カスタマイズ】→【基本エリア設定】→【ヘッダーエリア】の順に選択します。
（基本エリア設定にあるheaderエリアはここでいうヘッダーエリアとは別物とお考えください。）

手順通りに進めていくとヘッダーエリアのカスタマイズができるようになりました。
ここではヘッダーで設定されている色もしくは画像を非表示にします。

画像をクリックすると拡大表示できます

ヘッダーメニューの設定

次にヘッダーメニューを消します。
【カスタマイズ】→【メニューのカラー設定】→【ヘッダーメニュー】の順に選択します。

ヘッダーメニューの位置を変更したい場合は別の方法を使いますが、今回はメニュー自体は残しつつ背景色だけを透明にします。

背景色だけ透明にすると外枠だけが残って不自然になってしまうので、外枠もついでに消してしまいましょう。

『ボーダー上下色』と『ボーダー左右色』のカラーコードを削除すればヘッダーメニューの色が透明にしつつ機能を使うことができますよ。

画像をクリックすると拡大表示できます

公開がうまく行かなかった場合は？

上記の方法通りにやってもうまくいかないことがあります。

サーバーのWAFが有効になっているとこのようなメッセージが表示されることがあるので、一旦WAFを無効にして試してみてください。

ヘッダーエリア画像の設定を消す方法

最後にヘッダーエリア画像の設定を消すことで完了します。
もともとヘッダー画像を設定していないのであればこの手順は飛ばしてもいいでしょう。

【カスタマイズ】→【ヘッダー画像】→【現在のヘッダー】の順に選択します。

現在のヘッダーに指定されているヘッダー画像を非表示することで消すことができます。

アップロードしている画像はそのままにしておいてもいいので、あとでもとに戻したい場合のために残しておくといいでしょう。

このようなヘッダー画像も作れますよ！

ヘッダーの編集は奥が深い

今回はヘッダー全体に画像を表示させる方法を紹介しました。

ヘッダーのカスタマイズはとても奥が深く、いろんな編集をすることができるので、サイトのコンセプトに合わせたヘッダーが作れますが、それだけカスタマイズをするのは難易度が高いです。

はじめのうちは簡単なカスタマイズをしておいて、なれてきてから徐々に挑戦したほうがいいでしょう。