検索窓なし関連記事

検索窓なし関連記事は下記のような感じで表示されます。

コードは下記のような感じになりますが、var searchの所はアメブロのテーマで使用されている要素になっているのでブログにあわせて変更してください。又webSearch.setSiteRestrictionの所は使用するブログのメインのアドレスに変更してください。

 <script language="Javascript" type="text/javascript">
    google.load('search', '1');    
    function OnLoad() {
      var searchControl = new google.search.SearchControl();
      var options = new google.search.SearcherOptions();

      options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
      options.setRoot(document.getElementById("somewhere_else"));

      var webSearch = new google.search.WebSearch();
      // 検索用テキスト取得
      var search = $(".articleDetailArea .articleTheme a").text();
      webSearch.setSiteRestriction('ameblo.jp/detaramehp');

      searchControl.addSearcher(webSearch, options);
      searchControl.draw(document.getElementById("search_control"));
　　　// 検索用テキスト追加
      searchControl.execute(search);
      // 別窓を開かないようにする
      searchControl.setLinkTarget( google.search.Search.LINK_TARGET_SELF );
    }
    google.setOnLoadCallback(OnLoad);
</script>

<div id="somewhere_else">Loading</div>

又Google APIのサイト内検索機能はディフォルトだと幅が300pxに指定してあるため下記のcssを追加します。

.gsc-control {/*300pxで設定してあるためここで変更してある*/
  width: 100%!important;
}

つぎはCSSによってカスタマイズしてみます。

最終更新日: 2013年3月13日