頑張らない!でも諦めない!必死にならずにええかげん

(HTML)WordPressにGoogle™サイト内検索(カスタム検索エンジン)を設置する方法

      2014/11/22

Google or AdMax Promotion(it)

サイトにサイト内検索ボックス(カスタム検索エンジン)を設置する方法として、
検索として一般的なGoogle™の検索インデックスを利用した、
検索ボックス(カスタム検索エンジン)を設置する方法があります。

そのカスタム検索エンジンは通常はJavaScriptを利用して導入・設置するのですが、
他社の検索ボックス同様にHTMLを用いた設置方法も行えます。

はじめに

Google検索ボックスの設置方法は特に説明の必要はないとは思うのですが、
思った以上に設定項目が多くありましたのでご紹介しておきます。

環境

  • wordpress:3.5.1
  • 利用テーマ: Twenty Twelve
  • カスタム検索エンジン: version 2

カスタム検索エンジンの準備とタグの作成

HTMLを利用してカスタム検索エンジンを設置するにあたっても、
通常の設置方法同様にカスタム検索エンジンを作成する必要があります。

カスタム検索エンジンの作成方法については以下でご紹介しています。
WordPressの設置方法となってますが、取得方法は同じです。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

またカスタム検索エンジンの利用にあたっては、
Google™カスタム検索の利用ガイドラインにも遵守する必要があります。

カスタム検索エンジンを取得しHTMLとして検索ボックスを設置するには、
カスタム検索エンジンのIDを知る必要があります。

カスタム検索エンジンの確認

既にカスタム検索エンジンのサイトを開いていると思いますが、以下にアクセスします。
カスタム検索 – 検索エンジンの編集 

このHTMLに関しては現在主流の設置方法ではありません。
JapaScriptが利用できない環境など理由がある場合に導入する方法です。

HTML フォームのコードは利便性のためにのみ提供されています。Google カスタム検索ではこの問題に対するサポートは提供しておりません。すべての無料の検索エンジンに Google ブランドを表示する必要があります。

開いたら設置対象のカスタム検索エンジンの名前をクリックします。

01_カスタム検索エンジン選択

カスタム検索エンジン選択

カスタム検索エンジンの編集画面が開いたら初期で開かれるページ([設定]-[基本]タブ)で、
[検索エンジンID]をクリックします。

02_カスタム検索エンジンIDの確認

カスタム検索エンジンIDの確認

ポップアップにて検索エンジンIDが表示されます。
表示された検索エンジンIDを利用します。

03_カスタム検索エンジンID

カスタム検索エンジンID

検索エンジンIDの例は以下のようなコードです。

01nnnnnnnnnnnnnnnnn31:l_lrxxxxxyy

カスタム検索エンジンタグの作成

カスタム検索エンジンをHTMLにて設置する際には以下のサイトで
紹介されているサンプルソースを利用します。

HTML フォームを使用した検索ボックスの作成 – カスタム検索 ヘルプ

サイトに紹介されているソースは以下のようなコードです。

上記タグの2行目「YOUR SEARCH ENGINE ID goes here」部分を、
先ほど取得したカスタム検索エンジンIDで置き換えます。

これでカスタム検索エンジンの設置用タグの準備は完了です。

カスタム検索エンジンの設置

タグの準備ができたら、カスタム検索エンジン自体はHTMLで設置が行えますので、
WordPressなどに設置する場合には、
投稿画面などのテキスト編集モードで投稿本文内などに挿入することもできます。

WordPressの設置例

投稿の編集モードを[テキスト]に変更します。

04_WordPressテキストモード変更

WordPressテキストモード変更

テキストモードに変更したら、
上記でカスタム検索エンジンIDを埋め込んだタグを貼り付けて設定します。
貼り付けたら[ビジュアル]をクリックしてビジュアル編集モードで確認します。

05_カスタム検索エンジンタグの貼り付け

カスタム検索エンジンタグの貼り付け

ビジュアル編集モードで検索ボックスがプレビュー表示されています。

06_カスタム検索エンジンプレビュー

カスタム検索エンジンプレビュー

記事を公開し、投稿を確認します。検索ボックスが設置され表示されます。
実際に「wordpress」と検索してみます。

07_カスタム検索エンジン表示

カスタム検索エンジン表示

検索結果が表示されます。

08_検索結果例

検索結果例

HTMLモードでカスタム検索ボックスを設置した際の検索対象とするサイトなどの指定は、
通常のカスタム検索ボックスの設定と同様に、カスタム検索ボックスの設定で行います。

詳細については以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

カスタム検索ボックスのレイアウト調整

サンプルソースのタグでカスタム検索ボックスを設置した際に、
入力フィールド、ボタン、ロゴが改行されて表示されてしまいます。

改行されるのがデザイン的に問題があるようでしたら、
以下のようなCSSにて改行を行わないように設定することも可能です。

スタイルシートを割り当てて表示を確認すると一列に表示されるようになります。
※この辺りはテーマなどによって異なるとは思いますが。

09_カスタム検索エンジン配置変更例

カスタム検索エンジン配置変更例

詳細にレイアウトを変更される際には、div要素で囲んだりタグを調整ください。
尚、タグの調整にあったっては、表示されているロゴを消さないようにご注意を。

尚、本投稿の右サイドバー内に設置しているカスタム検索HTML版のソースは以下の通りです。

CSSにて別途調整を行っています。
※一部、

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

カスタム検索エンジンといえば本当に様々な設定が行えるのですが、
こうした昔ながらの設置方法も残しておいてもらえるのは何かの時にはとても助かるなと思います。

ケースバイケースで使い分けたらいいでしょう。



Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Google, 検索ボックス

  関連記事