こんにちは。SaitoKouです。今回は人気の無料テーマ「Astra」について、少々設定が分かりにくい箇所があったのでメモしていきたいと思います。
透過ヘッダーとは？
Astraでは、サイト全体を通して透過ヘッダーを配置することができます。下の画像が、透過ヘッダーと通常のヘッダーの比較です。
透過ヘッダー（ヘッダーの背景が透けており、写真が見える）
通常ヘッダー（ヘッダーの背景が透けていない）
透過ヘッダーは見た目がかっこよく、しかも無料で設定できるため使っていきたいところですが、どこで設定できるかが分かりにくいです。正しく設定するために、どこを編集するとどう変わるのか理解しておくことが重要です。
1. サイト全体で、すべてのページに適用するかどうかを決定する。
まずは、この透過ヘッダーを「すべてのページで表示」したい場合は、そのように一括で設定する方法があります。
WordPress管理画面 ＞ 外観 ＞ カスタマイズ ＞ ヘッダービルダー ＞ 透過ヘッダー の順にクリックします。すると、透過ヘッダーをカスタマイズできるようになります。ここで、以下の操作を行います。
・最上部にある「サイト全体で有効化」をクリックしてONにします。
・「有効化する」の欄で、「デスクトップとモバイル」を選択します。
これにより、すべてのページで透過ヘッダーが使用されるようになります。
２. 特定のページのみに使用したい場合に、各ページの編集画面で設定する。
この透過ヘッダーは、一部のページのみに表示させるといったことが可能です。筆者は、逆にすべてのページで通常ヘッダーを使用したかったのですが、なぜかトップページだけ常に透過ヘッダーが表示されていたので、ここで困惑していました。
「サイト全体で有効化」をOFFにする。
１．で実施した手順と同じ要領で、透過ヘッダーのカスタマイズ画面に移動します。その後、「サイト全体で有効化」をOFFにします。これで、透過ヘッダーを利用するには個々のページで設定することが必要になりました。
透過ヘッダーを表示したい固定ページで表示設定をする。
「サイト全体で有効化」をOFFにしたら、透過ヘッダーを表示したい固定ページの編集画面へ移動します。編集画面の、右上のAのようなマークをクリックし、Astra特有のサイドバーを表示します。その後、画像のように「高度な設定」をクリックします。
すると、下図のように透過ヘッダーを有効にするかどうかを選択できます。
有効にすれば、そのページで透過ヘッダーを表示させることができます。
まとめ
Astraは無料であるにもかかわらず、機能が豊富で様々なカスタマイズができますが、その分設定項目も多くなり、どの個所を設定すればどうなるのか理解が難しい場合があります。透過ヘッダーはそのうちの一つでしたが、本記事を参考に設定してみてください！
