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

​​Stylebot&Stylus(CSS)

「note」のアイコン

この記事では、「note」の記事下に表示される「こちらもおすすめ」の列数を増やして、コンパクトにするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。

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

本記事で紹介するCSSを使えば、「note」の記事下にある「こちらもおすすめ」の記事をコンパクトにできます。

通常は、2列のタイル表示になっています。ちょっと大きすぎる感が否めません。2列だとスクロール量が増えるので、コンパクトにして、4列、5列くらい表示してほしいです。

「note」のこちらもおすすめ欄画像

設定で変更できるか調べましたが、そのような項目がなかったので、CSSで実装してみます。

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

こちらもおすすめ記事のタイル数を増やすCSS

「note」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*おすすめ記事の横幅*/
.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;
}

書き込めたら、右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（例：note.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

適当に記事を開きます。ページをスクロールすると、「こちらもおすすめ」が表示されます。この中の記事数が、2列から5列くらいに変わるはずです。

「こちらもおすすめ」欄の1行に表示される列数を増やした画像1

一時的に無効化したい場合は、Stylebot→「note.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

おすすめ記事の横幅

「こちらもおすすめ」欄の横幅です。広くすればするほど、1列に表示される記事数が増えます。

「こちらもおすすめ」欄の1行に表示される列数を増やした画像2

「1000px」、「1300px」といったように、半角数字で指定します。

以前、記事本文の横幅を変更するCSSを書きましたが、それの「こちらもおすすめ」版ですね。

おすすめ記事のタイルサイズ

記事の横幅です。指定する場合、「calc(20% – 8px)」の「20%」という数字を調整します。もっと小さくしたい場合は、「calc(10% – 8px)」といったようにします。1列に表示される記事数が増えます。それだけサムネイルサイズも小さくなります。

「こちらもおすすめ」欄の1行に表示される列数を増やした画像3

おすすめ記事のスキ（いいね）非表示

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

「こちらもおすすめ」欄の記事内にあるスキ画像

感想

以上、「note」のおすすめ記事の列数を増やして、一目で見えるようにする方法でした。

他にもnote関連の記事は書いているので、気になった方は、当サイトのページ内検索で、「note」と検索してみてください。

​​Stylebot&Stylus(CSS)