JINカスタマイズ

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

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

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

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

BeforeAfter

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

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

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

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

【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コードになっています。

bordersolid
外枠の種類。お好みで種類を変えてください。
1px
線の太さ。お好みで数値を変えてください。
#ddd
薄いグレー。お好みでカラーコードを変えてください。
  • パソコンとスマホでそれぞれCSSコードが違いますので、ご注意ください。
  • Before&Afterの画像は、分かりやすくするために青色を使用しました。

ヘッダーの検索バーに外枠を付けることができました‼

編集後記

「外観」→「カスタマイズ」→「カラー設定」→「ヘッダーの背景色」を白や薄い色に設定したい場合に、個人的にオススメなCSSカスタマイズです。

https://yuki-hirose.com/wordpress-jin-headsearch-icon/

https://yuki-hirose.com/wordpress-jin-hamburger-menu-icon/

【WordPress】【JIN】サイトタイトルの色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】を使っている方向けに、サイトタイトルの色を変えるCSSカスタマイズについて書きました。☆オススメ☆...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ