個性あふれるトップページや記事デザインで「読まれるメディア」をつくるWordPressテーマ「VOYAGE」
ワードプレステーマ別

TCDテーマCherie:ヘッダー(ドロワーメニュー時)のボタンの色を変更する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.ヘッダーのボタンの色だけ、アクセントカラーと別の色に変更してより目立たせたいです。

TCD LABO

TCDテーマでは、サイトの統一感を演出するためサイト内の各所にアクセントカラーが適用されます。

▼変更後のイメージ   →変更前:Cherieデモサイト
変更箇所イメージ

A.下記の方法でご対応ください。

TCDテーマ>基本設定のカスタムCSSに入力します。
「color:」「border-color:」で任意のカラーコードを指定します。

/* ボタン1 */
#header_button_list a#header_button1 {
  color: #f79434; border-color: #f79434; }
#header_button_list a#header_button1:hover {
  color: #c56202; border-color: #c56202; } /* ホバー時 */

/* ボタン2 */
#header_button_list a#header_button2 {
  color: #dc8d9c; border-color: #dc8d9c; }
#header_button_list a#header_button2:hover {
  color: #aa5b6a; border-color: #aa5b6a; } /* ホバー時 */

/* ボタン3 */
#header_button_list a#header_button3 {
  color: #87ad17; border-color: #87ad17; }
#header_button_list a#header_button3:hover {
  color: #557b00; border-color: #557b00; } /* ホバー時 */

ホバー時の調整は省略することもできますが、「ホバーしている」と視覚的にわかりやすくするために設定しておくのがおすすめです。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事