Confluence(Cloud版)で見出しをわかりやすくする

Confluenceの見出しの見た目を改善したいという話です。
Server版はルックアンドフィールでカスタムcssが適用できたのですがCloud版はできないようでした。

（注意）
これは自分だけしか適用されない方法です。
チームメンバーも同じように見えてほしいため、Theme適用する（作る?)方法も模索中です。
他に良い方法ご存じの方がいたら教えて下さい。

適用前

適用後

設定方法

StylishというChrome拡張をインストール。
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ja

2024/5/30追記（上記のツールは使えなくなったため）
StylusというChrome拡張をインストール
https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
https://add0n.com/stylus.html

管理画面にて、以下のcssを貼り付けて、

.wiki-content h1 {
    padding: .5em .75em;
    color: #494949;
    background-color: #E0E8F9;
    border-left: 6px solid #1D4A95;
    border-bottom: solid 3px #d7d7d7;
}
.wiki-content h2 {
    padding: .5em .5em;
    color: #494949;
    background: #FFF8CB;
    border-left: solid 5px #F3C759;
}
.wiki-content h3 {
    padding: .25em .5em;
    border-left: 5px solid #446FB7;
    border-bottom: 1px solid #ccc;
}
.wiki-content h4 {
    padding: .3em .6em;
    border-left: 3px solid #F3C759;
    border-bottom: 1px solid #ccc;
}
.wiki-content h5 {
    padding: .2em .5em;
    border-left: 4px solid #CCC;
}

以下の正規表現に一致するURLに対して適用するだけです。

https://.*\.atlassian\.net/wiki/spaces/.*

2024/5/30追加： Confluenceの行をもう少し詰めて表示したい場合

Confluenceの行をもう少し詰めて画面内に表示される情報量を増やしたい場合は以下のcssも追加してください。

適用前

適用後

設定方法

メインコンテンツの行の高さを調整したい場合

div[data-testid=pageContentRendererTestId] p {
    line-height: 16px !important;
}

メニューバーを縦に詰めて表示する場合

a[data-testid=page-tree-item] {
    height: 28px !important;    
}

おわり。