Stingerのデフォルト検索をGoogleカスタム検索に変更！

こんにちは。

少しずつブログをカスタムしているのですが、まだまだ基本的な所ができていないので、今回はStingerのデフォルト検索をGoogleカスタム検索に変更してみました！

まずはじめにやったこと。

いつもどおりGoogle先生に『stinger Google検索』といれたら、早速お目当てのブログ記事を発見！サイドバーのコードを書き換えれば、簡単にGoogleカスタム検索が使えるということなのです。今回参考にさせてもらったブログはこちらです。

まずはGoogle検索のコードを取得

Googleアドセンスのサイトの上のバーから「広告の設定を選択」

そこから、「検索」→「カスタム検索エンジン」を選択

この時、検索が見つからない方は、一番下の「その他のプロダクト」から申請してくださいね！

（AndoTVは見つけられなくて、10分「えっ、えっ、」ってなってましたｗｗ）

「＋新しいカスタム検索エンジン」をクリックして以下の様に入力

検索ボックスのスタイルや広告スタイル、検索結果を別ウィンドウで表示するかなどはおこのみでカスタムしてくださいね。

保存してコードを取得したら、準備完了！

コードをsidebar.phpに書き込む！

取得したコードを「sidebar.php」に書き込みます。

<div id="side">
  <div class="sidead">
    <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
    <?php else: ?>
    <?php get_template_part('ad');?>
    <?php endif; ?>
  </div>
<!-- side-about -->     
  <?php get_search_form(); ?> 　←ここを削除

ここにコードを挿入！

  <div class="kizi02"> 
    <!--最近のエントリ-->

これだけです。

思ったより簡単にできますよね。（笑）

更新したら、事件が。。。

簡単にGoogleカスタム検索を挿入できたのですが、ここで問題が。。。

「デフォルトの検索窓よりかなりちっちゃいし、細い。。。（汗）」

しかもブログのデザインにマッチしていない。。。

これでは機能が良くてもダメって事で仕切りなおしをしました。

Stingerのデフォルトの検索窓にGoogleカスタム検索を挿入に挑戦。

Googleカスタム検索がデザインがブログのデザインにマッチしていないので、今度はデフォルトの検索窓のデザインを活かして、Googleカスタム検索を挿入することに挑戦しました。

参考にさせてもらったブログはこちら。

「searchform.php」に以下のコードを入力しました。

<div id="search">
  <form id="cse-search-box" action="http://google.com/cse" target="_blank">
    <label class="hidden" for="s">
      <?php _e('', 'kubrick'); ?>
    </label>
    <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXX:XXXXXXXXXX" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" id="s" name="q" />
    <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/btn2.gif" alt="検索" id="searchsubmit"  name="sa" value="<?php _e('Search', 'kubrick'); ?>" />
  </form>
</div>
<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

XXXXXXXのところには、先程所得したコードのIDを入力してくださいね。

これだけだと検索ボタンが表示されないので、「style.css」の「検索フォーム」の下の部分を

#container #wrap #wrap-in #search {
  padding-top: 20px;
  padding-bottom: 0px;
}
#s {
  width: 261px;
  height: 19px;
  border: ridge;
  color: #333;
  padding-top: 3px;
  padding-right: 10px;
  padding-bottom: 4px;
  padding-left: 10px;
  background-color: #CCC;
  font-size: 14px;
  border-radius: 0;
}
#searchsubmit {
  position: absolute;
  top: 0px;
  _top: 1px;
  left: 286px;
  border-radius: 0;
}
*:first-child + html #searchsubmit {
  top: 1px;
}
#container #wrap #wrap-in #side #search #cse-search-box {
  position: relative;
}

に変更すると検索窓に枠がついて、検索ボタンが出現します。

枠の形はこちらのサイトを参考にして、カスタムしてくださいね。

これでPCやタブレットは問題なく表示できるようになりました！

スマホのCSSはPCとは違う変更が必要。

これでPCやタブレットは問題なく表示できるようになりました！

ですが、Stingerはスマホ用に違うCSSを用意しているので、「smart.css」に手を加える必要があります。

「smart.css」の「検索フォーム」の下の部分を

#container #wrap #wrap-in #search {
	padding-top: 20px;
	padding-bottom: 0px;
}
#s {
	width: 220px;
	height: 24px;
	border: ridge;
	color: #333;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	background-color: #CCC;
	font-size: 14px;
	border-radius: 0;
}
#searchsubmit {
	position: static;
	top: 0;
	_top: 1px;
	left: 250px;
	border-radius: 0;
}
*:first-child + html #searchsubmit {
	top: 1px;
}
#container #wrap #wrap-in #side #search #searchform {
	position: relative;
}

に書き換えて頂ければ、OKです。

スマホで見てみると

検索窓とボタンがズレてる。。。

修正方法がわからないので、おいおいやっていきます。

これでようやくStingerのデフォルト検索をGoogleカスタム検索に変更出来ました。

Stingerを使われている方でGoogleカスタム検索を採用したい方は、チャレンジしてみてください！

LINE@はじめました！
登録はこちらから。