WordPressカスタマイズまとめ←クリック

【HTML】検索フォームの作り方とオシャレなCSSデザイン6選

検索フォームデザイン

この記事では、オリジナル検索フォームの作り方(HTMLコード)とCSSデザインしたサンプルフォームを6つほど作成しました。

どれもコピペで使えるので、よかったら参考にしてください。

1・検索フォームのHTMLコード注意点

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

まずそれぞれにオリジナルidをつけます。

form1は検索フォーム全体。

sbox1は入力欄

sbtn1は検索ボタン

idを付けないと、CSSでカスタマイズする時にテーマ内にある他のformコードも変更されてしまいます。(コメント用のフォームとか)

自分のサイトURLhttps://〜.comまでです。

placeholderで「検索ボックス内」の文字を変更できます。

valueで「検索ボタン内」の文字を変更できます。

チェック

HTML5では入力欄のtypeは「search」に変更されましたが、この記事ではtextを使用しています。

理由は最近のテーマだと、最初からsearchで検索フォーム用のCSSが指定されているため、カスタマイズがちょっと面倒になるからです。

サーチボックス

※例えば当サイトのテーマ「SANGO」だとtype="search"はPCでは長方形ですが、スマホだと上記のように角が丸く指定されています。(タップすると長方形になる)

type="text"なら以下のように最初から長方形になります。

上記コードをCSSで調整しないと以下のように「検索ボックス」と「検索ボタン」が上下に分かれます。

この辺をCSSで調整していきます。

2・検索フォームの【CSS】6パターン

ここからコピペで使えるコードを載せています。

CSSのカスタマイズは、必ず子テーマのスタイルシート (style.css)を使用してください。

子テーマの使い方はこちら

Cyberduckと子テーマの使い方 Cyberduckの使い方WordPressの子テーマを分かりやすく解説

スタイルシート (style.css)編集

検索ボックスと検索ボタンを繋げたカスタマイズ

検索ボタンをマウスホバー時、テキストカラーが変わる。

HTML
<form id="form1" action="自分のサイトURL">
<input id="sbox"  id="s" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn" type="submit" value="検索" />
</form>
style.css
/*フォーム全体*/
#form1{
position:relative;/*フォームの相対位置*/	
max-width:270px;/*フォームのサイズ*/
margin-bottom:15px;/*フォームの下に余白*/	 	
}
/*検索ボックス*/
#sbox{
position:absolute;/*フォームの絶対位置*/	
left:0;
top:0; 	
outline:0;/*クリック時の青い枠線消す*/	
height:50px;/*検索ボックスの高さ*/	
padding:0 10px;/*テキスト位置調整*/	 
border-radius:2px 0 0 2px;/*検索ボックスの角を丸める*/		
background:#eee;/*検索ボックスの背景カラー*/		
}
/*検索ボタン*/
#sbtn{
width:70px;/*検索ボタンの横幅*/ 
height:50px;/*検索ボタンの縦幅*/ 
position:absolute;/*検索ボタンの絶対位置*/  
left:270px;/*検索ボタンの位置調整*/  
top:0;
border-radius:0 2px 2px 0;/*検索ボタンの角を丸める*/ 
background:#7fbfff;/*検索ボタンの背景カラー*/ 
border:none;/*検索ボタンの枠線を消す*/ 
color:#fff;/*検索ボタンのテキストカラー*/ 
font-weight:bold;/*検索ボタンのテキスト太字*/ 
font-size:16px;/*検索ボタンのフォントサイズ*/ 
}
/*検索ボタンマウスオーバー時*/
#sbtn:hover{
color:#666;/*検索ボタンマウスオーバー時のフォントカラー*/ 
}

検索フォームサイズを調整する場合は#form1内のmax-width#sbtnleftで調整して下さい。

outline:0;は検索フォームをクリックした時に出てくる青い枠線を消しています。

青枠線を残したい場合は、上記コードを消してください。

検索フォームサンプル

以降コードの解説はしませんが、調整する場合は上記を参考にして下さい。

検索ボックスと検索ボタンを離したカスタマイズ

HTML
<form id="form5" action="自分のサイトのURL">
<input id="sbox5"  id="s" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn5" type="submit" value="検索" />
</form>
style.css
#form5{
position:relative; 
margin-bottom:20px;	
}
#sbox5{	
outline:0;	
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
max-width:270px;
border-radius:2px;
background:#eee;
}
#sbtn5{
width:70px;
height:50px;
position:absolute; 
left:280px; 
top:0;
border-radius:2px;
background:#7fbfff;
color:#fff;
font-weight:bold;
font-size:16px;
border:none;
}
#sbtn5:hover{
background:#eee;
color:#7fbfff;
}

検索ボックスのみのカスタマイズ

コードも短いザ・シンプルな検索フォームです。

HTML
<form action="自分のサイトURL" method="get">
<input id="sbox1"  id="s" name="s" type="text" placeholder="検索 …" />
</form>
style.css
#sbox1{
max-width:300px;
height:50px;
border-radius:2px;
outline:0;
margin-bottom:40px;
background:#eee;	
}

検索ボックス内に虫眼鏡アイコンを挿入するカスタマイズ

虫めがねアイコンは「Font Awesome5」を使用しているので、まだ導入していない方は先に準備してください。 導入方法はこちらの記事で書きました。

ストークFont-Awesomeアップデート STORKでFont Awesome 5アップデート後に修正したところ

なお、バージョン4.7.0を使用している方はfas fa-search部分をfa fa-searchに変更して下さい。(以降のアイコンも同様です)

HTML
<form id="form2" action="自分のサイトURL" method="get">
<input id="sbox2"  id="s" name="s" type="text" placeholder="フリーワードを入力"/>
<button type="submit" id="sbtn2"><i class="fas fa-search"></i></button>
</form>
style.css
#form2{
position:relative;
max-width:300px;	
margin-bottom:20px;
}
#sbox2{
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
border-radius:2px;
outline:0;
background:#eee;	
}
#sbtn2{
height:50px;
position:absolute; 
left:255px;/*アイコン左右の位置調整*/
top:0;
background:none;
color:#666;
border:none;
font-size:20px;/*アイコンサイズ*/
}
#sbtn5:hover{
color:#7fbfff;
}

二段構造にするカスタマイズ

検索フォーム
HTML
<form id="form3" action="自分のサイトURL" method="get">
<input id="sbox3" id="s" name="s" type="text" />
<button id="sbtn3" type="submit"><i class="fas fa-search"></i></button>
</form>
style.css
#form3{
position:relative;
max-width:300px;	
}
#sbox3{
height:50px;
border-radius:0 0 2px 2px;
border:none;
background:#f1f1f1;
outline:0;
margin-bottom:50px;
}
#sbtn3{
height:50px;
position:absolute; 
left:255px; 
top:0;
background:none;
color:#7fbfff;
border:none;
font-size:20px;
}
.slabel{
background:#7fbfff;
font-size:18px;
color:#fff;
border-radius:2px 2px 0 0;
max-width:300px;
font-weight:bold;
padding-left:1%;
}
補足
#form3max-width:300px;.slabelmax-width:300px;は揃える。

検索ボックスと検索ボタンの角を丸めたカスタマイズ

HTML
<form id="form4" action="自分のサイトURL" method="get">
<input id="sbox4"  id="s" name="s" type="text" placeholder="フリーワードを入力" />
<button id="sbtn4" type="submit"><i class="fas fa-search"></i></button>
</form>
style.css
#form4{
position:relative;
max-width:300px;	
margin-bottom:20px;
}
#sbox4{
height:50px;
padding:0 10px; 
position:absolute; 
left:0;
top:0; 
border-radius:25px;
outline:0;
background:#eee;
}
#sbtn4{
height:50px;
width:50px;	
position:absolute; 
left:250px; 
top:0;
background:#7fbfff;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
#sbtn4 .fa-search{
font-size:20px;	
position:absolute;
top:30%;
left:30%;	
}
#sbtn4:hover{
color:#888;
}
補足

違うアイコンを使う場合は.fa-search部分を変更して下さい。

3・検索フォームFont Awesomeで使える虫眼鏡アイコン一覧

Font Awesome5で使える虫眼鏡アイコン
アイコンコード表示イコン
<i class="fas fa-search"></i>サーチアイコン
<i class="fab fa-searchengin"></i>サーチアイコン2
<i class="fas fa-search-plus"></i>サーチアイコン3
<i class="fas fa-search-minus"></i>サーチアイコン4

無料で使用できるのは上記の4つです。(有料版だともう少し増えます。)

今回は一番上のコードを使用しましたが、上記のHTMLコードを変更すれば好きなアイコンにできます。

カラーやサイズなどは、CSSで変更できます。

Font Awesome4.7で使える虫眼鏡アイコン
アイコンコード表示アイコン
<i class="fa fa-search"></i>
<i class="fa fa-search-plus"></i>
<i class="fa fa-search-minus"></i>

検索フォーム【まとめ】

個人的にこういうCSSで色々やってみる記事を書く作るのが好きです。

こんなカスタマイズはいかが?

誰のためのデザイン?増補・改訂版―認知科学者のデザイン原論
Amazon【書籍版】電子書籍対応していません
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。