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に指定しただけにとどめています。
YouTubeでショートアニメーションを再公開しました。
数日前に一度公開したのですが、画質に満足できなかったため、非公開にして再調整を行っていました。
このたび、ようやく納得のいく、美しい4K画質のショートアニメーションをお届けできるようになりました。
TVなどの大画面でも、「ぱたぱたアニメ館」のショートアニメーションを快適にお楽しみいただけます。
📺 YouTubeチャンネルはこちら
https://www.youtube.com/@sky-blue-world
内容は当サイトで公開中のハロウィンMP4ショートアニメーションと同じものです。
30秒ほどの短いアニメーションで、音とコメントは入っていません。お時間のある時にでも、是非ご覧になってみてください。
次の作品について
すでに次のショートアニメーションも準備中です。
以前当サイトで公開していた携帯用Flashアニメーションを再編集し、当サイトやYouTubeで公開していく予定です。100本以上はあるので、完成次第順次アップロードしていきます。
素材としてのご利用
また、これらのアニメーションはフリー素材としてもご利用いただけます。
ダウンロードファイルも用意しましたので、動画への合成やクロマキーを使った活用なども可能です。
※ ご利用の際には、利用規定をご一読ください。
mp4でどんな素材が作れるか、これから色々と研究していきます。
新しい発見があったら、またご報告しますね。
では、今日も一日良き日でありますように。
このたび、ようやく納得のいく、美しい4K画質のショートアニメーションをお届けできるようになりました。
TVなどの大画面でも、「ぱたぱたアニメ館」のショートアニメーションを快適にお楽しみいただけます。
📺 YouTubeチャンネルはこちら
https://www.youtube.com/@sky-blue-world
内容は当サイトで公開中のハロウィンMP4ショートアニメーションと同じものです。
30秒ほどの短いアニメーションで、音とコメントは入っていません。お時間のある時にでも、是非ご覧になってみてください。
次の作品について
すでに次のショートアニメーションも準備中です。
以前当サイトで公開していた携帯用Flashアニメーションを再編集し、当サイトやYouTubeで公開していく予定です。100本以上はあるので、完成次第順次アップロードしていきます。
素材としてのご利用
また、これらのアニメーションはフリー素材としてもご利用いただけます。
ダウンロードファイルも用意しましたので、動画への合成やクロマキーを使った活用なども可能です。
※ ご利用の際には、利用規定をご一読ください。
mp4でどんな素材が作れるか、これから色々と研究していきます。
新しい発見があったら、またご報告しますね。
では、今日も一日良き日でありますように。
