スモーキー・ブルースカフェ

メニューは店主のオススメアレコレです。

Googleカスタム検索のデザインが崩れた時の対処法

ブログにGoogleカスタム検索を設置しました。

前から他のサイトではよく見てたのですが、どういうものか理解してなかったのです。

デフォルトの検索より正確で高度な検索が出来る様です。

しかしいざ設置してみると、デザインが崩れて表示されます。

何故だ?とGoogle検索かけるも中々同じ症例は見つからず。


やっと見つけたのがこの記事。
HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法 - WordPressの使い方と設定 - Webkaru



どうやらテーマによってデザインが崩れる事が有るみたい。

自分はstinger5を使っているので、stinger5にカスタム検索を導入すると皆こうなるのかな。


で、記事の通りHTMLフォームを使ってGoogleブランド表示をJavascriptにしたら万事解決でした。

注、ソースコードを載せようと思ったのですが、よくブログ等で見る綺麗にソースを載せるにはプラグインが必要みたいですし、たまたま見つけた変換ツールはうまくいかないので断念。お手数ですがリンク先の記事でご確認下さい。m(_ _)m


♦︎因みにユーザーIDは、設定→基本→詳細の欄の「検索エンジンID」をクリックすると見れます。

それと、検索欄が重複しちゃうのでデフォルトの検索欄は消しました。
(stinger5のデフォルトは表示デザインも綺麗ですし特に変える必要ないかも。笑)

あとがき


今回の事例はテーマによるものだったりするので、ググってもケースが少ないのか中々出てこなくて見つけるのに苦労しました。

しかし、この何かカスタマイズで問題発生→解決した時の高揚感は癖になりますな。

本当はすんなりいったほうが楽なんでしょうけどね。