BLOG2017.05.23Googleカスタム検索ボックスの作り方【HTMLフォーム実装版】Webデザイナーの嶋津です。自社のWebサイトにサイト内検索(検索ボックス)を作成したい場合、皆さんはどうしていますか?今回は、「Googleカスタム検索」の設置方法と、ユーザービリティー(処理速度向上)を考慮した実装方法(HTML版)について、紹介したいと思います。Googleアカウントを用意!まずはじめに、Googleカスタム検索を作成するためには、Googleアカウントが必要になりますので、用意しておきましょう。Googleカスタム検索でオリジナルの検索ボックスを作成!Googleカスタム検索Googleカスタム検索は、上記のリンク先から作成することができます。このページで「Add」をクリックすると、オリジナルの検索エンジンを登録することができます。「検索するサイト」「言語」「検索エンジンの名前」を指定し、「作成」をクリックします。「カスタム検索エンジンの作成が完了しました。」というコメントとともに、Googleカスタム検索のコードを取得できるボタンが表示されるので、クリックします。here’は「検索エンジンID」が記述されており、各々で違います。あとはこのコードを表示したい箇所へコピペすればいいだけです。その1しかし、ここで問題が生じます。Googleカスタム検索を設置したページを表示する際に、ページが「カクッ」となるのです。これではなんだか気持ち悪いですよね。原因は恐らくGoogleカスタム検索の記述がscriptで記載されていることで、どうしても読み込みに時間が掛かってしまうみたいです。フォームを使用した検索ボックスの作成そこでHTMLフォームの記述に書き換えましょう。here’の部分は上述した通り、各々の「検索エンジンID」を記述します。これでGoogleカスタム検索が実装されているサイトの読み込み時に、「カクッ」となることがなくなりました。その2しかしここでもまた問題が生じます。それは、このままではGoogleのロゴが検索ボックスの下に表示されてしまうことです。これはデザイン上、表示してほしくない場合が多いかと思います。Googleカスタム検索を使用する上でGoogleのロゴを消すことは、Googleの規約違反になるためできません。src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>それはGoogleのロゴを表示している記述をscriptでの記述に変更するだけです。することで、Googleのロゴを検索ボックス内に表示することができます。その3しかしこれまた問題が生じます。それは「Search」ボタンです。デザイン上、よろしくない場合が多いかと思います。/>にID名を付けました。することで、検索ボタンをCSSにてカスタマイズすることができるわけです。参考までにCSSの記述を下記に載せておきます。10px;}まとめサイト内検索ボックスの設置は、Googleカスタム検索を利用することで驚くほど簡単に実装できることが理解できたと思います。素晴らしいGoogleの検索機能が、無料で、しかも比較的容易に実装できるので、自社サイトに検索ボックスを実装したい場合は、ぜひGoogleカスタム検索をお試しください。設置この記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。