この記事では、オリジナル検索フォームの作り方(HTMLコード)とCSSデザインしたサンプルフォームを6つ作成しました。
どれもコピペで使えるので、よかったら参考にしてください。
目次・読みたい所へタップできます
検索フォームのHTMLコードの解説
まずそれぞれにオリジナルのid
をつけます。
id
を付けないと、CSS
でカスタマイズする時にテーマ内にある他のformコード
も変更されてしまいます。(コメント用のフォームとか)
HTMLcopyする<form id="form1" action="自分のサイトURL" method="get"> <input id="sbox1" id="s" name="s" type="text" placeholder="キーワードを入力" /> <input id="sbtn1" type="submit" value="検索" /></form>
form1
は検索フォーム全体のid自分のサイトURL
とはhttps://〜.com
までです。sbox1
は入力欄のidキーワードを入力
部分で「検索ボックス内」の文字を変更できます。sbtn1
は検索ボタンのid検索
部分で「検索ボタン内」の文字を変更できます。
HTML5では入力欄のtypeは「search」
に変更されましたが、この記事ではtext
を使用しています。
理由は最近のテーマだと、search
で検索フォーム用のCSS
が指定されているため、カスタマイズがちょっと面倒になるからです。
※例えば当サイトのテーマ「SANGO」だとtype="search"
はPCでは長方形ですが、スマホだと上記のように角が丸く指定されています。(タップすると長方形になる仕様)
type="text"
なら以下のように最初から長方形になります。
上記コードをCSS
で調整しないと以下のように「検索ボックス」と「検索ボタン」が上下に分かれます。
この辺をCSS
で調整していきます。
検索フォームの【CSS】6パターン
ここからコピペで使えるコードを載せています。
CSS
のカスタマイズは、必ず子テーマのスタイルシート (style.css)を使用してください。
子テーマの使い方はこちら

検索ボックスと検索ボタンを繋げたカスタマイズ
検索ボタンをマウスホバー時、テキストカラーが変わる。
HTMLcopyする<form id="form1" action="自分のサイトURL"> <input id="sbox" id="s" name="s" type="text" placeholder="キーワードを入力" /> <input id="sbtn" type="submit" value="検索" /> </form>
style.csscopyする/*フォーム全体*/ #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
と#sbtn
のleft
で調整して下さい。
outline:0;
は検索フォームをクリックした時に出てくる青い枠線を消しています。
青枠線を残したい場合は、上記コードを消してください。
以降コードの解説はしませんが、調整する場合は上記を参考にして下さい。
検索ボックスと検索ボタンを離したカスタマイズ
検索ボックスのみのカスタマイズ
コードも短いザ・シンプルな検索フォームです。
検索ボックス内に虫眼鏡アイコンを挿入するカスタマイズ
虫めがねアイコンは「Font Awesome5」を使用しているので、まだ導入していない方は先に準備してください。 導入方法はこちらの記事で書きました。
なお、バージョン4.7.0を使用している方はfas fa-search
部分をfa fa-search
に変更して下さい。(以降のアイコンも同様です)
二段構造にするカスタマイズ
#form3
のmax-width:300px;
と.slabel
のmax-width:300px;
は揃える。検索ボックスと検索ボタンの角を丸めたカスタマイズ
違うアイコンを使う場合は.fa-search
部分を変更して下さい。
検索フォームFont Awesomeで使える虫眼鏡アイコン一覧
アイコンコード | 表示アイコン |
---|---|
<i class="fas fa-search"></i> |
|
<i class="fab fa-searchengin"></i> |
|
<i class="fas fa-search-plus"></i> |
|
<i class="fas fa-search-minus"></i> |
|
<i class="fas fa-search-location"></i> |
|
<i class="fas fa-search-dollar"></i> |
2020年3月時点では、上記6つを無料で使用できます。
当記事のサンプルは、一番上のコードを使用しましたが、HTMLコード
を変更すれば好きなアイコンに変わります。
カラーやサイズなどはCSS
で変更してください。
続いて、年間99ドル払うと使えるpro版のアイコンです。2020年3月時点では、15種類使えます。
アイコンコード | 表示アイコン |
---|---|
<i class="far fa-search"></i> |
|
<i class="fal fa-search"></i> |
|
<i class="fad fa-search"></i> |
|
<i class="far fa-search-plus"></i> |
|
<i class="fal fa-search-plus"></i> |
|
<i class="fad fa-search-plus"></i> |
|
<i class="far fa-search-minus"></i> |
|
<i class="fal fa-search-minus"></i> |
|
<i class="fad fa-search-minus"></i> |
|
<i class="far fa-search-location"></i> |
|
<i class="fal fa-search-location"></i> |
|
<i class="fad fa-search-location"></i> |
|
<i class="far fa-search-dollar"></i> |
|
<i class="fal fa-search-dollar"></i> |
|
<i class="fad fa-search-dollar"></i> |
最後に旧版の4.7のコードです。古いテーマだとこちらを使っている場合があります。ただ今後のことを考えると、「5」にアップデートしておいたほうがいいですね。
アイコンコード | 表示アイコン |
---|---|
<i class="fa fa-search"></i> |
|
<i class="fa fa-search-plus"></i> |
|
<i class="fa fa-search-minus"></i> |
検索フォーム【まとめ】
検索フォームの作り方がわかれば、好きな位置に配置できるので便利ですよね。
個人的にヘッダーに検索フォームを置くことは全サイトに推奨したいところ。
※日本語が含まれていないコメントは投稿できません。(スパム対策)