【note】記事本文の横幅を好きなサイズに広げるCSS

この記事では、「note」の記事本文の横幅を広くするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を使います。
本記事で紹介するCSSを使えば、「note」の記事の横幅を好きなサイズに変更できます。
「左右の空いているスペースがもったいないなぁ。記事本文を横に広げて、スクロール量を減らしたいなぁ」と思っている方、参考にしてみてください。
CSSなので、好きなサイズに変更できます。いつでもオンオフできます。誰かにバレたり、迷惑をかけることはありません。自身の環境上だけの反映です。
「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
記事本文の横幅を広げるCSS
「note」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*記事本文の横幅*/
.p-article__body {
width: 800px !important;
}
「width」の「800px」を好きな数値に変更します。デフォルトでは、「620px」になっていました。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:note.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、指定したサイズに記事が広がります。左右の空いているスペースが狭くなって、スクロール量が減ります。広げすぎると読みにくくなるので、ほどほどがいいと思います。

一時的に無効化したい場合は、Stylebot→「note.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「note」の記事を好きな横幅に調整する方法でした。
他にもnote関連のCSSをいくつか書いています。気になった方は、当サイト内の検索ボックスで「note」と検索してみてください。