Googleカスタム検索をスタイルシートでカスタマイズ-コードは変更しないよ

 Googleアドセンスのカスタム検索のボックスの表示が気に入らない。

 Googleアドセンスの設定画面では枠線の色とか検索ボックス(検索フォーム)の幅は変えることができるのだが検索ボックス(検索フォーム)の高さは指定できない。

 でも、ほかのWordpressのテーマにGoogleアドセンスのカスタム検索のコードを入れたらデフォルトの状態と違った表示になった。

 コードそのものは変えていないのでテーマのスタイルシートの影響らしい。

 ということは、どのテーマでもスタイルシートの設定を変えるだけでGoogleカスタム検索の見た目を変えることができるんじゃないだろうか?

コードの記述は変えてはいけません!

 Googleアドセンスのコードは設定後収得したコードをそのまま使わないとGoogleのプライバシーポリシーに引っかかる。

 下手するとGoogleアカウントの停止とかにつながる可能性もある。

 ということで、Googleカスタム検索のコードの記述は変えてはいけない。

 カスタマイズするのはテーマのスタイルシートのみ!

Googleカスタム検索のコードを見てみよう

 Googleカスタム検索のコードをじっくり見てみよう。

<form action="URL" id="cse-search-box">
<div> <input type="hidden" name="cx" value="partner-pub-数字" />
<input type="hidden" name="cof" value="FORID:数字" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

 ポイントはid="cse-search-box"という部分。

 この部分のスタイルシートを指定すれば、Googleカスタム検索の概観を変えることができるんじゃないだろうか?

 で、スタイルシートの検索フォームの指定を書き換えてみた。

Googleカスタム検索をスタイルシートでカスタマイズ

 書き換え後のスタイルシートの記述は↓

/****  Google検索ボックス  ****/
#cse-search-box {
	width: 400px !important;
}
#cse-search-box table.gsc-search-box td.gsc-input {
	padding: 20 !important;
}
#cse-search-box input[type=&quot;text&quot;] {
	padding: 0 !important;
	height: 50px;
	width: 150px;
	border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	-webkit-appearance: none;
}
#cse-search-box input[type=&quot;submit&quot;] {
	margin-left: 0 !important;
	background-color: #0062AC;
	border: 1px solid #0062AC;
	color: #FFFFFF;
	height: 50px;
	width: 40px;
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	-webkit-appearance: none;
}

 デフォルトのGoogleカスタム検索が下のようになった。

Googleアドセンス-カスタム検索デフォルト

Googleアドセンス-カスタム検索をスタイルシートでカスタマイズした後

 スタイルシートの各項目の数字を変えたりすればもっと別の見かけにできる。

 でもなぜかサイドバーの検索ボックスの前に「検索」の文字が出てる。

 メインカラムの検索ボックスは別になんとも無いんだけど。

 

おすすめ記事

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

wordpressテーマSTINGER3のスマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする
文字の大きさが変えられないのは、スタイルシートのフォントサイズ指定の単位が問題
FC2ブログテンプレートの文字の大きさを変えてみよう
WordPressで悪戦苦闘中
シーサーブログの記事の直下に広告やブログランキングなどを貼り付ける・コンテンツHTMLを編集する
FC2ブログのデーターバックアップの方法
WordPress4.0、「ウインドウの高さに合わせてエディターを広げる」機能のON・OFF
FTPクライアントソフト「WinSCP」インストールとサーバー接続設定
色コードの収得に便利な無料ソフト・ウェブカラークリエイター
FC2ブログのタイトルの下に文字を入れてみよう
スタイルシートで角の丸いリンクボタンを作って見よう
シーサーブログのタグ検索でアドセンスを表示させない方法・自由形式編
WordPressにFC2ブログの画像を取り込む
WinSCPのバージョンアップ
WordPressテーマTwenty Fourteen(バージョン 3.9.1)で記事下に広告を表示

Menu

HOME

 TOP