Googleカスタム検索のデザインを変更する方法

2016年2月1日

以前書いた記事「Googleカスタム検索のデザインをカスタマイズする方法」で、htmlだけでもなかなかカッコイイデザインが出来たと思っていたのですが、また一から検索エンジンを作りましたので紹介したいと思います。

 

 

 

こちらの記事と合わせて読んでいただくことで、Googleカスタム検索エンジンのデザインをオシャレに自分好みに変更できると思います。

 

 

 

初心者用(コードを貼る場所の説明)

ワードプレスを最近はじめた方やブログのcssを最近いじり始めた方など、実際どこに何を貼ればいいのかとかわからないと思いましたので、Googleカスタム検索エンジンのhtmlのコードとcssをどこに貼れば表示されるか簡単にですが説明します。

 

 

 

WordPressでカスタム検索エンジンを運用する場合は、このhtml コードを「単一記事の投稿(single.php)」や「固定ページテンプレート(page.php)」や「テーマヘッダー(header.php)」な ど好きな場所に貼ってください。

 

 

コードを貼ったページでカスタム検索エンジンが表示されるようになります。投稿ページ、や固定ページでテキスト入力で Googleカスタム検索のコードを貼っても表示させることができます。

WordPress以外のサイトの場合も同様に、index.php、ヘッダー、フッターなど、検索エンジンを表示させたい部分にコードを追記すれば表示されます。

 

 

 

Googleカスタム検索のhtml

Googleカスタム検索のhtml部分のコードです。

 

 

 

<div style="display:none;">
<aside class="searches">
	<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
	<div>
		<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx"/>
		<input type="hidden" name="ie" value="UTF-8" />
		<input type="text" name="q" size="29" />
		<input type="submit" name="sa" value="検索" /></div>
	</form>
</aside>
</div>
 
<aside class="searches">
	<form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
	<div>
		<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx"/>
		<input type="hidden" name="ie" value="UTF-8" />
		<input type="text" name="q" size="29" />
		<input type="submit" name="sa" value="検索" /></div>
	</form>
</aside>





上のコードをコピペする際には、partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx の部分は「検索エンジンID」を入力してください。

 

 

 

検索エンジンIDはGoogleカスタム検索エンジンのコントロールパネルから調べることができます。

 

Googleカスタム検索:検索IDの場所キャプチャー

 

 

 

注意事項:検索エンジンIDとアドセンスID

 

 

※以前までは、partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx の部分にアドセンスIDを入れても出来たようですが今は出来ないようです。検索エンジンごとにIDが振られているので、検索エンジンIDを入力するようにしましょう。アドセンスIDを入力してカスタム検索エンジンを作ると400エラーになって検索結果が表示されませんのでご注意ください。

 

 

カスタム検索エンジンをアドセンスに紐付けて収益化する方法はこちらをご覧ください。

 

 

 

 

Googleカスタム検索のCSS

Googleカスタム検索エンジンのcssに貼り付けるコードになります。

 

 

 

 

.searches {
 
}
 
.searches input {
 
	font-size: 16px;
	padding: 8px 8px;
	border: 1px solid #3398FE;
 
}
 
.searches input[type="submit"] {
 
	display: inline-block;
	padding: 8px 8px;
	color: #fff;
	background: #3398FE;
	cursor: pointer;
 
}








これだけでカッコよく表示されていれば良いのですが、私の場合はこのコードのままではダサかったので、こちらの記事も参考に自分のサイトに合うように変更しました。

 

 

 

 

 

そのcssがこちら(・人・)

 

 

/*グーグルカスタム検索*/

.searches {
        width: 300px !important;
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
.searches input {
  padding: 10px  13px;
  font-size: 20px;
  border-radius: 3px;
  border: 1px solid #bbbbbb;
}
.searches input[type="submit"] {
  display: inline-block;
  padding: 9px 30px 10px 30px;
margin-left: 200px;
  font-size: 13px;
  color: #FFF;
  background: #999;
  border-radius: 3px;
  cursor: pointer;
}

.searches input[type="submit"]:hover {


}

 

&nbsp;

 

 

 

 

「検索ボタン」を好きな画像に変更する方法

Googleカスタム検索バーの横の「検索ボタン」を自分の好きな画像に変更する方法を紹介しています。

Googleカスタム検索の検索ボタンを好きな画像に変更する方法

 

 

 

 

検索結果画面のロゴデザインを変更する方法

Googleカスタム検索の検索結果の画面に出てくるロゴデザインを好きな画像に変更する方法についてご紹介しています。

Googleカスタム検索のロゴデザインを変更する方法

 

 

 

 

Googleカスタム検索エンジンの作成方法やデザイン変更についてまとめてあります。

Googleカスタム検索エンジンについて学ぶ

 

Googleカスタム検索エンジンのアカウント作成方法

 

 

 

Follow me!

この記事を読んだ方はこちらも読まれています

最後まで読んで頂きありがとうございます。

このブログを「いいな」と感じていただけましたら、

下のボタンをクリックしていただくととても嬉しいです^^

ブログランキングに参加しています。応援クリックよろしくお願いします!

にほんブログ村 為替ブログ FXの基礎知識へ

さらに下のボタンからSNSに拡散していただくととても嬉しいです!

6 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください