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

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

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

http://sozoen.com/yuichiro/google-custom-search

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

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

<div id="gsc">
 <gcse:searchbox-only></gcse:searchbox-only>
</div>
スポンサーリンク
スポンサーリンク

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

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

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

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

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

/*
ここに独自の 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;
}
/* テキスト入力フォームとボタンの位置 */
#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:28px !important;
    margin-top: 100px;
}
 
 
#gsc input[type="text"]:focus {
    border: 2px solid #F5A9E1 !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: #E30017 !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 #E30017 !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0px;
}
/* 入力時に出る「×」ボタンの位置調整 */
 
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
}

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

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

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

まとめ

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
bibalogue