Googleカスタム検索用のテンプレHTMLを共有します【自由にデザイン・装飾】

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー Code
  • カテゴリー CSS
  • カテゴリー HTML

Googleカスタム検索の実装に苦手意識や、不安がある人

Googleカスタム検索のフォーム欄って、CSSで自由に装飾できるのかな？

オリジナルデザインのフォームに、Googleカスタム検索を実装してほしいと依頼されたけどできるのかな？

なんか面倒そうだなぁ、、

今回は、こういった悩みに答えます。

こんにちは。フロントエンド・エンジニアしんぺーです。
以前の記事（サイト内検索を実装する【Googleカスタム検索が最速】）では、Googleカスタム検索IDの取得方法や、簡易なデザイン変更を解説しましたが、今回はがっつりオリジナルのデザインでも実装できるように解説していきたいと思います。

とはいえ、テンプレを共有しますので難しいことは考えずに、装飾のCSSのみに専念できますので、ご安心を。

しんぺー

Googleカスタム検索用のHTMLテンプレを共有するので、無駄なことを考えずCSSの装飾だけに集中できますよ〜。

完成形のイメージ

See the Pen Untitled by shimpei (@shimpei) on CodePen.

今回作りたいのは、こんな感じのフォームです。
デフォルトのフォームのデザインと全然違いますが、HTMLのテンプレがあるのでCSSで装飾するだけで大丈夫です。

テンプレート【最重要】

<form class="search-form" action="https://www.google.co.jp/cse" name="cse-search-box" target="_blank">
  <input value="ここにカスタム検索のID入れる" name="cx" type="hidden">
  <input value="UTF-8" name="ie" type="hidden">
  <input class="search-input" size="16" name="q" type="text" placeholder="キーワードで検索">
  <button class="search-btn" value="" name="sa"></button>
</form>

上記のテンプレをコピペして使いまわしてください。
ちょっと「うっっ」てなりますが、見てほしい箇所は3つだけです。

  1. カスタム検索のID入れる
  2. class=”search-input“　このクラスでインプット欄を装飾します
  3. class=”search-btn” このクラスでボタンを装飾します
しんぺー

あらかじめクラスもつけているので、使い回しやすいと思います〜。
気づいた方もいるかも知れませんが、プレースホルダーも自由に変更可能です。
placeholder=”キーワードで検索“の箇所です。なければ「””」空でOKです。

解説

入力欄の装飾

あまり説明いらないかもですが、search-inputのクラスが入力フォーム欄ですので、ボーダーをなくしたり角丸にしたり背景をつけたり、自由に装飾して下さい。

.search-input {
  background: rgba(#aaabd2, .17);
  border: none;
  border-radius: 3px;
  width: 270px;
  height: 45px;
  color: #7c7eba;
  padding: 0 40px 0 10px;

  &::placeholder {
    font: {
      size: 14px;
      weight: 500;
    }

    line-height: 1.85;
    letter-spacing: .05em;
    color: #AAAAAA;
  }
}

プレースホルダーの設定は下記のようにして、フォントサイズや色など設定できます。

.search-input {
  &::placeholder {
    // プレースホルダーの装飾はここ
  }
}

ボタンの装飾

ボタンの装飾はsearch-btnですね。

デフォルトのCSSの影響でボタンの装飾が出てきたら、borderや、backgroundを無しにしてあげて下さい。

ポイントはvertical-align: middle;で上下中央に設定している箇所です。
これを設定していないと、ボタンの位置がちょっとずれちゃったりします。

ボタンは、疑似要素にFontAwesomeのアイコンを設定しています。
ホバーした時にカーソルが指マークに変わるcursor:pointer;を入れる親切心&優しさも忘れずに。

.search-btn {
  // ボタンの装飾を非表示
  border: none;
  background: unset;
  
  // 上下中央に
  vertical-align: middle;
  
  // 疑似要素にFont Awesomeのアイコンを設置
  position: relative;
  &::before {
    position: absolute;
    content: "\f002";
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    left: -2em;
    color: #ddd;

    font: {
      family: "Font Awesome 5 Free";
      weight: 900;
      size: 21px;
    }
  }
}

解説は、シンプルに以上にします！
HTML・CSSができれば自由に装飾できるかと思います！

最後に

今回の解説は以上になります。
テンプレを活用しながらサクサクとコーディングやっていきましょう♪

最後までありがとうございます。おつかれさまでした！

Googleカスタム検索