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に指定しただけにとどめています。
CSSアニメーション
ボタンを押すと、いろいろな定番のCSSアニメーションが表示されます。フラットデザインに動きを加える手法としてCSSアニメーションは便利ですが、当サイトではあまり使用する機会がありません。
では、なぜ試しているのかというと、このブログでどこまで表現できるかを検証しているからです。
花がふわふわ降ってくる
花をふわふわ降らせるまではGeminiに手伝ってもらい、
花を1分後に消すのはChatGPTに手伝ってもらいました。
（Geminiは、消すことができなかった）
やっと完成した
Kent Webさんのブログを設置しました。
今回はかなり時間がかかりました。
レイアウトはもう少し、細かい所もいじる予定です。
設置の際に悩んだ箇所をメモしておきます。
（同じ箇所で悩む人もいらっしゃるのでは？）
今回悩んだのが、「$cf{htmldir} = '..';」の設定です。
ここは、そのままでOKでした。
なかなかブログが反映しないものだから悩みましたが、記事を１つ書いて、そのあと「変更反映」を押せばブログのトップページは表示されました。
私は、解説ページをしっかり読まずに適当にやるタイプなので。^^;
やっと完成しました。やれやれ。
疲れたので、プロフの画像はGeminiに作ってもらいました。
このブログはタグやスタイルシートが使えるので面白そうです。
またいろいろ試してみます。
コメント欄は暫く閉じておきます。
返信もできそうにないので。
今回はかなり時間がかかりました。
レイアウトはもう少し、細かい所もいじる予定です。
設置の際に悩んだ箇所をメモしておきます。
（同じ箇所で悩む人もいらっしゃるのでは？）
今回悩んだのが、「$cf{htmldir} = '..';」の設定です。
ここは、そのままでOKでした。
なかなかブログが反映しないものだから悩みましたが、記事を１つ書いて、そのあと「変更反映」を押せばブログのトップページは表示されました。
私は、解説ページをしっかり読まずに適当にやるタイプなので。^^;
やっと完成しました。やれやれ。
疲れたので、プロフの画像はGeminiに作ってもらいました。
このブログはタグやスタイルシートが使えるので面白そうです。
またいろいろ試してみます。
コメント欄は暫く閉じておきます。
返信もできそうにないので。
