sky-blogGoogleカスタム検索を設置
「ぱたぱたアニメ館」トップページの右上に、Googleカスタム検索を設置しました。その検索ボックスの構造を知りたくて、各クラスに色を付けて調べてみました。
▼ デモ画像
※ 実物はこちらです。検索対象は『ぱたぱたアニメ館』内のコンテンツのみです。
▼ 使用したCSS（説明付き）
▼ 複雑な構造について
HTMLを確認してみると、Googleカスタム検索は table タグを何重にもネスト（入れ子）していて、かなり複雑な構造になっていました。
クラス名を見ても、それが画面のどの部分を指しているのかは、実際に色を付けてみるまで分かりませんでした。
▼ Google独自のクラスについて
gsc-control-cse や gsc-search-box などは、Googleが自動で生成している独自のクラス名なので、将来的に仕様変更で名前が変わる可能性もあります。
また、GoogleのCSSでは !important が多用されているため、こちらのスタイルを確実に反映させたいときは、自分のCSSにも !important を付けたほうが良さそうです。
▼ 実際に設置した検索ボックスでは
ただ、元のデザインが私の好みに合っていたので、実際に設置した検索ボックスでは横幅を330pxに指定しただけにとどめています。
▼ デモ画像
※ 実物はこちらです。検索対象は『ぱたぱたアニメ館』内のコンテンツのみです。
▼ 使用したCSS（説明付き）
.gsc-control-cse {
width:300px !important;
background-color:hotpink !important;
} /* 検索全体の背景をホットピンク、幅を330px */
.gsc-search-box {
border:1px solid blue !important;
} /* 検索ボックスの外枠に青の実線枠 */
.gsc-input {
background-color:silver !important;
} /* 入力欄にシルバーの背景 */
.gsc-input-box {
border:3px dashed black !important;
} /* 入力ボックス全体に黒い点線枠 */
.gsc-search-button {
border:3px solid skyblue !important;
background-color:yellow !important;
} /* 検索ボタンに空色の実線枠と黄色の背景 */
.gsc-search-button svg {
fill: red !important;
} /* 虫眼鏡アイコンの色を赤に */
.gscb_a {
background-color:orange !important;
color:white !important;
} /* 入力後に表示される✕マークにオレンジ背景と白の文字色 */
width:300px !important;
background-color:hotpink !important;
} /* 検索全体の背景をホットピンク、幅を330px */
.gsc-search-box {
border:1px solid blue !important;
} /* 検索ボックスの外枠に青の実線枠 */
.gsc-input {
background-color:silver !important;
} /* 入力欄にシルバーの背景 */
.gsc-input-box {
border:3px dashed black !important;
} /* 入力ボックス全体に黒い点線枠 */
.gsc-search-button {
border:3px solid skyblue !important;
background-color:yellow !important;
} /* 検索ボタンに空色の実線枠と黄色の背景 */
.gsc-search-button svg {
fill: red !important;
} /* 虫眼鏡アイコンの色を赤に */
.gscb_a {
background-color:orange !important;
color:white !important;
} /* 入力後に表示される✕マークにオレンジ背景と白の文字色 */
▼ 複雑な構造について
HTMLを確認してみると、Googleカスタム検索は table タグを何重にもネスト（入れ子）していて、かなり複雑な構造になっていました。
クラス名を見ても、それが画面のどの部分を指しているのかは、実際に色を付けてみるまで分かりませんでした。
▼ Google独自のクラスについて
gsc-control-cse や gsc-search-box などは、Googleが自動で生成している独自のクラス名なので、将来的に仕様変更で名前が変わる可能性もあります。
また、GoogleのCSSでは !important が多用されているため、こちらのスタイルを確実に反映させたいときは、自分のCSSにも !important を付けたほうが良さそうです。
▼ 実際に設置した検索ボックスでは
ただ、元のデザインが私の好みに合っていたので、実際に設置した検索ボックスでは横幅を330pxに指定しただけにとどめています。
