【プチカスタマイズ】WordPressテーマ「Diver」の検索ボタンの色を変更する方法

Diverの検索ボックスは初期設定で青っぽい色(#3C74AC)が指定されていて、この色は設定で変えることができません。

そのため、色を変更したい場合は、カスタマイズが必要です。

このページでは、その検索ボックスの色を変更するカスタマイズについて紹介します。

注意

カスタマイズは自己責任で行ってください。実施前にバックアップをとっておくと安心です。

検索ボタンの色を変更

このサイトでは、検索ボタンの色を赤っぽい色に変更してみました。

コードは次のようになります。

/* 検索アイコンの色 */
input[type="submit"].searchsubmit {
 	background-color: #EA6635;
}

上の「#EA6635」と書かれたところを、自分の設定したい色に変更すると、好きなように色を変えられます。



カスタマイズ適用手順

変更手順
  1. カスタマイズ画面を開く
  2. 追加 CSSを開く
  3. コードの貼り付ける

まず、下のようなテーマのカスタマイズ画面を開いてください。

画面を開いたら、メニューの中から「追加CSS」をクリックしてください。

追加CSSを開いたら、先ほどのコードを貼り付けて「公開」ボタンをクリックします。

以上で作業は完了です。

実際に画面を確認して検索ボタンの色が変わっていることを確認しましょう。

最後に

今回は、「Diver」で検索ボタンの色を変更するカスタマイズ方法について紹介しました。

また、他にも「Diverでこんなカスタマイズしたいんだけど、どうやったらできるの?」といった質問があれば、コメント欄に是非コメントしてください。

できそうな内容でしたら、まずは自分のサイトで試しにカスタマイズを行い、その方法を別途公開します。

スポンサーリンク
コメント一覧
  1. アバター 齋藤信子 より:

    こんにちは。初めてメールさせていただきます。齋藤信子と申します。

    DIVERを使っているのですが、JUNさんや他の方がよくなさっているように、検索ボックスを移動させて、ヘッダー部分に可愛い虫眼鏡で表示させたいと思っています。
    色々やっているのですが、初心者なもので、まだその方法が見つかりません。
    ご教示頂けたら幸いです。よろしくお願いいたします。

    Nobuko Saito

    • Jun Jun より:

      斉藤様
      お問い合わせありがとうございます。

      ヘッダー部分に虫眼鏡アイコンを表示させるのは、「スマホ」で見たときのことでしょうか?
      でしたら、WordPressの管理メニューから「外観」-「ウィジェット」をクリックしてください。

      その中に「検索ボックス」という項目があるので、こちらに「利用できるウィジェット」からお好きなものを設定すれば表示されます。

CAPTCHA