こんにちは😀広瀬ユキです。
今回は、ヘッダーの検索バーに外枠を付けるCSSカスタマイズをご紹介します。
検索バーは、パソコン・スマホともにヘッダーの部分に設置されています。ウィジェットでサイドバーに検索バーを追加することもできますが、ここでは、ヘッダーに設置してあるマウスで選択すると伸びる検索バーに外枠を付けてみましょう。
Before | After |
![]() | ![]() |
※外枠の色を分かりやすくするために例として青色を使用しています。
WordPress有料テーマ【JIN】を使っている方向けの記事です。
ヘッダーの検索バーの設定方法
ヘッダーの検索バーの設定方法は、下記の記事を参考にしてください。

ヘッダーの検索バーに外枠を付けるCSSカスタマイズ
ヘッダーの検索バーは外枠がついていないため、マウスで選択したときに背景(ヘッダーの背景色)が白だと、検索バーの入力範囲が分かりづらくなります。そこで、ヘッダーの背景色に白を使いたい場合などに、このカスタマイズがオススメです!
では、CSSにコードを追加して、ヘッダーの検索バーに外枠を付けるカスタマイズをしてみましょう。
CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

コード
/*---ヘッダーの検索バー---*/
/*パソコン*/
#headmenu .headsearch .search-text:focus {
border: solid 1px #ddd ;/*外枠の種類と太さと色*/
}
/*スマホ*/
input[type="search"]:focus {
border: solid 1px #ddd ;/*外枠の太さと種類と色*/
}
/*---ヘッダーの検索バー---*/
/* */ で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】
#headmenu .headsearch .search-text:focus {
border: solid 1px #ddd ;
}
input[type="search"]:focus {
border: solid 1px #ddd ;
}
説明
- #headmenu .headsearch .search-text:focus → パソコン用
- input[type=”search”]:focus → スマホ用
border: solid 1px #ddd; → フッターに検索バーを設置したときと同じCSSコードになっています。
border | solid 外枠の種類。お好みで種類を変えてください。 |
1px 線の太さ。お好みで数値を変えてください。 | |
#ddd 薄いグレー。お好みでカラーコードを変えてください。 |
- パソコンとスマホでそれぞれCSSコードが違いますので、ご注意ください。
- Before&Afterの画像は、分かりやすくするために青色を使用しました。
ヘッダーの検索バーに外枠を付けることができました‼
編集後記
「外観」→「カスタマイズ」→「カラー設定」→「ヘッダーの背景色」を白や薄い色に設定したい場合に、個人的にオススメなCSSカスタマイズです。
https://yuki-hirose.com/wordpress-jin-headsearch-icon/
https://yuki-hirose.com/wordpress-jin-hamburger-menu-icon/
