「アフィンガーはスマホヘッダーの境界線がわかりにくい…」
「SANGOみたいな感じで境界線に影をつけたいな～！」
「影の大きさも変更できないかなぁ…」
という悩みを解決します。
結論からいうと、CSSを追加して数値を変更すれば可能です。
この記事では、
- スマホヘッダーの境界線に影をつける手順
- 影の幅とぼかし強度を変更する方法
この2つを解説していきます。
スマホヘッダーの境界線に影をつける手順
追加するCSSをコピーする
まずは以下のCSSをコピーしてください。
/*スマホヘッダーの境界線に影をつける*/
@media print, screen and (max-width: 599px){
#s-navi dt {
box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
}上のボックス中のすべてのテキストをコピーすればOKです。
カスタマイズを開く
ダッシュボードを開き、「外観」→「カスタマイズ」の順にクリック。
CSSを追加する
カスタマイズメニューの下の方にある「追加CSS」を開き、先ほどコピーしたCSSをここに貼り付けます。
境界線の影の大きさとぼかし具合は以下の画像のようになります。
影の大きさを調整する
CSS内の数字を変更すれば、影の大きさやぼかし具合を調整できます。
「先ほど追加したCSSでは物足りない」
「もっと影の範囲を広げたい」
「ぼかしをもっと大きくしたい」
という場合は、数字を変更してみてください。
変更するのは、box-shadow の行の「3px（赤文字）」と「6px（青文字）」の部分です。
/*スマホヘッダーの境界線に影をつける*/
@media print, screen and (max-width: 599px){
#s-navi dt {
box-shadow: 0 3px 6px rgba(0, 0, 0, .18);
}
}- 3pxの方は「影の幅の大きさ」
- 6pxの方は「ぼかしの強度」
たとえば、以下のように数字を変更すると・・・
- 影の幅を 3px→10px に変更…【左画像】
- ぼかし強度を 6px→20pxに変更…【右画像】
こんな感じで影の大きさが変わります。
どうでしょうか？ なんか微妙ですよね…^^;
結論、影の幅は3px、ぼかし強度は6～10pxの範囲がいい感じになると思います。
どうぞ参考にしてください。
