エンジニアが学んだことをお伝えします

2018-06-17 Blog

検索フォームを改良。枠を消して下線のみを表示し、入力するときに幅を広げる【WordPress】

ブログのデザインを改善するため、検索フォームのカスタマイズを行った。

完成形は上部アイキャッチ画像で、検索フォームを拡大したものは以下の通り。

コード

HTML

<form id="searchform" role="search" action="/" method="get"><input class="s" name="s" type="text" placeholder="..." /><input class="searchsubmit" type="submit" value="&#xf002;" /></form>

CSS

.s{
margin: 0 0 0 10px;
height: 28px;
width: 9em;
transition: all .6s ease;
border-bottom:1px solid #cccccc;
border-right:none;
border-left:none;
border-top:none;
border-radius:0px;
}
.s:focus{
width:16em;
}
.searchsubmit {
vertical-align:top;
width: 35px;
height: 30px;
padding: 0;
font-family: 'Font Awesome\ 5 Free';
font-size: 18px;
border: none;
background: transparent;
cursor: pointer;
}

 

虫眼鏡マークの使用については以下の記事参照:
WordPressでシンプルな検索ボックスを設置。虫眼鏡マークの作り方。

入力欄の枠を消す

もともとは以下のような枠付きの検索ボックスとなっていた。

どうやらデフォルトのボックスには枠が表示されるようで、CSS上で指定しなくても枠が現れる。

したがって、下線だけを残し左右と上の枠を消すために以下を追記。

border-right:none;
border-left:none;
border-top:none;

下線の太さや色はCSSで調整。

入力フォームに初期表示”…”を表示する。

検索ボックスであることは虫眼鏡で判るようにしているが、どこに入力するのか下線だけではちょっと情報が足りないかなと感じる。

“Search”という単語を入れてもみたのだけど、なんだかしっくり来なかった。

ということで”…”を表示してみることに。

初期表示は以下のコードをhtmlに記載する。

placeholder="..."

この表示はキーワードを手入力すると消える。

検索フォームの幅を入力する際に広げる

検索ボックスが狭いと、入力したキーワードが全て表示されない。これを避けるためには幅を広げたいところだが、常に大きな表示をしておく必要もない。

そこで、入力するときだけ広げる仕組みをつくる。

ウェブ上で調べると、意外とこれが簡単。以下のサイトの解説がとてもわかりやすかった。

[CSS3] 伸び縮みする検索窓を実装する

CSSで以下コードの部分だけが機能を担う。

.sは当ブログで設定しているSearch boxのクラス。:focusは入力するモードになったときに適用される。

.s{
width: 9em;
transition: all .6s ease;
}
.s:focus{
width:16em;
}

上記のようなコードをCSSに入れておくと、入力しないときはwidth 9emで、入力するときは16emに幅を広げるという指示になるとのこと。

transition:にてこの変化の速度を指定している。

“.6s”はおそらく0.6秒(間違ってたらすいません)

.6を1にすれば少しゆっくり。5にするとすごくゆっくりになる。

なるほど。こうやって指定するのか。

 

検索キーワード入力欄をクリックすると….

 

スーっと入力欄が広がる。

 

おおー。

 

今回もGoogleで調べ、多くのサイトにお世話になりました。

ありがとうございました。


同じカテゴリーの記事

新着記事

CATEGORY


Follow @Yo_MechEngineer

© Yo 2017