【note】こちらもおすすめ記事の列数を増やすCSS

この記事では、「note」の記事下に表示される「こちらもおすすめ」の列数を増やして、コンパクトにするCSSを書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を使います。
本記事で紹介するCSSを使えば、「note」の記事下にある「こちらもおすすめ」の記事をコンパクトにできます。
通常は、2列のタイル表示になっています。ちょっと大きすぎる感が否めません。2列だとスクロール量が増えるので、コンパクトにして、4列、5列くらい表示してほしいです。

設定で変更できるか調べましたが、そのような項目がなかったので、CSSで実装してみます。
「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
こちらもおすすめ記事のタイル数を増やすCSS
「note」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*おすすめ記事の横幅*/
.p-article__recommendInner {
width: 900px !important;
}
/*おすすめ記事のタイルサイズ*/
.o-othersRecommend__item {
width: calc(20% - 8px) !important;
}
/*おすすめ記事のタイトル文字サイズ*/
.m-noteBody__title {
font-size: 12px !important;
}
/*おすすめ記事内余白*/
.m-largeNoteWrapper__body {
padding-right: 8px !important;
padding-left: 8px !important;
}
/*おすすめ記事の書いた人の余白*/
.m-largeNoteWrapper__footer {
padding: 4px 0 0 !important;
}
/*おすすめ記事のスキ(いいね)非表示*/
.m-noteBody__status {
display: none !important;
}
/*おすすめ記事の三点リーダボタンサイズ*/
.m-largeNoteWrapper__footer .a-icon--more:before {
font-size: 17px !important;
}
書き込めたら、右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:note.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。
適当に記事を開きます。ページをスクロールすると、「こちらもおすすめ」が表示されます。この中の記事数が、2列から5列くらいに変わるはずです。

一時的に無効化したい場合は、Stylebot→「note.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
おすすめ記事の横幅
「こちらもおすすめ」欄の横幅です。広くすればするほど、1列に表示される記事数が増えます。

「1000px」、「1300px」といったように、半角数字で指定します。
以前、記事本文の横幅を変更するCSSを書きましたが、それの「こちらもおすすめ」版ですね。
おすすめ記事のタイルサイズ
記事の横幅です。指定する場合、「calc(20% – 8px)」の「20%」という数字を調整します。もっと小さくしたい場合は、「calc(10% – 8px)」といったようにします。1列に表示される記事数が増えます。それだけサムネイルサイズも小さくなります。

おすすめ記事のスキ(いいね)非表示
おすすめ記事内の「スキ」は、非表示にしています。表示させたい場合は、その部分のコードを書かないようにします。

感想
以上、「note」のおすすめ記事の列数を増やして、一目で見えるようにする方法でした。
他にもnote関連の記事は書いているので、気になった方は、当サイトのページ内検索で、「note」と検索してみてください。