
Diverの検索ボックスは初期設定で青っぽい色(#3C74AC)が指定されていて、この色は設定で変えることができません。
そのため、色を変更したい場合は、カスタマイズが必要です。
このページでは、その検索ボックスの色を変更するカスタマイズについて紹介します。
注意
カスタマイズは自己責任で行ってください。実施前にバックアップをとっておくと安心です。
検索ボタンの色を変更
このサイトでは、検索ボタンの色を赤っぽい色に変更してみました。
コードは次のようになります。
/* 検索アイコンの色 */
input[type="submit"].searchsubmit {
background-color: #EA6635;
}
上の「#EA6635」と書かれたところを、自分の設定したい色に変更すると、好きなように色を変えられます。
カスタマイズ適用手順
変更手順
- カスタマイズ画面を開く
- 追加 CSSを開く
- コードの貼り付ける
まず、下のようなテーマのカスタマイズ画面を開いてください。
画面を開いたら、メニューの中から「追加CSS」をクリックしてください。
追加CSSを開いたら、先ほどのコードを貼り付けて「公開」ボタンをクリックします。
以上で作業は完了です。
実際に画面を確認して検索ボタンの色が変わっていることを確認しましょう。
最後に
今回は、「Diver」で検索ボタンの色を変更するカスタマイズ方法について紹介しました。
また、他にも「Diverでこんなカスタマイズしたいんだけど、どうやったらできるの?」といった質問があれば、コメント欄に是非コメントしてください。
できそうな内容でしたら、まずは自分のサイトで試しにカスタマイズを行い、その方法を別途公開します。