CSSを追加せずにスマホヘッダーの境界線に影を追加する方法をご紹介します。
簡単にやり方を説明すると、
「適応IDをコピーし、AFFINGER管理のドロップシャドウの項目に貼り付ける」
これだけです。
それでは具体的な手順を解説していきます。
スマホヘッダーに影を追加する方法
１．まずは以下の適応IDをコピーしてください。
#s-navi dtこれがスマホのヘッダー部分の適応IDです。
２．次にWordPressのダッシュボードを開き、「AFFINGER管理」→「全体設定」の順にクリック。
３．「ドロップシャドウ」という項目があるので、その下にある「その他の適応ID及びクラス：」に先ほどコピーした適応ID（#s-navi dt）を貼り付けます。
４．適応IDが間違えていないかを確認し［Save］を押します。
これでスマホヘッダーに影がついているはずです。
影が追加できてない場合
手順通りにやったのに影が追加できていない場合は、カンマが半角になっていない可能性があります。
複数の適応ID及びクラスを追加する場合は、半角カンマで区切る必要があります。
たとえば、スマホヘッダーとマイボックスにドロップシャドウを適応するのであれば、（#s-navi dt,.st-mybox）と入力します。
適応ID及びクラスの間に入れるのは通常「半角カンマ」なんですが、これが全角（#s-navi dt，.st-mybox）になっていると影が反映されません。
必ず半角カンマで区切ってください。
※AFFINGER6で使える適応ID/クラスは以下の記事にまとめています。
影の幅やぼかし強度を変更したい場合
スマホヘッダーの影を追加したのはいいけど、
「もうちょっと影の幅を大きくしたいなぁ」とか、「もう少しぼかしを強くしたいなぁ」と言う場合は、CSSの追加をおすすめします。
追加したCSSの数字を変更することで、影の幅とぼかし強度が自由に変更できますよ。
※CSSを追加する方法は以下を参考にしてください。
