googleのカスタム検索

質問

googleのカスタム検索をホームページに設置しようと思っています。
アカウント取得して、設置しようとしているのですが、
ボタンを画像にしたり、ボックスの幅を変更できないのでしょうか？

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('011829881965112279581:kkxhjvjwxl4');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("http://xxx.com");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

色々調べたのですが、イマイチ要領を得ることができませんでした。
教えてくださいお願いします。

回答No.1

4017B

とりあえず、Googleカスタム検索の編集ページTOPから入って…
＞http://www.google.com/cse/manage/all

・「コントロールパネル」→「デザイン」→「シンプル」→「カスタマイズ」
～って行けば、色とかは自由に変更出来ます。

それ以上の細かい幅や段組調整などは、個別にCSSを弄らないと無理ですね。
＞http://www.google.com/cse/style/look/minimalist.css

上記サンプルがGoogleカスタム検索の基本CSSです。これを基にして、後は各個人で編集した独自のCSSファイルを自分のHPサーバ内に設置して、各ページに読み込ませてデザインを適用させます。

具体的に何がどの箇所に適用されているのかは、実際にGoogleのコードが吐き出すHTMLを貼って置きますので、参考にしてみて下さい（見やすいように改行などは弄ってあります）。

━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━
<div class="gsc-control-searchbox-only gsc-control-searchbox-only-ja" dir="ltr">
<form class="gsc-search-box" accept-charset="utf-8">

<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input"><input
　autocomplete="off" type="text" size="10" class=" gsc-input" name="search" title="検索"
　style="
　background-image: url(http://www.google.com/cse/intl/ja/images/google_custom_search_watermark.gif);
　background-attachment: initial;
　background-origin: initial;
　background-clip: initial;
　background-color: rgb(255, 255, 255);
　background-position: 0% 50%;
　background-repeat: no-repeat no-repeat;
"></td>
<td class="gsc-search-button"><input type="submit" value="検索" class="gsc-search-button" title="検索"></td>
<td class="gsc-clear-button"><div class="gsc-clear-button" title="結果をクリア">&nbsp;</div></td>
</tr>
</tbody>
</table>

<table cellspacing="0" cellpadding="0" class="gsc-branding">
<tbody>
<tr>
<td class="gsc-branding-user-defined"></td>
<td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td>
<td class="gsc-branding-img"><img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"></td>
</tr>
</tbody>
</table>

</form>
</div>
</div>
━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━

Googleが吐き出すコードにしては、<table>が多用されててちょっと自由にデザインするのは難儀かも？