【note】自分の記事一覧の右側サイドバーを非表示にするCSS
自分が作成した記事一覧ページ（https://note.com/notes）の右側サイドバーには、「投稿ネタを集めたカレンダー（何書く？に答えます）」、「創作のヒント（記事を有料販売してみよう）」などがあります。
僕は全く使っていませんでした。
右側サイドバーがあるせいで、その分中央の記事一覧タイルが狭くなっていて使いにくいと感じました。CSSを使って非表示にして中央の横幅を広げてみます。
CSSはあくまで自身の環境上のみの反映です。noteの内部システムを弄るとか、他人にも影響するとかそういうのではないです。
拡張機能を導入できるPCブラウザだけでできます。拡張機能を導入できないスマホやタブレットのアプリ版ではできません。
前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
https://www.naporitansushi.com/stylebot/「note」の投稿した記事一覧の右側サイドバーを消すCSS
スタイルシートを開く
「note」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*【自分の記事ページ】右側サイドバー非表示*/
.t-settings__aside {
display: none !important;
}
/*【自分の記事ページ】中央の記事一覧の横幅*/
.t-settings__center {
max-width: 800px !important;
}右側サイドバーを消したいだけなら、一つ目のCSSのみ書き込みます。
中央の記事一覧の横幅を調整したい場合は、二つ目のCSSも書き込んで「max-width」の数値を各々調整してみてください。上記をそのままコピペしても十分広がります。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
書き込めたら右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：note.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
変わったか確認
今回のCSSは自分の記事管理ページ、すなわちURLは「https://note.com/notes」のみの反映です。ログインして右上のプロフィールアイコン→「自分の記事」をクリックしたら開けます。
CSS適用後は右側サイドバーが丸々非表示になります。
二つ目のCSSを書き込んだ場合、中央の記事一覧の横幅が広がります。
文字数にもよりますが、タイトルが改行されずに一行で表示されます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「note.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、PCウェブサイト版「note」の自分の記事管理ページの右側サイドバーを非表示にするCSSでした。
あんまりnote書かないので、気づかない内に仕様変更で使えなくなっている可能性があります。その際は遠慮なく連絡していただければ時間ある時に修正に挑戦します。
他にもnote関連の記事は書いています。気になった方は当サイト内やGoogle検索等で「note」と検索して活用していただけると嬉しいです。