【Stylebot】Googleサーチコンソールを角丸フローティングデザインにするCSS

2021年12月9日Stylebot&Stylus

Stylebot のアイコン

この記事では、Googleサーチコンソールのいたるところを角丸フローティングデザインにするCSS について書きます。

ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能「Stylebot」を使います。

サチコを角丸フローティングデザインに変更した画面

自分が運営しているブログのアクセス解析ができるサイト「Googleサーチコンソール」(以下、サチコ)を角丸フローティングデザインにするCSS です。

2021年11月後半あたりから、サチコのデザインがモダンな角丸デザインに一新されました。検索パフォーマンスやサマリーなどの表の四隅がカクカクから丸みを帯びたデザインになっています。

Googleサーチコンソール のスクリーンショット

それだけでも以前よりかは美しいんですが、一部デザインは以前のまま変化していません。そこで、Stylebot を使って残りの部分も角丸化 & 影を付けて浮いているようにしてみます。

ホバー時にアニメーション(押し込む動作)をつけることで、より浮いている感がでるようにしています。

ほぼ全ての項目を角丸化 & 影を付けます。参考までに動画を貼っておきます。

前提

この記事は、既にStylebot をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

CSS

書き込むコードは以下になっています。

/*トップの検索ボックス*/
form.gb_Ne {
  box-shadow: -4px 7px 4px #c8c8c8;
  transition: 0.3s;
  background-color: white;
}

/*トップの検索ボックス:ホバー時*/
form.gb_Ne:hover {
  box-shadow: 0 7px 4px #c8c8c8;
  transform: translateY(4px);
  background-color: #c1e4e9;
}


/*
--------------------------
サチコ角丸フローティング化
--------------------------
*/

/*サマリー*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.txidre,
/*URL検査*/
.qtMyGd,
.LgQiCc.vOSR6b.VBWwvf,
/*検索パフォーマンス*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.YJ1SEc.pTyMIf,
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.YJ1SEc,
/*カバレッジ-グラフ-*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.kPY4qf,
/*カバレッジ-詳細-*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.vt0KLe.eU8L1,
/*サイトマップ-新しいサイトマップの追加-*/
.LgQiCc.vOSR6b.RK5YRd,
/*サイトマップ-送信されたサイトマップ-*/
.LgQiCc.vOSR6b.BEC6H,
/*削除*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.vt0KLe,
/*ページエクスペリエンス*/
.LgQiCc.vOSR6b.GdTNvd.xuVMcd,
/*ページエクスペリエンス-ウェブに関する主な指標-*/
.U26fgb.O0WRkf.zZhnYe.C0oVfc.Q3X6Xd.WMr8Mc.brH9re.hcrKl.M9Bg4d,
/*ページエクスペリエンス-モバイルユーザービリティ-*/
.U26fgb.O0WRkf.zZhnYe.C0oVfc.Q3X6Xd.WMr8Mc.SAaDVd.ECAAmc.M9Bg4d,
/*ページエクスペリエンス-HTTPS-*/
.LgQiCc.vOSR6b.Q3X6Xd.SAaDVd.ssWap,
/*ウェブに関する主な指標*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.f2i32d,
/*その他のメニュー項目*/
div[jscontroller="QeBYfc"] {
  border-radius: 15px;
  box-shadow: -13px 14px 3px #c8c8c8;
  transition: 0.3s;
  border: 2px solid #1e73be;
}



/*
--------------------------
サチコ角丸フローティング化:ホバー時
--------------------------
*/

/*【ホバー時】サマリー*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.txidre:hover,
/*【ホバー時】検索パフォーマンス*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.YJ1SEc.pTyMIf:hover,
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.YJ1SEc:hover,
/*【ホバー時】URL検査の結果*/
.qtMyGd:hover,
.LgQiCc.vOSR6b.VBWwvf:hover,
/*【ホバー時】カバレッジ-グラフ-*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.kPY4qf:hover,
/*【ホバー時】カバレッジ-詳細-*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.vt0KLe.eU8L1:hover,
/*サイトマップ-新しいサイトマップの追加-*/
.LgQiCc.vOSR6b.RK5YRd:hover,
/*サイトマップ-送信されたサイトマップ-*/
.LgQiCc.vOSR6b.BEC6H:hover,
/*【ホバー時】削除*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.vt0KLe:hover,
/*【ホバー時】ページエクスペリエンス*/
.LgQiCc.vOSR6b.GdTNvd.xuVMcd:hover,
/*【ホバー時】ページエクスペリエンス-ウェブに関する主な指標-*/
.U26fgb.O0WRkf.zZhnYe.C0oVfc.Q3X6Xd.WMr8Mc.brH9re.hcrKl.M9Bg4d:hover,
/*【ホバー時】ページエクスペリエンス-モバイルユーザービリティ-*/
.U26fgb.O0WRkf.zZhnYe.C0oVfc.Q3X6Xd.WMr8Mc.SAaDVd.ECAAmc.M9Bg4d:hover,
/*【ホバー時】ページエクスペリエンス-HTTPS-*/
.LgQiCc.vOSR6b.Q3X6Xd.SAaDVd.ssWap:hover,
/*【ホバー時】ウェブに関する主な指標*/
.VfPpkd-WsjYwc.VfPpkd-WsjYwc-OWXEXe-INsAgc.KC1dQ.Usd1Ac.AaN0Dd.f2i32d:hover,
/*【ホバー時】その他のメニュー項目*/
div[jscontroller="QeBYfc"]:hover {
  box-shadow: -3px 10px 8px #c8c8c8;
  transform: translateY(10px);
  border: 2px solid #dc143c;
}

多分、CSS 分かる方が見たら「おえっ!」ってなるくらい汚いです。僕は初心者なので、とりあえずセレクタ詰め込むしか方法を知りません。

以下画像のようになればOKです。かなりごちゃごちゃしているので間違いがないようにそのままコピペしましょう。

サチコカスタマイズCSS

貼り付けたら、表にCSS が適用されます。

サマリー

検索パフォーマンス、カバレッジ、エクスペリエンス、拡張の項目全てに角丸+影+青い枠線の装飾が施されます。

サマリー

マウスを乗せると押し込まれます。

マウスホバー時のCSS

検索パフォーマンス

検索パフォーマンスのグラフも同じようにフローティングデザインになっています。

検索パフォーマンス

URL 検査

URL の検査結果の項目もフローティングにしました。

URL 検査

カバレッジ

カバレッジも同様です。エラーをどうにかしないといけないんでしょうが今のところ放置です。

カバレッジ

サイトマップ

サイトマップ

ページエクスペリエンス

ページエクスペリエンス

モバイルユーザービリティ

モバイルユーザービリティ

リンク

リンク

まとめ

以上、サチコのデザインを違和感なく角丸フローティングデザインにするCSSについてでした。

フローティングいいですね。好きです。

Posted by ナポリタン寿司