【GoogleAdSense】Googleカスタム検索エンジンを自分好みにカスタマイズ！！- GUIで簡単編集 -

【GoogleAdSense】カスタム検索エンジンは利用した方がいいのか？「用途」「利用方法」「実装方法」から見るカスタム検索エンジンの価値 - Surprised Blog

デザインカスタマイズ

今回は、GoogleAdSense(グーグルアドセンス)のカスタム検索エンジンの簡単カスタマイズ記事になります。

カスタム検索エンジンの、検索ボックスと検索ボタンのスタイルは簡単に編集できるので、初期デザインではなくサイトに合ったデザインに変更しました。

・初期デザイン(画像)

・当サイトの検索ボックスと検索ボタン

 

検索ボックス

検索ボックスのデザインは枠線の色のみ変更できます。

検索ボタン 

検索ボタンの編集では、枠線の色 / 背景色 / アイコンの色 が変更できます。

CSSを使った編集

当サイトの検索ボックスは、枠の角度を変えるためにCSSでスタイルの編集をしました。グーグルの方では変更ができなかったためです。

しかし検索ボックスコードを取得しても、HTML要素は一つしかなく全体の要素が表示されるのは検索ボックスコードに含まれているScript処理が終わってからです。そのため、何のクラスがあるか検索ボックスコードだけではわかりません。

そこで、CSSを設定する前に一度検索ボックスを表示してから、ブラウザの開発者ツールを使って編集しました。

誰でも簡単にブログカスタマイズが「楽になる方法 」| 開発ツール - IT the Best

枠の角度を変えるCSS

.gsc-input-box {
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
}