変更前の検索はこんなんでした。
久しぶりにGoogleのアイコンをクリックしたら「該当する記事が見つかりませんでした」になってしまってた。orz
URLを変えるだけでは癪だったのでブログ内検索のレイアウトから見直すことに……
語句を入力して[Enter]キーを押すかGoogleアイコンをクリックでブログ内検索
何も入力せずにGoogleアイコンをクリックでGoogleに移動です。
ということで、Google移動アイコンとラジオボタンがなくなったのでかなりスッキリしました。CSSは増えてしまいましたけれどHTMLがそれ以上に減ったのでかなり満足。
一見、入力エリアの中に検索ボタンがあるように見えるけれど、実はFORMにボーダーを付けて偽装してるだけで、その中にテキスト入力と検索アイコンが並んでるだけというこれといって特徴のないものです。
それにしても、たったこれだけに小一時間もかかるとは思わなかった。orz
実は検索開始のアイコンにGoogleアイコンを虫眼鏡で見てるのを作ろうと思ったのですけれど、小さすぎて何がなんだか……センスが無いとガッカリクォリティしか出来ないのでつらいっ(´・ω・)ス。(もう一度がんばってみた。虫眼鏡に見えるだろうか)
参考:検索フォームをCSSでデザインするサンプル集 | CSS Lecture(の4を参考にしました)
セコメントをする