tech.guitarrapc.cóm

Technical updates

はてなブログで Google Custom Search (Googleカスタム検索) を使うために10分でやってみたこと

はてなブログには「検索」をサイドバーで容易に追加できます。

ただ、はてなブログ検索だと記事の全文検索がかかり検索結果表示されます。

image

長くてうざいですね。 今回は、はてなブログ検索をGoogleカスタム検索にする方法を紹介します。

メリット

そもそもやる意義が何かといわれると「楽しそうだから」ですが、他の理由を探してみましょう。

  1. 全文検索がずらずら表示されたくない
  2. オーバーレイなど表示を選択したい
  3. 検索エンジンの調整が多少できる

などがあります。

その内容は後から振り返りながら流れを見ていきましょう。

Google アカウントでGoogleカスタム検索 の設定

Googleアカウントを持っているでしょう。*1

Google カスタム検索にログイン

無料ですので、アカウントを持っている人であれば使わない手もないでしょう。

image

サイト用の検索設定を作成する

ログインしたら、新しい検索エンジン で自分のサイト用設定をします。

image

項目 設定
検索するサイト 自分のサイトアドレスと以下のディレクトリ全部なら「/*」を入力
言語 日本語 (お好きにどうぞ)
検索エンジンの名前 あとからGoogleカスタム検索の設定を調整するときに利用します。

すこし補足しましょう。

  • 検索するサイト

ここは、自分のサイトアドレスと対象を設定します。

対象がリカーシブに全コンテンツなら/*とします。

私なら、tech.guitarrapc.com/*です。

これで、作成とすると、完了画面が表示されます。

image

コードを取得

続いて、サイトに貼り付けるコードを取得します。

先ほどの完了画面で、コードを取得を選択します。

image さい

これでGoogleカスタム検索の作業はいったん完了です。

はてなブログの設定

続いてはてなブログの設定です。

はてなブログに検索設定を作る

デザインから、自分のサイトの編集をします。

はてなブログ > 設定 > デザイン > サイドバー

今回は、PCのみを対象にしています。

サイドバーの一番下にモジュールを追加しましょう。

image

設定するモジュールは、HTMLです。

ここに、Googleカスタム検索で取得したコードを貼り付けます。

  • 貼り付け前

image

  • 貼り付け後

image

これでデザインを保存すれば、表示されます。

image

もし既存の「はてなブログ検索」を設定している場合は、モジュール位置の入れ替えるなどすればいいでしょう。

動作確認

とりあえず動作確認です。

キーワードにzipといれて試します。

image

検索結果が、はてな検索の全文から、概略表示になっていますね。

image

うまく動作しました。

修正しよう

さて、これで終わるとかありえないのでちょっと修正しましょう。

サイドバーにそのまま検索結果表示できないの?

できます。

Googleカスタム検索の設定を変更してコードを貼り付け直すだけです。

Googleカスタム検索 > 自分のサイト > デザイン > レイアウト

image

ここで2ページを選択してコードを生成しなおして、はてなブログのデザインに貼り付け直します。

これで、オーバーレイではなく望んだ結果となります。

image

オーバーレイの方が好みなので触りませんが。

デフォルトではcssがうまく適用されない。

問題はcssです。検索ボタンがつぶれています。

これは、検索ボタン内部に表示する、虫めがねなアイコンがPaddingでつぶれているためです。

色などであれば、 Googleカスタム検索の設定から調整可能です。

image

CodePen で ボタンのCSSを試そう

CodePenで、Googleカスタム検索のCSSを表示テストしてみましょう。

https://codepen.io/guitarrapc/pen/mfHLb

https://codepen.io/guitarrapc/pen/mfHLb

元々のcssが問題なく表示できていますが、はてなブログではつぶれているのはHeight/Widthに対してPaddingが決め打ちなためです。

このため、ボタン内部のアイコンがつぶれてしまっています。

そもそもボタンなんていらないので、CSSをオーバーライドしてしまいましょう。

CodePenで 検索ボックスのCSSを試す

しれっと、検索ボタンを殺してボックスだけにするCSSを書いてみます。

https://codepen.io/guitarrapc/pen/FieaB

https://codepen.io/guitarrapc/pen/FieaB

このCSSを、はてなブログのデザインCSSに貼り付けることで、検索ボックスのHTMLが変化します。

はてなブログ > 設定 > デザイン > デザインCSS

image

結果を見てみましょう。

image

うまくいきましたね。検索文字を入力して、エンターで検索されます。

検索エンジンの調整

簡単な調整ですが、これもGoogleカスタム検索の設定から可能です。

image

はてなブログ検索と併用

併用でもいいでしょうが冗長よくないので消しました。

Proを使っているのでヘッダーも消しています。が、無料版の場合は、ヘッダから検索できます。

この辺は好みでしょうね。

まとめ

Googleカスタム検索を使うことで、はてなブログ検索から変えたかったこれらが可能になりました。

  1. 全文検索がずらずら表示されたくない → 概略表示に変更
  2. オーバーレイなど表示を選択したい → オーバーレイ表示に変更
  3. 検索エンジンの調整が多少できる → グーグルカスタム検索の設定で

たまにはCSSを触ると楽しいですね。

*1:持っていない人は作らないとできないので検討してください。