【WordPress】【JIN】ヘッダーの検索バーに外枠を付けるCSSカスタマイズ

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

今回は、ヘッダーの検索バーに外枠を付けるCSSカスタマイズをご紹介します。

検索バーは、パソコン・スマホともにヘッダーの部分に設置されています。ウィジェットでサイドバーに検索バーを追加することもできますが、ここでは、ヘッダーに設置してあるマウスで選択すると伸びる検索バーに外枠を付けてみましょう。

Before	After

※外枠の色を分かりやすくするために例として青色を使用しています。

WordPress有料テーマ【JIN】を使っている方向けの記事です。

ヘッダーの検索バーの設定方法
ヘッダーの検索バーに外枠を付けるCSSカスタマイズ
- コード
- 説明
編集後記

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

ヘッダーの検索バーの設定方法は、下記の記事を参考にしてください。

【WordPress】【JIN】スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズをご紹介します。...

ヘッダーの検索バーに外枠を付けるCSSカスタマイズ

ヘッダーの検索バーは外枠がついていないため、マウスで選択したときに背景（ヘッダーの背景色）が白だと、検索バーの入力範囲が分かりづらくなります。そこで、ヘッダーの背景色に白を使いたい場合などに、このカスタマイズがオススメです！

では、CSSにコードを追加して、ヘッダーの検索バーに外枠を付けるカスタマイズをしてみましょう。

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

CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加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 薄いグレー。お好みでカラーコードを変えてください。