PR スマホ設定

【CSS不要】スマホヘッダーに影を追加する方法

CSSを追加せずにスマホヘッダーの境界線に影を追加する方法をご紹介します。

簡単にやり方を説明すると、

「適応IDをコピーし、AFFINGER管理のドロップシャドウの項目に貼り付ける」

これだけです。

それでは具体的な手順を解説していきます。

スマホヘッダーに影を追加する方法

手順

1.まずは以下の適応IDをコピーしてください。

#s-navi dt

これがスマホのヘッダー部分の適応IDです。

2.次にWordPressのダッシュボードを開き、「AFFINGER管理」→「全体設定」の順にクリック。

3.「ドロップシャドウ」という項目があるので、その下にある「その他の適応ID及びクラス:」に先ほどコピーした適応ID(#s-navi dt)を貼り付けます。

4.適応IDが間違えていないかを確認し[Save]を押します。

これでスマホヘッダーに影がついているはずです。

PCのヘッダーにも影を付けたい!

参考記事

影が追加できてない場合

手順通りにやったのに影が追加できていない場合は、カンマが半角になっていない可能性があります。

複数の適応ID及びクラスを追加する場合は、半角カンマで区切る必要があります。

たとえば、スマホヘッダーとマイボックスにドロップシャドウを適応するのであれば、(#s-navi dt,.st-mybox)と入力します。

適応ID及びクラスの間に入れるのは通常「半角カンマ」なんですが、これが全角(#s-navi dt.st-mybox)になっていると影が反映されません。

必ず半角カンマで区切ってください。

※AFFINGER6で使える適応ID/クラスは以下の記事にまとめています。

影の幅やぼかし強度を変更したい場合

スマホヘッダーの影を追加したのはいいけど、

「もうちょっと影の幅を大きくしたいなぁ」とか、「もう少しぼかしを強くしたいなぁ」と言う場合は、CSSの追加をおすすめします。

追加したCSSの数字を変更することで、影の幅とぼかし強度が自由に変更できますよ。

※CSSを追加する方法は以下を参考にしてください。

参考記事

-スマホ設定
-,

PAGE TOP