【Diver】『絞り込み検索』ボタンの色の変更方法｜誰でもできるCSS変更

2020.06.22 2020.06.22

WordPressテーマ-Diver(ダイバー)での『絞り込み検索ボタンの色の変え方』を紹介します。

カエル

Diverの使い方を紹介するよ

2020年6月9日(バージョン4.6.9)のアップデートでダイバーの絞り込み検索機能が追加されました。

追加されたのに、検索ボタンの色が変わらなくてサイトに組み込めないと悩んでいる方もいるようです。

そこで今回は絞り込み検索ボタンの色の変更方法を解説してきます。

ブログになじむ検索ボタンになるので、サイトに浮くことなく表示をすることが可能です。

絞り込み検索ボタンの色を変更するためには

Diverではトップページやサイドバーの色は設定画面から簡単に変えることができますが、検索ボタンに関しては設定画面から変更ができません。現時点バージョン: 4.6.9

Diverでは、カスタマイズより基本的な色は変更することが可能ですが、細かい箇所に関してはCSSで調整する必要があります。

Diver公式

検索ボタンは細かい個所に該当し、自分で変更する必要があるとのことでした。

そこで今回は、誰でもできるCSSの書き換え方を紹介しているのですぐにできますよ。

補足

『通常検索ボタンの色』の変え方がわからないで困っている方はこちらもご覧ください。

追加CSSのページから「今回紹介するコード」を貼り付け、変更したい色のカラーコードに書き換えるだけです。

それでは簡単に説明をしてきますね。

WordPressの編集画面から

『外観』→『カスタマイズ』をクリックします。

『追加CSS』をクリック

ここでコードを書き換える画面になります。

以下のコードをコピーして、CSS追加のコードを記載する場所に貼り付けてください。

POINT

この『#3c82ff』のカラーコードを変更することで自分の好きな検索ボタンに変更ができますよ。

/* ================================
絞り込み検索ボタンの色
================================ */

button.search-widget__submit {
    background: #3c82ff;
}

実際の画面はこんな感じです。

自分の変更したいカラーコードに変更したら『公開』をクリック

確認をしましょう。

コードの貼り付けミスなどがあると反映していないことがあります。

自分の思うカラーになっていたらOKです。

カエル

お疲れ様でした～

絞り込み検索ボタンの変更は設定画面からは行えませんが、CSSにコードを記入するだけで簡単に変更できます。

絞り込み機能はユーザーにとってストレスなく見たい記事を探せるので設定をしておく価値は十分あります。

Diverに関する記事は他にもあるので良かったら見てください。

また、SEOに関する記事も書いてあるので合わせてどうぞ。