SWELLで特化サイト作ってみた

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

検索フォームデザイン

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

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

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

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

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

HTML
copyする
<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)を使用してください。

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

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

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

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

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

HTML
copyする
<form id="form1" action="自分のサイトURL"> <input id="sbox" id="s" name="s" type="text" placeholder="キーワードを入力" /> <input id="sbtn" type="submit" value="検索" /> </form>
style.css
copyする
/*フォーム全体*/ #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
copyする
<form id="form5" action="自分のサイトのURL"> <input id="sbox5" id="s" name="s" type="text" placeholder="キーワードを入力" /> <input id="sbtn5" type="submit" value="検索" /> </form>
style.css
copyする
#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
copyする
<form action="自分のサイトURL" method="get"> <input id="sbox1" id="s" name="s" type="text" placeholder="検索 …" /> </form>
style.css
copyする
#sbox1{ max-width:300px; height:50px; border-radius:2px; outline:0; margin-bottom:40px; background:#eee; }

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

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

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

HTML
copyする
<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
copyする
#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
copyする
<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
copyする
#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
copyする
<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
copyする
#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部分を変更して下さい。

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

Font Awesome5で使える虫眼鏡アイコン
アイコンコード表示イコン
<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種類使えます。

Font Awesome5proで使える虫眼鏡アイコン
アイコンコード表示イコン
<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」にアップデートしておいたほうがいいですね。

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

検索フォーム【まとめ】

検索フォームの作り方がわかれば、好きな位置に配置できるので便利ですよね。

個人的にヘッダーに検索フォームを置くことは全サイトに推奨したいところ。

コメントはお気軽にどうぞ

\最強のSEO対策ツール・Rank Trackerを解説/