スポンサーリンク
最近、Googleカスタム検索の調子がよろしくないですね。以前は、検索結果が表示されなくなるというトラブルが起きました。
Googleカスタム検索の検索結果が表示できなくなった時の対処法
http://sozoen.com/yuichiro/google-custom-search-problem
そして今回は、突如Googleカスタム検索のデザインが崩れてしまう謎のトラブルが起こりました。
はじめは、Googleカスタム検索のCSSがうまく読み込めてないのかな。と思いました。
ところが、試しにdisplay:nooneプロパティを設置してみたところ、きちんと反映されたので、CSSはきちんと読み込めているようです。
いろいろと試行錯誤し、原因は最後まで謎でしたが、無事に修正できました。
今回は、Googleカスタム検索のデザイン修正の様子を紹介したいと思います。
Googleカスタム検索のデザインが突然崩れてしまい困っている。という方に参考になればと思います。
Bootstrap原因説
Bootstrapを利用したサイトだとGoogleカスタム検索のデザインが崩れる場合があるそうです。
（Bootstrapのワイルドカードが設定されいるため）
参考文献
Bootstrapサイトに設置した時に崩れるGoogleカスタム検索のデザイン修正方法
当ブログもBootstrapを利用を利用しています。なので、対処としてカスタム検索のdiv要素に任意のclassを指定し、スタイルシートに記述しました。
.search * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
ページを再度読み込むとなんと、直りました！
と思ったやさき、他ページに移るとまたデザインが崩れてしまいました。
トプページに戻っても崩れたままです。。
この対処法は失敗に終わりました。
Google カスタム検索のコードの再取得
次に、Google カスタム検索のコードを再取得し、貼り直してみました。
Google カスタム検索の管理画面にアクセスし、検索エンジンのデザインをカスタマイズから作成してみました。
そして、作成したコードを以前のものと張り替えてみました。
結果は、またしてもだめでした。
今回は、以前とは違うデザインの崩れ方をしていました。
（僕が作ったデザインのCSSを指定していないため。）
キャッシュの削除
WordPressでは、キャッシュ系プラグインが原因でデザイン崩れが発生するときがあります。
そこで、プラグインのキャッシュ消去、および停止を行い、数時間待ってみました。
だめでした。結果は完敗です。。
テンプレートファイルの復元
ここまでくると、もうやけです。これでだめならもう諦めよう。
そう思い、Googleカスタム検索が設置してあるテンプレートファイルをバックアップファイルから復元してみました。
今回設置してあるテンプレートファイルは、header.phpです。
なので、３日前にバックアップされたheader.phpを全コピーして、現在使用しているheader.phpに貼り付けて更新してみました。
すると、なんと、直りました！！
他のページに移動してもデザインが崩れません。
しかし、謎です。なぜ、今回のようなトラブルが起こってしまったのでしょうか。
最近、header.phpをいじった覚えはありません。
思い当たるふしといえば、昨日行われたWordPressアップデートです。
アップデート時に何かあったのでしょうか。WordPressアップデートでheader.phpの一部コードが書き換えられることはありえないですし。
うーむ、わかりません。（笑）
まあ、とりあえず、しばらく様子をみてみます。
何より直ってよかったです。
ご観覧ありがとうございました！
スポンサーリンク