「Googleカスタム検索」のデザインをCSSで変更する方法

せめて見た目だけは！@shintarowfreshです。

前回の記事で、設置までは楽勝だったと思うし、前回引用させてもらったコチラの記事。

サイト内検索をGoogleカスタム検索にしてAdSenseと関連付ける方法 | WP SEOブログ

こちらの終わりの方にも実はCSSで見た目を整える方法が書いてあるのですが、ソレよりも、そのままコピペできそうな記事を幾つか見つけましたので、同時に併せてメモ的シェアです。

「Googleカスタム検索」をCSSでゴニョゴニョしてまう方法

非常におおまかに言うと

検索フォームのフォームタグ＜form＞に、#cse-search-boxこんなかんじでidが振られているので、このidを頭にして、子孫をゴニョれば一撃です。

｢Googleカスタム検索｣のデザインをCSSレベルで変更するテクニック | mbdb

Google カスタム検索の検索ボックスを、CSSだけでデザイン変更する方法 – LIQUID DESIGN BLOG

こちらでご紹介頂いている

#cse-search-form {
width: 200px !important;
}
#cse-search-form td {
padding: 0 !important;
}
#cse-search-form input {
height: 25px;
padding: 0 !important;
width: 175px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #DDDDDD;
-moz-box-shadow: 0 0 5px #DDDDDD;
-webkit-box-shadow: 0 0 5px #DDDDDD;
}
#cse-search-form input {
background: url("https://blog.lqd.jp/img/icon_search.gif") no-repeat scroll 50% 50% #FFFFFF;
border: 0 none;
color: #FFFFFF;
height: 25px;
margin-left: -22px;
overflow: hidden;
text-indent: -50px;
width: 20px;
-webkit-appearance: none;
}

コチラのコードをもとに、オリジナルなセッティングをしていけば、まず間違い無いです。

まとめ

コツというほどでもないコツですが、一応検索フォームをid付きの＜div id=”ほにゃらら”＞で囲んでおくと、安心感2倍という感じでしょうか。

かなりちなみにうちのブログの場合。

#cse-search-box {
width: 290px !important;
float: right;
}
#cse-search-box div{

}

#cse-search-box td {
padding: 0 !important;
}
#cse-search-box input {
border: #0095BF;
height: 25px;
padding: 0 !important;
width: 80%;
}
#cse-search-box input {
background: #0095BF;
border: 1;
color: white;
height: 27px;
margin-left: ;
overflow: hidden;
text-indent: ;
-webkit-appearance: none;
width: 17%;
}

ボタンの色を変えた程度のお粗末なものですが、important指定のところはそのまま流用すると幸せになれる感じだと思います。

今までデフォルトのまま放っておいた方は、この機会に自分色に染めてみるのもいいかも知れませんね。

@shintarowfreshでした。

文：シンタロヲフレッシュ

はてブ

pocket

twitter