Chrome拡張機能のドキュメントを見やすくするCSS
· 3 min read
Chrome拡張機能のドキュメントにあるサイドバーのスタイリングを変更して見やすくするCSSを紹介します。
問題点
Chrome拡張機能のドキュメントは左右両方にサイドバーが設置されています。
次の画像のようにフルHDやWQHDで閲覧する分には問題ありません。
![普通のサイズ](/_astro/normal-size.C0HPg8Wo.jpg)
ウルトラワイドモニターでウィンドウを2分割した場合などは、サイドバーが圧迫されて見づらくなります。
![サイドバーが圧迫されている](/_astro/narrow.CRWAlwiO.jpg)
左のサイドバーは基本的に文字数が少ないため、余白が多くなっています。
一方、右のサイドバーは文字数が多いため、文字が複数行に跨ってしまいがちです。
解決法
このサイドバー問題のスタイルを調整するCSSを当てれば解決できます。
CSSの適用方法は2つあります。
おすすめは拡張機能Stylusを使ってCSSを記述・管理する方法です。
余計な拡張機能を入れたくない人は、content scriptを使って自分で拡張機能を書きましょう。この記事を読んでいるくらいですから、拡張機能の開発はたやすいでしょう。
適用させるCSS
では実際に適用させるCSSの紹介です。
@-moz-document url-prefix("https://developer.chrome.com/docs/extensions") { .devsite-sidebar { --devsite-js-sidebar-max-width: 220px; } body[ready] devsite-book-nav, .devsite-book-nav-bg { width: 160px; } body[layout=docs] .devsite-main-content[has-book-nav][has-sidebar] { grid-template-columns: minmax(160px, 1fr) minmax(752px, 936px) minmax(220px, 1fr); } .devsite-nav { --devsite-nav-font-size : 14px; } .devsite-nav-list a { padding: 4px; }}
サイドバーの幅・フォントサイズ・パディングを調整します。
拡張機能のドキュメントを対象とするため、https://developer.chrome.com/docs/extensions
で始まるURLをターゲットにします。
次の画像が、Stylusを使ってCSSを適用したときのドキュメントの見た目です。
![適用後のドキュメントの見た目](/_astro/change-styles.BqYqw9gW.jpg)
左のサイドバーが狭くなりました。右のサイドバーは少し広く、1行あたりに表示される文字数が増えています。
本記事で紹介したCSSは2024年7月14日時点でのドキュメントに基づいています。
Chrome拡張機能の公式ドキュメントはたまにデザインが変わるため、未来永劫使えるとは限りませんのでご注意ください。