ブログにGoogleカスタム検索を追加してみました。

2015年11月29日2023年10月21日

FYI

このブログにGoogleカスタム検索を追加してみました。
少し紆余曲折がありましたので、掲載しておきます。

Googleカスタム検索の作成方法に2通りがある

Googleカスタム検索の作成は2通りがあります。

Google AdSense（方法1)

一つは、Google AdSenseの「広告設定」です。
以下のブログに詳しく設定方法が紹介されています。

参照 WordPressにアドセンスの広告付きカスタム検索ボックスを設置する方法（nelog.jp）

カスタム検索エンジン（方法2）

もう一つはGoogleのカスタム検索エンジンから設定します。

参照カスタム検索エンジン（google.co.jp）

設定方法については以下のブログが詳しいです。

参照 Googleカスタム検索の設置方法（affiliate150.com）

問題は2つ目のカスタム検索

私の場合、2つのブログにカスタム検索を設置しようと試みたのですが、「方法1」によって2つ目を作成し、検索ドメインを設定すると、両方とも後で設定したドメイン検索になってしまいました。

そこで、「方法2」によってカスタム検索を設置することにしました。

手順

「方法1」によって一つ目のカスタム検索を作ります。

そうするとカスタム検索エンジンにアクセスすると以下のように1つの検索エンジンが出来ていますので、「Add」ボタンを押してあとは「方法2」の設置のやりかたに従います。

問題点

方法2によって設置したカスタム検索はさらに問題があります。

最後に取得したコードを当ブログに設置したところ上手く表示できませんでした。

以下のようになります。

設置コードとCSS

ウィジェット設置コード

そこで、以下のようにコードを改変して設置すると上手くいきました。

<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
<div>
 <input type="hidden" name="cx" value="この部分を以下の赤い枠の部分に変更" />
 <input type="hidden" name="ie" value="UTF-8" />
 <input type="text" name="q" size="55" />
 <input type="submit" name="sa" value="検索" />
 </div>
</form>

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

コードのcxのvalueには、方法2によって取得したコードを設置してください。
以下の赤い枠の部分です。

CSS

CSSは以下です。


#cse-search-box input[type="text"] {
width: calc(100% - 70px);
background-color: #fff;
float: left;
margin-right: 5px;
}

#cse-search-box input[type="submit"] {
height: 34px;
}

#cse-search-box input {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 34px;
}

aside textarea:focus {
border: 1px solid #f2f2f2;
background: #fff;
box-shadow: 0 0 3px rgba(255,105,180,1);
color: #444;
}

aside input[type="text"] {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
font-size: 16px;
line-height: 1.42857;
padding: 6px 12px;
-webkit-transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0;
transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0;
width: 100%;
box-sizing: border-box;
}

aside input[type="text"]:focus {
border: 1px solid #f2f2f2;
background: #fff;
box-shadow: 0 0 3px rgba(255,105,180,1);
color: #444;
}

aside input[type="submit"] {
display: inline-block;
margin-bottom: 20px;
padding: 6px 12px;
border: 1px solid #777;
border-radius: 2px;
background: #fff;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: normal;
cursor: pointer;
font-size: 12px;
}

aside input[type="submit"]:hover {
background: #eee;
}

aside input[type="submit"]:active {
position: relative;
top: 1px;
}

ブログ収益化のためにも、是非やってみましょう。

by T.Y.