ブログにGoogleカスタム検索を設置しカスタマイズしてみました!


サイドバー(PC)とインデックスリストトップ(モバイル)にGoogleカスタム検索を設置しました。Googleカスタム検索は、Googleアカウントを登録している場合はすぐにコードを取得し利用することができます。

ところが、iPhoneなどのモバイル画面上で表示した場合に、検索窓をクリックすると、検索窓の各部が消えてしまうことに気づきました。

そこで、カスタマイズに取り組んでみましたので記事にします。参考にしたのは、次のサイトです。Googleカスタム検索のカスタマイズ方法だけでなく、その設置方法についても詳しく書かれていて、とてもわかりやすかったです。

Googleカスタム検索の設置方法とカスタマイズ方法について紹介しています。

カスタマイズ準備のために

Googleカスタム検索のコードを取得したら、検索ボックスのタグを以下のように<div>タグで囲み、id属性をつけます。ここでは、参考したサイトと同じく、id属性を”gsc”にしました。

スポンサーリンク

PCとモバイルで表示位置を変更するために

このためには、使用しているテーマSimplicityの機能を使いました。Simplicityには、パソコン用テキストウィジェットとモバイル用テキストウィジェットが用意されているため、PCとモバイルでのウィジェット表示を簡単に制御することができます。

今回は、Googleカスタム検索のコードを貼り付けたパソコン用テキストウィジェットをサイドバートップに設置し、モバイル用テキストウィジェットをインデックスリストトップに設置しています。

スポンサーリンク

表示をカスタマイズするために

以下のCSSをスタイルシートに追記しました。参考にしたサイトにあるCSSをもとに、枠の大きさや配色を微調整しています。

スポンサーリンク

CSSに追加したことを有効にするために

最初は、このCSSをテーマSimplicityのstyle.cssとmobile.cssの両方に追加しました。ところが、モバイル表示ではこの追加CSSが反映されるのに、PC表示では表示されませんでした。

そこで、WordPressの外観>カスタマイズ>追加CSSのところにこのcssを追加してみました。すると、cssで指定した内容のGoogleカスタム検索が表示されるようになりました。

まとめ

なんとかGoogleカスタム検索をブルグに設置することができました。最初にも紹介しましたが、Suzuki Yuichiroさんのブログ記事がとても役立ちました。ありがとうございました。