【note】記事本文の横幅を好きなサイズに広げるCSS
この記事では、「note」の記事本文の横幅を広くするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、「note」の記事の横幅を好きなサイズに変更できます。
「左右の空いているスペースがもったいないなぁ。記事本文を横に広げて、スクロール量を減らしたいなぁ」と思っている方、参考にしてみてください。
CSSなので、好きなサイズに変更できます。いつでもオンオフできます。誰かにバレたり、迷惑をかけることはありません。自身の環境上だけの反映です。
「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/記事本文の横幅を広げるCSS
「note」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*記事本文の横幅*/
.p-article__body {
width: 800px !important;
}「width」の「800px」を好きな数値に変更します。デフォルトでは、「620px」になっていました。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：note.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、指定したサイズに記事が広がります。左右の空いているスペースが狭くなって、スクロール量が減ります。広げすぎると読みにくくなるので、ほどほどがいいと思います。
一時的に無効化したい場合は、Stylebot→「note.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「note」の記事を好きな横幅に調整する方法でした。
他にもnote関連のCSSをいくつか書いています。気になった方は、当サイト内の検索ボックスで「note」と検索してみてください。