こんにちは😀広瀬ユキです。
今回は、スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズをご紹介します。
CSSにコードを追加して、スマホの検索バーのアイコンの色をカスタマイズしてみましょう❗

WordPress有料テーマ【JIN】を使っている方向けの記事です。
ヘッダーの検索バーの設定方法
まず、ヘッダーの検索バーの表示・非表示の設定方法をご紹介します。
- WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
- 画面左の「ヘッダー設定」を開きます
- 「ヘッダー全体の表示選択」と「検索ボックスの表示選択」の表示にチェックを入れます
- 画面上部の「公開」を押します
ヘッダーの検索バーの設定ができました‼
ヘッダーに検索バーが表示されていることを確認してください。この設定は、パソコンのヘッダーとスマホのヘッダーの両方とも検索バーが表示されるようになります。
スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズ
では、CSSにコードを追加して、スマホのヘッダーの検索バーのアイコンの色をカスタマイズしてみましょう。
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。
CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法:2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法:2種類について書きました。【追加CSS】...
コード
/*---検索バーのアイコン---*/
@media (max-width: 767px)/*スマホの画面上*/ {
.headsearch .search-box:before {
color: #aaa ;/*色*/
}}
/*---検索バーのアイコン---*/
/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
@media (max-width: 767px) {
.headsearch .search-box:before {
color: #aaa ;
}}
説明
- #aaaには、お好みのカラーコードを入れてください。
- デフォルト(初期設定)では、検索バーのアイコンの色はタイトルの文字色と連動しています。
- 上記のCSSコードでは、パソコンの画面上では検索バーのアイコンの色は変わらず、スマホの画面上のみ検索バーのアイコンの色を変えることができます。
- パソコンの画面上の検索バーの色は、「外観」→「カスタマイズ」→「カラー設定」→「SNSボタンの色」から変更できます。

スマホのヘッダーの検索バーのアイコンの色を変えることができました‼
編集後記
スマホの画面上の場合のみ検索バーのアイコンの色を変えたい場合に使えるCSSカスタマイズです。

【WordPress】【JIN】パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズ【WordPress】【JIN】パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズをご紹介します。...

【WordPress】【JIN】コンテンツマガジンの色を変えるCSSカスタマイズ【WordPress】【JIN】コンテンツマガジンのタブの色を変える方法をご紹介します。...
https://yuki-hirose.com/wordpress-jin-headsearch-icon/