MENU
カゲオ
管理人
陰ながらサイト運営を応援するブログ「カゲサイ」の管理人です。
WordPressやブログについてかゆいところに手が届く解説を心がけています。
→運営者情報をみる

WordPress

カスタマイズ
プラグイン
初期設定
エラー対処法
便利ツール
有料記事

その他

姉妹サイト
新着記事

新着記事をみる
もっと見る
人気記事をみる
もっと見る

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

サイトをみてみる
サブブログ｜デスク環境構築サイト運営中⇒見てみる

HTML検索フォームのデザイン解説｜おしゃれなCSSサンプル10選

カスタマイズ
HTML/CSS 検索フォーム
当ページのリンクには広告が含まれています。
検索フォームデザイン

当記事では、オリジナル検索フォームの作り方(HTMLコード)の解説とCSSデザインしたサンプルフォームを10個作成しました。

どれもコピペで使えます。
フォームのHTML解説が不要な方は目次を活用してください。

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる
目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

検索フォームのHTMLコード解説

まずそれぞれにオリジナルのidを付けましょう。
idを付けることで、テーマ内にもともとある他のformコードと差別化します。
※.classでも構いません。

<form id="form1" method="get" action="自分のサイトURL">
<input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn1" type="submit" value="検索" />
</form>

form1：検索フォーム全体に対するid
自分のサイトURL：https://〇〇まで。
sbox1：入力欄のid
キーワードを入力：プレースホルダーの文言
不要であればplaceholder="〇〇"を削除してください。
sbtn1：検索ボタンのid

検索フォームコード解説

HTML5から入力欄のtypeはsearchに変更されましたが、当記事ではtextを使用しています。
最近WordPressテーマは、もともとsearchにデザインが指定されている場合もあるため、カスタマイズするにはtextの方がやりやすいためです。
ユーザーには関係ありませんので、どちらを使用しても構いません。

<form method="get" action="https://kagesai.net">
<input name="s" type="text" placeholder="キーワードを入力">
<input type="submit" value="検索"></form>

例えば、当サイトで何も指定せず3行に分けて書くと以下のようなデザインになります。
※.テーマによって違いはありますので参考まで。

<form method="get" action="https://kagesai.net">
<input name="s" type="text" placeholder="キーワードを入力"><input type="submit" value="検索"></form>

続いて、input同士を繋げて書くと”検索ボックス“と”検索ボタン“が連結します。

ほとんど出来上がっていますね。
そのほか細かいところを含め、は非常に優秀なテーマですので、気になる方はデモサイトを御覧ください。

カゲオ

前のテーマSANGOも良かったんだけど、ついにこのサイトも乗り換えてしまった…。

→詳細はこちら

検索フォームのCSSデザイン4パターン

ここからコピペで使えるコードを載せています。
一応どのテーマでも使用できるよう0からデザインしてあります。

実際に当サイト内を検索できるようにもしていますので、挙動も合わせてお試しください。

CSSのカスタマイズコードは、子テーマのstyle.cssに貼り付けるのがおすすめです。

あわせて読みたい
Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説
WordPressのstyle.css設定

横並びデザイン

<form id="form1" action="自分のサイトURL">
<input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn1" type="submit" value="検索" />
</form>
/*フォーム全体を中央へ*/
#form1{
  display: flex;
  justify-content: center; /*中央へ固定*/	
  height:50px;/*高さ*/	
}
/*入力フォーム*/
#sbox1{
  width:250px;/*横幅*/
  padding:0 15px;/*プレースホルダーの位置調整*/
  border-radius:4px 0 0 4px;/*左側の角を少し丸める*/		
  background:#eee;/*検背景カラー*/
  border:none;/*枠線を消す*/ 
  outline:0;/*クリック時の青い枠線消す*/	
}
/*検索ボタン*/
#sbtn1{
  width:70px;/*横幅*/ 
  border-radius:0 4px 4px 0;/*右側の角を少し丸める*/ 
  background:#7fbfff;/*背景カラー*/ 
  border:none;/*枠線を消す*/ 
  color:#fff;/*テキストカラー*/ 
  font-size:16px;/*フォントサイズ指定*/ 
  cursor: pointer;/*マウスを乗せると指差しポインターになる*/
}
/*検索ボタンマウスオーバー時*/
#sbtn1:hover {
  background: #92dbff;/*背景カラー変更*/
}

全体の幅の調整方法

入力フォーム：width:250px;
検索ボタン：width:70px;
の値を変更して下さい。

四隅の角を丸くしたい

入力フォーム左側上下：border-radius:25px 0 0 25px;
検索ボタン右側上下：border-radius:0 25px 25px 0;
のように値を上げてください。

入力フォームと検索ボタンを離したい

#sbox1にmargin-right:10px;を追加してください。
その際は、角の丸みもなくした方がキレイなので、#sbox1,#sbtn1ともにborder-radius:0;を指定しましょう。

入力フォームと検索ボタンを離した状態で丸みをもたせる

離した状態で入力フォームと検索ボタンの両方に丸みを持たせたいなら、#sbox1、#sbtn1ともにborder-radius:10px;前後を指定しておくと良いでしょう。

入力フォームクリック時の青い枠線の解説

入力欄をクリックしてみてください。

当サイトサンプルはすべて消しています。
枠線を残したい場合は、入力フォームのoutline:0;を削除してください。

横並びで検索ボタンに虫眼鏡アイコンを設置する

アイコンは、Font Awesomeバージョン6以降のものを使用しています。
バージョン5以前とはコードが違うので、ご注意ください。
アイコンを使用するには、以下のコードをheadタグ内に設置しましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

もしくはfunctions.phpに以下を追記してください。

function enqueue_scripts(){
	wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');
<form id="form1" action="自分のサイトURL">
<input id="sbox1" name="s" type="text" placeholder="キーワードを入力" />
<button id="sbtn2" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
/*フォーム全体を中央へ*/
#form1{
  display: flex;
  justify-content: center; 	
  height:50px;
}
/*入力フォーム*/
#sbox1{
  width:250px;
  padding:0 15px;
  border-radius:4px 0 0 4px;
  background:#eee;
  border:none;
  outline:0;
}
/*検索ボタン*/
#sbtn2{
  width:50px;
  border-radius:0 4px 4px 0;
  background:#7fbfff;
  border:none;
  color:#fff;
  font-size:18px;
  cursor: pointer;
}
#sbtn2:hover{
background: #92dbff;/
}

虫眼鏡アイコンをキレイに設置するには、検索ボタンの横幅：widthと高さ：heightを揃える必要があります。
その他のコードは先ほどと同じです。

→詳細はこちら

ちなみに当サイトテーマでは、Font Awesomeを読み込める機能がデフォルであります。

入力フォーム枠線+虫眼鏡アイコン

<form id="form1" action="自分のサイトURL">
<input id="sbox2" name="s" type="text" placeholder="キーワードを入力" />
<button id="sbtn2" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
/*フォーム全体を中央へ*/
#form1{
  display: flex;
  justify-content: center; 	
  height:50px;
}
/*入力フォーム*/
#sbox2{
  width:250px;
  padding:0 15px;
  border-radius:4px 0 0 4px;
  background: transparent;/*背景カラー透明*/
  border:2px solid #7fbfff;/*枠線の指定*/
  border-right: none;/*枠線の右側だけ削除*/
  outline:0;
}
/*検索ボタン*/
#sbtn2{
  width:50px;
  border-radius:0 4px 4px 0;
  background:#7fbfff;
  border:none;
  color:#fff;
  font-size:18px;
  cursor: pointer;
}
#sbtn2:hover{
background: #92dbff;/
}

枠線の検索フォームを作る方法はいくつかあります。
当サイトサンプルでは、他のフォームとの兼ね合いも見て、入力フォームの”背景透明“”枠線指定“”右線削除“の3つを指定しました。

入力フォームと虫眼鏡アイコンだけのデザイン

<form method="get" id="form1" action="自分のサイトURL">
<input id="sbox1" name="s" type="text" placeholder="キーワードを入力">
<button id="sbtn3" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
/*フォーム全体を中央へ*/
#form1{
  display: flex;
  justify-content: center; 	
  height:50px;
}
/*入力フォーム*/
#sbox1{
  width:250px;
  padding:0 15px;
  border-radius:4px 0 0 4px;
  background:#eee;
  border:none;
  outline:0;
}
/*検索ボタン*/
#sbtn3{
  width:50px;
  border-radius:0 4px 4px 0;
  background:#eee;
  border:none;
  color:#666;
  font-size:18px;
  cursor: pointer;
}
#sbtn3:hover{
background: #7fbfff;
color:#fff;
}

入力フォームと検索ボタンの背景カラーbackground:#eee;を同色にすると、フォームが一体化しているように見えます。

枠線の中に虫眼鏡アイコン

<form method="get" id="form2" action="自分のサイトURL">
<input id="sbox3" name="s" type="text" placeholder="キーワードを入力">
<button id="sbtn4" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>
/*フォーム全体*/
#form2{
  display: flex;
  justify-content: center; 	
  border: solid 2px #666;
  max-width: 300px;
  height:50px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  }
/*入力フォーム*/
#sbox3{ 
  width:240px ;
  padding: 0 15px;
  border-radius: initial;
  background:transparent;
  border:none;
  outline:0;
}
/*検索ボタン*/
#sbtn4{
  width: 50px;
  background:transparent;
  border-radius: initial;
  border:none;
  color:#666;
  font-size:18px;
  cursor: pointer;
}
#sbtn4:hover{
background: #7fbfff;
color:#fff;
}

枠線と虫眼鏡アイコンだけの場合は、なるべくフォーム全体側で指定してあげるとコードが少なくて済ます。
フォーム枠線のカラーborder: solid 2px #666;
虫眼鏡アイコンカラーcolor:#666;
を揃えてあげるとキレイに仕上がります。

虫眼鏡アイコンを左側にしたい

<form method="get" id="form1" action="自分のサイトURL">
<button id="sbtn4" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
<input id="sbox3" name="s" type="text" placeholder="キーワードを入力">
</form>

虫眼鏡アイコンを左側にするには、HTMLの<input>と<button>タグの順番を入れ替えます。
ただしそのままだと、プレースホルダーの余白が不格好なので、整えていきましょう。

入力フォーム#sbox3にpadding:0;を指定すれば、見栄えが良くなります。

<form method="get" id="form1" action="自分のサイトURL">
<button id="sbtn3" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
<input id="sbox1" name="s" type="text" placeholder="キーワードを入力">
</form>

枠線なしの場合は、プレースホルダーの余白に加え、角丸指定を左右逆にする必要があります。

入力フォーム#sbox1にpadding:0;とborder-radius:0 4px 4px 0;を指定。
検索ボタン#sbtn3はborder-radius:4px 0 0 4px;に変更してください。

上下2段構造にするデザイン

<form method="get" id="form1" action="自分のサイトURL">
<input id="sbox1" name="s" type="text">
<button id="sbtn3" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</form>

HTMLは、入力フォーム＋虫眼鏡アイコン一体型と同じものを使用しています。
※.プレースホルダーは設定していません。

/*フォーム全体を中央へ*/
#form1{
  display: flex;
  justify-content: center; 	
  position: relative; /*位置決め*/
  margin-top: 30px; /*フォームの上に余白*/
  	
}
/*フォーム上テキスト*/
#form1::before {
  position: absolute;
  content: "検索フォーム";
  font-size: 15px;
  background: #7fbfff;
  color: #fff;
  width: 300px;
  border-radius: 4px 4px 0 0;
  text-align: center;
  top: -25px;
}
/*入力フォーム*/
#sbox1{
  width:250px;
  height:50px;
  padding:0 15px;
  border-radius:0 0 0 4px;
  background:#eee;
  border:none;
  outline:0;
}
/*検索ボタン*/
#sbtn3{
  width:50px;
  height:50px;
  border-radius:0 0 4px 0;
  background:#eee;
  border:none;
  color:#7fbfff;
  font-size:18px;
  cursor: pointer;
}

フォーム上テキストにて、フォーム上部の要素を指定しています。
横幅を調整するときは
#form1::beforeの幅width
#sbox1,#sbtn3の幅widthの合計値を合わせてください。

検索フォームで使えるFont Awesomeの無料虫眼鏡アイコン7つ

バージョン6.5.1以降

アイコンコード表示アイコン
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-brands fa-searchengin"></i>
<i class="fa-solid fa-magnifying-glass-plus"></i>
<i class="fa-solid fa-magnifying-glass-minus"></i>
<i class="fa-solid fa-magnifying-glass-location"></i>
<i class="fa-solid fa-magnifying-glass-dollar"></i>
<i class="fa-solid fa-magnifying-glass-arrow-right"></i>

2024年3月時点では、上記7つが無料で使用できます。
すべて商用利用も可能なため、お好みで使い分けでください。

Font Awesomeを使ったSNSボタンもおすすめ

SNSボタンデザインCSSサンプル25

Font Awesomeは、自作のSNSボタンにも使えます。
以下の記事では、合計32パターンの様々なSNSボタンを作成しました。
プロフィールやサイドバーなどに実装できます。

あわせて読みたい
HTMLとCSSで作る｜15種類のSNSアイコンボタン18選

結論：検索フォームはユーザーが一目でわかるデザインしよう

以上、検索フォームの作り方を解説しました。
最近のWordPressテーマは最初から実装されていますので、自分で作る機会はそんなにないかもしれません。

ただ、作り方を覚えておけば、サイト内の好きな箇所に設置できます。
個人的にヘッダーの検索フォームは必須と考えていますので、テーマに実装されていない方は試してみてください。

カスタマイズ
HTML/CSS 検索フォーム
検索フォームデザイン

この記事が気に入ったら
フォローしてね！

シェアしていただけると励みになります
  • URLをコピーしました！

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

  1. HOME
  2. WordPress
  3. カスタマイズ
  4. HTML検索フォームのデザイン解説｜おしゃれなCSSサンプル10選
目次