2018-01-03

Googleカスタム検索結果が表示されなくなった

ご存じの方もいたかもしれませんが、いつ頃からかうちの「サイト内検索」(←)が使用できなくなってました。検索をしてもエラーメッセージを吐いて検索結果が表示されません。

どうやら、先日Googleのカスタム検索の仕様が変更になり、これまで使用していたHTML(V1コード)でのカスタム検索が使用できなくなったのが原因っぽいです。ネット上でも情報が少なくて特定に苦労しました…

結局標準のJavaScript形式のものに変更しました。導入についてはこちらのサイトが参考になりました。

検索窓のデザインについては同じくこちらが参考になります。

うちのサイトで使っているテンプレートだと綺麗に表示されませんでしたが、CSSを多少いじることで安定しました(以下のコードのハイライト行を追加)。

#gsc{
    width:100%;
    margin:0 auto;
    position:relative;
}
#gsc td {
    border: none;
}
#gsc .gsc-control-cse,
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
    margin:0 !important;
    padding:0 !important;
    font-size:12pt !important;
}
#gsc td.gsib_a{
    margin:0 !important;
    padding:0 !important;
}
/* テキスト入力フォームとボタンの位置 */
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input {
    vertical-align: top !important;
}
/* テキスト入力フォーム */
#gsc input[type="text"]{
    border: 1px solid #dddddd !important;
    height:25px !important;
    margin-top: 100px;
    font-size:10pt !important;
    ime-mode:active;
}
#gsc input[type="text"]:focus {
    border: 2px solid #b2e0eb !important;
    outline: 0;  /*safariの自動フォーカスを切る */
}

/* テキスト入力フォームの影を消す */
#gsc #gsc-iw-id1{<
    border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#gsc #gs_tti0 input{
    background-position:5px 5px !important;
}
/* ボタンの色 */
#gsc input.gsc-search-button {
background: #000099 !important;
background: -ms-linear-gradient(top,  #008ee1 0%,#008ee1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1',endColorstr='#008ee1',GradientType=0 ); /* IE6-9 */
border: 1px solid #0000cc !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0px;
}
/* 入力時に出る「×」ボタンの位置調整 */
#gsc a{
    background-color:transparent;
    border:none;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
}

これで完成…のはずが、今度は検索結果が表示されません。主な症状は以下の通り。

  • エラーメッセージも表示されず、検索結果のページは真っ白(空っぽ)になる
  • レイアウトを「2ページ」以外にすると正常に表示される
  • 検索結果のページを何度か更新すると、正常に表示されることもある(確率的には2割程度)

正常に表示されることもあるということは、設定のやり方自体は間違っていないわけで、何が原因なのかかなり悩んだのですが、今度はこちらのサイトにヒントが。

どうやらレイアウトを「2ページ」にした場合、同じページに、Googleが提供する「検索ボックスコード」と「検索結果コード」を表示すると、同じスクリプトが2回書かれることで干渉が起こり、表示がおかしくなるみたいです。

結局、重複するスクリプト部分を削り、

<script>
  (function() {
    var cx = '【検索ID】';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>

とすることで、きちんと検索結果のページに、検索ボックスと検索結果とが表示されるようになりました。

うまくカスタム検索が表示されない方は試してみてください。

トラックバック URL

コメント & トラックバック

ところでテイルズオブレイズ
やりませんか

プレイする時間が取れないので、当面予定はないと思います(;´Д`)

コメントフィード

コメント

皆さまのコメントが励みになっています。ありがとうございます。