ふと思い立ってHPの上部にGoogleのカスタム検索をつけました。これでサイト内検索はバッチリ!
そう、機能は動いたのですが、どうも表示がおかしい。右のボタンに虫眼鏡の画像が表示されない…(正常なものは現状のHP上部をご覧ください)
だいたいこういうのはjQueryかBootstrapとかち合ってるのが相場、ということで読み込んでいるcssやらjsやらをつけたり外したりしていたらビンゴ、Bootstrapが原因でした。具体的にはbox-sizing: border-box
が邪魔していたようです。
なので虫眼鏡のボタン「.gsc-search-button
」にbox-sizingの初期値、box-sizing: content-box
を設定することで無事、虫眼鏡が表示されるようになりました。
最近、Bootstrapと他ライブラリとの絡みによるトラブルによく遭遇します。何かあったらとりあえずBootstrapを外してみる、というのもデバッグとしてありかもしれません。