雑が喰おう

はじめてのGoogleカスタム検索のデザインをCSSで変更

Google TiSP
Google TiSP / dannysullivan

Googleのカスタム検索をCSSだけでデザインしてみました。

雑が喰おうでは、Googleのカスタム検索をしようしています。
ちょこちょこブログデザインをいじっているのですが、検索フォームもデザインを変えたかったのですが、オリジナルではそこまで指定できません。

調べてみると、検索フォーム自体にIDが指定されていましたので、CSSで変更できるのでは?と調べてみたところ、やはりできるようでした。

参考にさせてもらったのは、Google カスタム検索の検索ボックスを、CSSだけでデザイン変更する方法 – LIQUID DESIGN BLOGで、丸写しにしようかと思ったのですが、ID名が違うのと、若干位置がずれていましたので、その辺を修正しました。

それ以外はそのまま丸写しですが、一応備忘録的に、雑が喰おう現状でのGoogleカスタム検索のデザインにしていたCSSを残しておきます。
同じようにGoogleカスタム検索のデザインを変更したい場合は参考にしてみてください。

[css] /*Googleカスタム検索*/ #cse-search-box { width: 230px !important; margin-top:10px !important; margin-left: 0 !important; } #cse-search-box td { padding: 0 !important; } #cse-search-box input[type=”text”] { height: 28px; padding: 0 !important; width: 220px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; } #cse-search-box input[type=”submit”] { background: url(“http://blog.lqd.jp/img/icon_search.gif”) no-repeat scroll 50% 50% #FFFFFF; border: 0 none; color: #FFFFFF; height: 25px; margin-left: -28px; overflow: hidden; text-indent: -50px; width: 20px; -webkit-appearance: none; } [/css]

スポンサード リンク

スポンサード リンク

»関連してそうな記事
タグ: ,