Surprised Blog

話題のニュース、流行の商品やサービスの情報をまとめた記事や雑学系の記事をメインに投稿します。ふと目にして役に立つような情報を発信するのが目標のブログです。

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

 

 

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

デザインカスタマイズ

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

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

 

・初期デザイン(画像)

f:id:Surprisedblog:20190821004017p:plain

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

 

 

 

検索ボックス

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

f:id:Surprisedblog:20190821005016p:plain

 

 

検索ボタン 

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

 

f:id:Surprisedblog:20190821010130p:plain

 

 

CSSを使った編集

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

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

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

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

 

枠の角度を変えるCSS

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