Goocleカスタマイズ検索窓のデザインと機能変更

質問

お世話になります。
Goocleカスタマイズ検索でサイト内検索を設置していますが、https://cse.google.co.jp/cse/all からデザインや検索結果表示設定画面で設定をしてソースを取得すると、「検索」ボタンの位置が必ず検索窓の右にしか出せなかったり、「検索」ボタンの右にリセット用の×印が出ているのを消せなかったりして困っています。

また、表示された検索結果のリンクをクリックすると、自分のGoogleアカウントでの検索表示結果設定を新規タブで開かないように設定してあるにもかかわらずリンク先のページが新規タブで開かれてしまいます。
ちなみに、普通にGoogleのトップページから検索した検索結果の場合は、もちろん、表示された検索結果のリンクをクリックすると同一タブの中でリンク先ページが表示されます。

下の画像のように、検索窓をセル幅いっぱいにして、「検索」ボタンを検索窓の下に自作画像で配置し、また、検索結果をクリックしたら同一タブの中でリンク先ページが表示されるようにしたいのですが、何か方法は無いでしょうか？

私はあまり専門知識がないので、１からjsを作る能力はありません。
このため、https://cse.google.co.jp/cse/all で取得したソースを少し書き換えることで何とか出来ないかと思っているのですが、無理でしょうか？

おわかりの方がいらっしゃいましたら、どうかよろしくお願いいたします。

回答No.2

noname#217950 · ベストアンサー

すみませんでした。たしか埋め込みコードはjavascriptで記述されていましたよね。CSSでデザインの調整はできますが、画像に置き換えるのには、たしかinputタグの中をいじりたいですよね。CSSしかいじれない状況ですから、ちょっと難しいかもしれません。

以降は少しでも思い通りのデザインに近づけばと思い書きます。

私がCSSをいじったのは、検索結果の行が重なって表示されたりpaddingやmarginなどがメチャクチャなため非常に見づらく、デザインのミスかのように見えるほど不恰好だったための調整です。

もしかして、こんな部分でしょうか？
と、ソースを貼って頂きましたが、そんなクラス名だろうとは思いますがハッキリとはわかりません。対応箇所を見つけるのに私は少し手間取りました。

多分、あのCSSファイルはカスタム検索の様々なデザインテンプレートに対応している物だと思います。不要な部分がたくさんあります。似たような名前のクラスがたくさんあって、これだ！と思っても反応なかったりしました。似たクラス名が付いている箇所が何か所かあるハズなので、1つずつ試しにいじっていって、何か変化が出たところを変更していくといいと思います。

お望みの答えではなくすみませんでした。

お礼

再度のご回答、どうもありがとうございました。
引き続きテンプレートの解析にトライしていますが、なかなか難しいですね。
諦めずにやってみます。
どうもお手数をおかけしました。

回答No.1

noname#217950

対応してそうな箇所を探して『!important』を使ってゴリ押しです！

お礼

ご回答ありがとうございます。
!important で設定を優先に出来ることが存じておりますが、その「対応していそうな部分」の見つけ方がわからないのと、見つけたとしても、どうすればスタイルで買い行を入れられるのかがわからないのでお尋ねさせて頂いております。

input.gsc-search-button {
border-color: #CCCCCC;
background-color: #FFFF00;
}

もしかして、こんな部分でしょうか？
だとしたら、この前に改行を入れて、このボタンを画像化するにはどうしたら良いのでしょうか？