こんにちは。今日はWordPressのSWELLテーマに備わっているモバイル固定フッターを、一個ずつ背景の色分けをするためのCSSを紹介します。
お客様から依頼がありましたので、自分がやったことをここに残します。
目次
デフォルトでは全て同じ色になる
カスタマイザーから固定フッターの背景色、文字色は指定できますが、一個ずつ変更することは出来ませんので、CSSで調整していきます。
さっそく以下にカスタマイズ用のコードを記載しますので、コピーしてカスタマイズ→追加CSSの欄など，ご自分のサイトの方に貼り付けてください。
CSS
/*固定フッターSP*/
#fix_bottom_menu .menu_list{
overflow: hidden;
}
/*ボタンのリンク判定幅調整*/
#fix_bottom_menu .menu-item a{
padding: 10% 0;
}
/*２つ目のボタンの背景色*/
#fix_bottom_menu .menu-item:nth-child(2) a{
background: #666666;
}
/*3つ目のボタンの背景色*/
#fix_bottom_menu .menu-item:nth-child(3) a{
background: #EEEEEE;
}ボタンが３つある状態をサンプルにしています。1個目のボタンの色はカスタマイザーから設定した色で、2個目以降をCSSで色変えをおこなっています。
これでパッと見てボタンごとに色が変わり、顧客の求めている行動に誘導しやすくなりました。
4つ目、5つ目…と、ボタンを増やしたい場合は、/*２つ目のボタンの背景色*/のコードをコピーして、nth-child(○)の数字とカラーコードを変更してください。
これで作業は完了です。ぜひお試しください。