モバイルボタンの背景色、文字色を変更する方法

はじめに

フォーラムでも多数見受けられる同様の質問について、以下の質問に回答します。

モバイルのヘッダーの文字色と背景色の色変更について

こんんいちわ、Joujiともうします。 モバイルヘッダーの文字色と背景色はどうやって変更すればよろしいでしょうか？ 一番上のところをキャッチコピー部分と同じ色にしてロゴ、メニューアイコン、虫眼鏡アイコンをそれぞれ城にしたいのですができますで...

wp-cocoon.com

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下のコードをstyle.cssに追加します。

配色は一例ですので、各自の好みに合わせて変更してください。

/* モバイルヘッダーボタン */
.mobile-header-menu-buttons {
  background-color: yellow;

  .menu-icon,
  .menu-caption {
    color: red;
  }
}

/* モバイルフッターボタン */
.mobile-footer-menu-buttons {
  background-color: green;

  .menu-icon,
  .menu-caption {
    color: white;
  }
}

/* モバイルサイト名 */
.mobile-header-menu-buttons,
.mobile-footer-menu-buttons {
  .logo-menu-button > a {
    color: blue;
  }
}

さいごに

今回紹介した方法を使えば、モバイルのヘッダーやフッターのボタン背景色、文字色を簡単に変更できます。
自分のサイトに合わせて配色をカスタマイズし、見た目を改善してみてください。