Simplicityの検索ボックスのデザインをStinger風に変える

このブログではWordPressのテーマに「Simplicity」を利用しています。
カスタマイズできる項目も多く、構造化マークアップやOGPにも対応していたりと、無料とは思えないほど便利なテーマです。
ただ、利用者が多くどこも似たようなデザインのサイトになりがちです。
そこで、Simplicityっぽさを少しずつ消して個性的なサイトに悪あがきをするため、カスタマイズすることにしました。

今回は、検索ボックスのデザイン(主に虫眼鏡アイコン)を変える回です。

変更前の検索ボックス

下の画像は、Simplicityのデフォルトの検索ボックスのデザインです。
訪問したサイトでこの虫眼鏡アイコンを見ると「あ〜このサイトもSimplicity使ってるんだな〜仲間だ〜」と親近感が湧きます。

変更後の検索ボックス

以下の画像のように変えます。「Stinger」の様なデザインにしてみました。
(背景色と検索ボックス内の文言変わっていますが、これは本番環境と開発環境の差分です。)

カスタマイズ内容

変更内容は以下の3点です。

  • 検索ボックスの角丸を消す。
  • 虫眼鏡アイコンを変更する。
  • 検索ボックスフォーカス時に青やピンク色の線を非表示にする。

今回は、CSSファイルのみを編集すれば実現可能でした。

検索ボックスの角丸を消す

Simplicityではinput要素のtextareaに角丸を指定してるようでした。
ですので、 border-radius: 0px; を指定してあげて、角丸をとります。

虫眼鏡アイコンを変更する。

虫眼鏡アイコンを単純にFontAwesomeに差し替えたところ、ぼやけが出ていることに気づきました。
これは解決に時間がかかると思い、心が折れそうになりましたが、ググったところ先人がいらっしゃいました。

ぼやけた Simplicity の検索アイコンをきれいに表示

上記の記事のおかげで心が救われました。ありがとうございます助かりました。
ただ、 :before 要素って、要素の前に挿入してくれるものだと思っていたのですが、どうしてこのコードでうまく虫眼鏡アイコンが配置されるのかわからず気になりました。

検索ボックスフォーカス時に青やピンク色の線を非表示にする

私はSafariを使っているのですが、検索ボックスをクリックすると、青枠が表示されます。
これが嫌だったので、表示されないようにします。以下のブログが参考になりました。

CSSでinputフォーカス時の影やborderを消す | KonifarPod

input要素のフォーカス時に outline: 0; を指定してあげると良いみたいです。

ソースコード

最終的に以下のコードを子テーマの zstyle.css へ追記しました。

/* サーチフォーム(Search Form)*/
input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
textarea {
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  box-shadow:  none;
  border-radius: 0px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: 0;
  border: 1px solid #444;
  background: #fff;
  box-shadow:  none;
  color: #444;
}

#searchsubmit {
    background: none;
}

#searchform:before {
    color:#ccc;
    content: '\f002';
    font: 21px/1 FontAwesome;
    position: absolute;
    right: 8px;
    top: 5px;




シェアする