【WordPress】【JIN】スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズをご紹介します。

CSSにコードを追加して、スマホの検索バーのアイコンの色をカスタマイズしてみましょう❗

ヘッダーの検索バーの設定方法

まず、ヘッダーの検索バーの表示・非表示の設定方法をご紹介します。

1. WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
2. 画面左の「ヘッダー設定」を開きます
3. 「ヘッダー全体の表示選択」と「検索ボックスの表示選択」の表示にチェックを入れます
   
4. 画面上部の「公開」を押します

ヘッダーの検索バーの設定ができました‼

ヘッダーに検索バーが表示されていることを確認してください。この設定は、パソコンのヘッダーとスマホのヘッダーの両方とも検索バーが表示されるようになります。

スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズ

では、CSSにコードを追加して、スマホのヘッダーの検索バーのアイコンの色をカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---検索バーのアイコン---*/
@media (max-width: 767px)/*スマホの画面上*/ {
.headsearch .search-box:before {
color: #aaa ;/*色*/
}}
/*---検索バーのアイコン---*/

@media (max-width: 767px) {
.headsearch .search-box:before {
color: #aaa ;
}}

説明

• #aaaには、お好みのカラーコードを入れてください。
• デフォルト（初期設定）では、検索バーのアイコンの色はタイトルの文字色と連動しています。
• 上記のCSSコードでは、パソコンの画面上では検索バーのアイコンの色は変わらず、スマホの画面上のみ検索バーのアイコンの色を変えることができます。
• パソコンの画面上の検索バーの色は、「外観」→「カスタマイズ」→「カラー設定」→「SNSボタンの色」から変更できます。

スマホのヘッダーの検索バーのアイコンの色を変えることができました‼

スマホのハンバーガーメニューのアイコンの色を変えたい場合は、コチラの記事の「方法②CSSにコードを追加してカスタマイズする方法」を参考にしてください↓

【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法：2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...

編集後記

スマホの画面上の場合のみ検索バーのアイコンの色を変えたい場合に使えるCSSカスタマイズです。

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

【WordPress】【JIN】コンテンツマガジンの色を変えるCSSカスタマイズ【WordPress】【JIN】コンテンツマガジンのタブの色を変える方法をご紹介します。...

【WordPress】【JIN】ヘッダーの検索バーのアイコンの下に「SEARCH」の文字を入れる方法【WordPress】有料テーマ【JIN】を使っている方向けに、ヘッダーの検索バーのアイコンの下に「SEARCH」の文字を入れる方法をご紹介します。...