・アフィンガーのカスタマイズから設定できないみたいだけどどうやればできるの？
このような悩みにお答えします。
アフィンガーユーザーのブログを見ていると、ヘッダー部分に影を挿入しているブログを見たことがあるかと思います。
影を挿入するだけでもブログの印象って全然違って一気にオシャレに見えるんですよね！
影（シャドウ）は通常の設定では挿入できず、CSSを書き加える必要があります。
そこで今回はアフィンガー５のヘッダー部分に影を入れる方法をご紹介していきます。
PC表示では以下のような感じ。
モバイルでは以下のように表示されますよ。
毎回恒例ですが、CSSをイジるので念のためバックアップは取っておきましょうね！
-
-
【専門知識不要】WordPressでのバックアップの取り方とUpdraftPlusの使い方
続きを見る
CSSを書く前に設定を確認
それではCSSを紹介する前にするべき設定だけ先に確認しておきます。
①PC画面での設定
「WordPress管理画面」→「AFFINGER5管理」→「メニュー」→「PC用グローバルメニュー」
以上の手順で影を付けるためのメニュー設定をしていきます。
- PC用メインメニューを表示しない
- 旧式のナビを使用する
- ヘッダー用メニュー（横列）を有効化
設定画面に移ったら以上の３点にチェックを入れましょう！
これでアフィンガーの旧式グローバルメニューが表示されるようになり、影を付ける前段階が終了です。
ちなみに以下がアフィンガーの初期設定時（新式）のグローバルメニューです。
こちらでも影を付けることができると思いますが、デザイン的にカッコ悪いので僕はNOJIさんのブログを参考にして旧式のメニューにて設定しています。
②モバイル画面での設定
「WordPress管理画面」→「外観」→「カスタマイズ」→「ロゴ画像」→「モバイル用ロゴ画像」
上手順の通り、モバイル用ロゴ画像にチェックを入れましょう。
ここにチェックを入れないとブログタイトルが下にはみ出して表示されカッコ悪くなります。
それでは次から本題の影を追加するCSSを紹介します。
ヘッダーに影を付けるCSSコード
「WordPress管理画面」→「外観」→「テーマエディター」→「子テーマ（Childシート）」
以上の手順で子テーマにCSSを導入します。
PCヘッダーのCSSは以下になります。
#headbox-bg {
box-shadow: 0 5px 15px -15px rgba(0,0,0,.9);
}
モバイルヘッダーのCSSは以下です。
@media print, screen and (max-width: 599px){
#s-navi dt {
box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
}
上記をそのままコピーしてテーマエディターにペーストすればヘッダー下部に影が付きます！
CSSが上手く反映されない場合はキャッシュを削除して更新してみて下さい。
おまけ：ヘッダーの高さを調整するCSSコード（モバイルのみ）
モバイルヘッダーの高さは初期設定では少し狭いと思います。
そこでヘッダーの高さを調整するCSSも一緒に紹介しておきますね！
CSSは以下になります。
#s-navi dt.trigger {
height: 55px;
}
高さの調節は『height:~~px;』の数値を変えることで調節できます！
あまり広くとってもバランスが崩れて見栄えがよくありませんのでちょうど良いサイズ感に合わせてみて下さい。
影を付けるCSSの紹介まとめ
いかがでしたか？
ヘッダーに影を付けるだけでサイトの雰囲気が一気にオシャレになって印象が変わると思います。
CSSをコピペするだけなので皆さんもやってみて下さいね！