AWSのお気に入りバーアイコンを大きくしてみた

こんにちは、臼田です。

みなさん、AWSマネジメントコンソール使ってますか？(挨拶

今回はちょっとした自分のお悩み解決をしたので共有します。

AWSのお気に入りバーのアイコン小さくね？

まずはこちらを御覧ください。

先日お気に入りバーの表示でサービス名を省略したアイコンのみの表示にできるようになりました。

その結果たくさんアイコンを並べられるようになったのですが…、アイコンが小さい！？

サービス名が表示されていたときはあまり気にならなかったですが、アイコンサイズでどのサービスかを識別しづらいなーと私は思いました。

おっきくしてみた

というわけで大きくしてみました。御覧ください、ばーん。

これなら十分識別できそうです。

今回は自分で定義したCSSを適用できるStylusを利用して大きくしてみましたのでその方法を共有します。

以下のあたりを参考にしています。

StylusはGoogle ChromeとFirefoxをサポートしていて、Microsoft Edge (Chromium)でも利用できるそうです。

Stylusの拡張をインストールしたら管理画面から設定していきます。左カラムの「新スタイルを作成」を押します。

作成画面で「インポート」を押します。

以下のコードを貼り付けて「スタイルを上書き」します。

2023/02/21追記: 元々中間にあったnavが無くなって動作しなくなったので、以下のコードを差し替えました。画像はそのままなのでご了承ください。

@-moz-document domain("console.aws.amazon.com"), domain("phd.aws.amazon.com") {
/* since 2023/02/21 */
#awsc-nav-header > nav > div:nth-child(2) > div > ol > li > a{padding: 0px; margin: 0px 2px;}
/* サービスアイコンのみ利用時 */
#awsc-nav-header > nav > div:nth-child(2) > div > ol > li > a > div{ width: auto; height: 28px;}
#awsc-nav-header > nav > div:nth-child(2) > div > ol > li > a > div > img{ width: inherit; height: inherit;}
/* サービス名とアイコン利用時 */
#awsc-nav-header > nav > div:nth-child(2) > div > ol > li > a > div > div{ width: auto; height: 28px;}
#awsc-nav-header > nav > div:nth-child(2) > div > ol > li > a > div > div > img{ width: inherit; height: inherit;}
}

任意の名前を入れて「保存」します。

これで大きくなります。ちなみに貼り付けたコードにある通り、サービス名とアイコン両方利用時でも以下のように適用されるようになっています。

それぞれ若干HTMLの構造が違うためCSSも別れています。好みに応じて調整してください。

このCSSはある程度動作確認していますが、私もあんまり詳しくないのでいい修正案とかあったら教えて下さい。

フィードバックしよう

今回は自分の手元でUIを変更しましたが、困っていることがあるならAWSに直接フィードバックしましょう！AWSマネジメントコンソールでは左下からフィードバックできます。

UIフィードバックの項目があるのでこちらを利用してください！私もフィードバックしています！

まとめ

お気に入りバーのサービスアイコンをおっきくしてみました。

フィードバックもしつつ、快適にAWSを利用しましょう！