この記事では、
「PCのヘッダーとメニューの境目がわかりにくい」
「ヘッダーの境界線に影をつけられないかなぁ」
という悩みを解決します。
PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。
やることは ドロップシャドウの設定に適応IDを追加するだけです。
ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。
PCのヘッダーに影をつける方法
AFFINGER6でPCヘッダーに影をつけるのは簡単です。
ドロップシャドウの「その他の適応ID及びクラス」に、PCヘッダーの適応IDを追加するだけ。
それでは手順を詳しく解説していきます。
１．まずは以下の # ではじまる適応IDをコピーしてください。
#headbox-bgこれがPCヘッダーの適応IDです。
２．AFFINGER管理の「全体設定」を開きます。
３．ドロップシャドウの中に「その他の適応ID及びクラス：」という欄があるので、そこに先ほどコピーした適応IDを貼り付けます。
４．適応IDが合っているか確認し［Save］を押して保存します。
問題なくPCヘッダーの境界線に影が追加されました。
あるのと無いのとでは、これくらいの差が出ます。
PCヘッダーの境界線に影が追加されない場合
先ほど手順通りに進めても影が追加されない場合があります。
考えられる原因は、
- カンマが全角になっている
- PCヘッダーメニューに背景色を設定している
この2つです。
カンマが全角になっている
複数の適応ID及びクラスを適応したい場合は「半角カンマ」で区切ります。
たとえば、マイボックス（STINGER専用パーツ）とPCヘッダーの適応IDを一緒に追加するとしましょう。
.st-mybox,#headbox-bg上記のように、マイボックスのCSSクラスとPCヘッダーの適応IDとの間に半角カンマを記入しているのがわかると思います。
これが仮に「全角カンマ」になっている、もしくは「読点（とうてん）」になっていた場合は、正しく適応ID及びクラスを認識できません。
有効なのは、英数字の「半角カンマ」のみです。
必ず英数字の「半角カンマ」で区切りましょう。
PCヘッダーメニューに背景色を設定されている
PCヘッダーメニューに背景色を設定している場合も、PCヘッダーとメニューとの境界線に影が反映されません。
解決策は「背景色をクリアにする」ことです。
手順を解説します。
１．「外観」→「カスタマイズ」→「-各メニュー設定」の順に開きます。
２．「PCヘッダーメニュー」を開き、背景色の「色を選択」をクリック。
色を選択せずに「クリア」を押して保存すれば完了です。
影を反映させた状態でPCヘッダーメニューの背景色を設定する方法
どうしてもPCヘッダーメニューの背景色を設定したい！ という場合は1つだけ方法があります。
それは、基本エリア設定で背景色を変える方法です。
これをすることでPCヘッダーメニュー以外の場所の背景色も変わってしまいます。全体のデザインを考慮して設定してください。
まずは「外観」→「カスタマイズ」を開きます。
①「基本エリア設定」→ ②「背景色」の順にクリックし、 一番上の③「色の選択」で背景色を変更します。
これでPCヘッダーメニューの背景色にも反映されているはずです。
