[Я]サイト内検索をGoogleカスタム検索にしてみよう

スポンサーリンク

WordPress標準の検索機能から切り替え

美しい窓
Beautiful windows in the master bedroom by lilszeto

これまでPC版ではサイドバーに「WordPress標準の検索窓」を設置してました。

スマホ版は「WPtouch」というプラグインが標準で搭載している検索窓をそのまんま表示させてたけど、あれって気付かない人多いんですよ。私がその一人なんだけど。

で、秋のカスタマイズ祭り第2弾

秋の紅葉

今回のカスタマイズ作業を機に、PC版・スマホ版ともに「Googleカスタム検索」を設置しました。

設置方法は2種類ある

Googleカスタム検索は、文字通りGoogleのサービスを使って検索用のHTMLコードを取得し、それをブログに貼り付ければ表示される。設置自体は全然難しくない。

Googleの提供してるサービス、言い換えると「検索窓のコードを取得できるところ」は、大きく言うと2つある

プランA:Googleカスタム検索
プランB:Google Adsenseの「検索向けAdsense」

今回私はいろいろあって、2つのサービスを両方とも使ってみた。テストとかじゃなく、上手くいかなかったから。

具体的に言うと、

1. まず最初にプランAでコードを取得し、検索窓を設置。
2. デザインが上手く変更出来なかったので、プランBに変更。
3. デザインの変更方法が分かったので再びプランAに変更。

という手順を踏んじゃった。すなわち現時点で使用しているのは「プランAのGoogleカスタム検索で取得したコード」による検索窓。

プランAを利用した設置方法

まず「カスタム検索エンジン – Google」というページにアクセス。

Googleにログインしてる場合は、そのままメニューが表示されるはず。ログインしてない場合はGoogleのアカウントを入力してログイン。

「新しい検索エンジン」をクリック

↑「新しい検索エンジン」をクリック。

検索エンジンの設定

↑まずは「1.検索エンジンの設定」から。

◆名前 … 分かりやすい名前を
◆説明 … 何か説明を(私はテキトーに入れた)
◆言語 … 日本語
◆検索するサイト … 自分のドメイン(私なら「http://rikumalog.com」)
◆エディション … スタンダード
◆利用規約 … 同意してチェック入れる

→「次へ」をクリック。

検索テスト画面

↑「2.テスト」に移動。

「スタイルの選択/カスタマイズ」という欄に幾つかのデザインスタイルが並んでる。これは後で修正・変更が可能なので、最初はテキトーでいいかも。

ひとまず最初は「デフォルト」というスタイルを選択。この時点で細かなデザインを設定しておくことも出来る。選択したスタイルの下に「カスタマイズ」というボタンがあるはずなので、それをクリック。

カスタマイズ設定項目

↑グローバルスタイル、検索コントロール、検索結果、プロモーション、と4つのタブが並んでいて、それぞれ色などのデザインをカスタマイズできる。

「検索コントロール」は検索窓自体のデザイン。「検索結果」は検索ヒットした結果一覧画面のデザイン。

プレビュー欄で検索テストができる

↑カスタマイズ欄の下、「検索エンジンのプレビュー」という欄に、カスタマイズ設定が反映された状態で検索窓が表示されている。色などのカスタマイズ内容を変更すると、ここのプレビュー表示も変化する。

この検索窓で実際に検索テストすることが出来る。試しに何か文字を入力して検索してみると、カスタマイズの「検索結果」で設定した値に基づいて検索結果ページが表示される。

検索をテストをしてもしなくても、「次へ」をクリック。

カスタム検索設置用コード

↑カスタム検索のコードが生成される。これをコピー&ペーストすれば、カスタム検索機能の設置完了。

が。

私はここでハマった。

最初の検索窓はCSSでの幅調整ができなかった

検索ボタンが画面からハミ出た

↑先ほどの設定で生成された検索窓を実際に設置してみると、スマホで見た場合に幅の調整ができず、検索ボタンが画面の右端にハミ出てしまっている

これを調整しようと思ってCSSをイジりまくったのだが、ぜんっぜん上手くいかなかった

デバッグツールで要素を展開

↑デバッグツールで要素を展開し、いろんな要素にCSSを当ててみたんだけど全部ダメ。私の知識では太刀打ちできぬ~!

検索機能のHTMLソース

↑これが検索窓のHTMLソース。「gcse」ってナンなのよ。分からない。

※「gcse」で検索したら解説を見つけたけど、難しかったし今回の主旨と外れるので割愛。

もうお手上げ状態だったので、前述した通りプランBの「Google Adsenseのほう」で別の検索窓を作って、一旦は公開。その時点でカスタマイズ祭りのPC版を書いた。

ところがそのあと、プランAでもCSSで幅を変える方法が分かった。なので再びプランAで作り直した、というのも前述した通り。

プランBの設置方法を解説するよりも先に、プランAで再作成した方法を次で紹介します。おそらくソッチの方を皆さん使われる気がするので。

検索結果にブログのロゴを表示させる

最初に作ったプランAの検索窓を修正する。

Googleカスタム検索のトップページ

↑Googleカスタム検索のトップページに戻ると、「マイ検索エンジン」という一覧の中に、さっき作った名前が表示されているはず。その「コントロールパネル」をクリック。

「基本」という画面が表示され、新規作成した時の基本的な情報が画面に表示されているはず。ここで基本情報を変更・修正することも出来る。

メニューの「デザイン」をクリック

↑画面左側にメニューがズラーっと並んでいるので、その中の「デザイン」をクリック。

デザイン設定画面

↑デザインの設定画面が表示される。新規作成の時にテキトーなデザインで作ったとしても、ここで作り直すことが出来る。

まず「レイアウトの選択」。何もこだわりがないのなら、「Googleがホスト」というレイアウトを選択した方がいい。これにしておかないと、後で説明する「検索結果のロゴ」が表示できない

スタイルの選択/カスタマイズ

↑次に「スタイルの選択/カスタマイズ」。新規作成の時に指定したものと違うものをここで変更できる。私のブログはベースカラーがグリーンなので、カスタム検索も同じく緑にしようと思い、グリーンスカイというスタイルにしてみた。この辺は深く考えなくても良い。

スタイル(上の例だとグリーンスカイ)の下にある「カスタマイズ」ボタンをクリックすると、カスタマイズの詳細欄が表示される。

通常のカスタマイズ詳細欄

↑「レイアウトの選択」で「Googleがホスト」以外を選択した時は、カスタマイズ項目として上の画像通り4つしか表示されない。新規作成の時と同じ。

ロゴが指定できるようになる

↑レイアウトで「Googleがホスト」を選択した時だけ、5つめのタブとして「ロゴ」が表示される。これは検索結果の左上にGoogleのロゴではなく、自分のサイトやブログのオリジナルロゴを表示できる設定

ロゴのURL」欄にはブログロゴの格納先URLを入力。「ロゴのリンク」欄にはドメイン(トップページのURL)を入力。

これを指定することにより、ロゴをクリックすると検索結果画面からブログのトップページに読者を戻してあげることが出来る。

「ロゴ」欄の右側には「ロゴの高さ」という欄もある。何も入力しなければデフォルト値(初期値)として100が設定される。画像を小さく表示したいなら、ピクセル値で100より小さい値を指定してあげればいい。

小さく指定した場合、画像の縦横比率は自動調整される。小さくしたらロゴ画像がヘンテコにゆがむ、なんてことはないのでご心配なく。

保存してコードを取得

↑では、「保存してコードを取得」をクリックしてみましょ。

gcseを含むコードが生成された

↑最新の設定を反映したコードが生成された。しかし、やっぱりまだ「gcse」のコードになってる。

でも、絶望するのは早い!

検索要素V1コードに切り替え

↑「検索要素 V1コードに切り替え」というリンクがあるので、クリックしてみなっせ。

生成コードが変わる

↑ほら! 生成コードが変化したでしょ。しかも内容を見ると、divタグがあって、CSSを少し分かる方なら「お、これならサイズ変更できるぞ」って希望が湧いてくるはず。

ちなみにコード下の「検索要素 V2コードに切り替え」ってところをクリックすると、さっきのgcseバージョンに戻る。

さて、それでは生成し直した「V1コード」をブログに貼り付けてみよう。

スマホで表示すると画面内に収まった

↑スマホで表示させると、検索窓とボタンが画面内にキッチリ収まっている

PC版の検索結果

↑PC版で検索した結果ページでは、指定した通りブログのロゴが画面左上に表示されている。

スマホ版ではロゴが表示されない

↑スマホ版でもテストしてみたが、やっぱりスマホではロゴが表示されないっぽい。同じ設定にしてるんだけどなぁ。

なお、CSSの細かい設定方法やロゴの設置方法などは、以下の記事で大変詳しく解説されてます。

http://number333.org/2012/06/13/google%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E6%A4%9C%E7%B4%A2%E3%83%90%E3%83%BC%E3%82%92%E8%87%AA%E5%88%86%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6/

参考までに、Bプランでの設置方法

というわけで、Aプランの再作成方法でカスタム検索は完成できちゃうのだけど、参考までにBプランの作成方法もご紹介。

Google Adsenseのカスタム検索エンジン

↑「Google Adsense」>「広告の設定」>「検索向けAdsense」>「カスタム検索エンジン」と進み、「新しいカスタム検索エンジン」ボタンをクリック。

名前などの設定画面

◆名前 … 分かりやすい名前
◆検索の対象 … 選択するサイトのみ
◆検索するウェブサイト … 自分のドメイン
◆国または地域 … 日本
◆サイトの言語 … 日本語
◆エンコード … WordPressならUTF-8で良かったはず

カスタムチャネル

↑カスタム検索にもカスタムチャネルを設定し、アクセス解析などで検索の動向をチェックすることが出来る。ちなみに今回省略しているが、プランAでもチャネルを設定することは出来る。

検索ボックスのスタイル

↑検索ボックスのスタイルも指定できる。「テキストボックスの長さ」欄の数値を小さくすることで、検索キーワード入力欄の長さを調整可能。

広告スタイル

↑広告スタイルのデザイン変更も可能。自分のブログにフィットしたカスタムデザインを登録して指定することも出来る。

オリジナルロゴの設定

↑こちらでもブログのロゴを表示させる指定が可能。「ロゴ画像のURL」と「リンク先URL」を指定するのはプランAと同じ。

検索結果、ロゴの位置についてはお好みで。

設定が全て完了したら、画面下部にある「保存してコードを取得」ボタンをクリック。

formタグで生成結果が表示される

↑検索機能のコードがformタグで表示される。これをコピー&ペーストすればAプランと同様に検索機能が使えるようになる。

このBプランで作成した場合、Aプランで私が作ったような「グリーンの検索ボタン」みたいなことは出来ず、標準の検索窓しか作れない。

機能的にはどちらも同じに思えるのだけど、デザイン的にはAプランの「カスタム検索」からの方がいろいろとオリジナルな検索窓が作れそう。

まとめ

WordPress標準の検索機能も悪くはないのだけど、検索結果の一覧に本文を表示しないパターンが多いため(トップページに準じた表示形式にしてるテンプレートが多いため)、本文のどの辺りに検索キーワードがあるかの判別ができない。

Googleカスタム検索を導入すれば、検索結果に本文も表示できるし、ヒットしたキーワード部分は太字で表示されるため識別しやすい。ロゴを表示できたり、色調もオリジナルなものを作ることが出来るので他ブログと差別化も可能。

カスタムチャネルを設定することでアクセス解析でも重宝するし、Googleカスタム検索に変えてみて損はないと思います。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします