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" />
色々調べたのですが、イマイチ要領を得ることができませんでした。
教えてくださいお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
とりあえず、Googleカスタム検索の編集ページTOPから入って…
>http://www.google.com/cse/manage/all
・「コントロールパネル」→「デザイン」→「シンプル」→「カスタマイズ」
~って行けば、色とかは自由に変更出来ます。
それ以上の細かい幅や段組調整などは、個別にCSSを弄らないと無理ですね。
>http://www.google.com/cse/style/look/minimalist. …
上記サンプルが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_ …
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="結果をクリア"></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>が多用されててちょっと自由にデザインするのは難儀かも?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホで撮った写真をUSBケ...
-
3COINSのスマートウォッチを使...
-
パソコンのWi-Fiについてご相談...
-
メルカリで普通郵便で購入した...
-
「PC Helpsoft Driver Updated...
-
パソコンのデータについてご相...
-
メモ帳で開く設定を元に戻したい。
-
電池のLR44 LR43 LR41は、LR113...
-
常時オンディスプレイとロック...
-
全角入力
-
スマホ
-
32GB 型番X8 のMP3プレイヤーを...
-
100倍倍率双眼鏡は見にくいです...
-
USBメモリの紛失対策。みなさん...
-
パソコンのマイクロソフトの、...
-
GPS機能がその時間帯に動いても...
-
ガレージバンドを開こうと思っ...
-
メルカリでは、パーツが破損し...
-
3年ほど前、外付けHDDへ子供達...
-
txtはワードで開くのは間違いで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
セマフォのP操作、V操作の「P」...
-
Zoomで、アクセス時、新しいバ...
-
会員制だったラーメン屋「一蘭...
-
google keepのメモの一部が突然...
-
GoogleからGmailに下記の内容が...
-
「未端」ってどういう意味ですか?
-
googleのページに接続できません。
-
PCM2906Bオーディオコーディッ...
-
Flash Buster というドライバ...
-
TOTOのトイレの足踏み式操作弁...
-
Googleの口コミで投稿されて レ...
-
面白い文字変換ミスを教えてく...
-
ブラウザが最新ではありません...
-
wordをPDF又はpostscriptに変換...
-
Google ColabでGoogleドライブ...
-
「One-Time Rights」と「First-...
-
スーパーファインピッチFDトリ...
-
knudsen(クヌーセン)層について
-
機種変更したときのgoogleアカ...
-
ひつじのショーンのグッズはど...
おすすめ情報