【note】お題/コンテストに参加、記事タイプ、記事の追加を非表示にするCSS

2025年12月19日Stylebot&Stylus(CSS)note

この記事では、PCウェブサイト版「note」で、記事公開前の公開設定ページにある「お題/コンテストに参加」、「記事タイプ（無料/有料）」、「記事の追加（マガジン/メンバーシップ）」、詳細設定の「コメントの受けつけ」、「予約投稿」を非表示にするCSSを書きます。

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

PCウェブサイト版「note」で記事公開画面を開くと、以下のような僕にとって不要なコンテンツが表示されています。

お題/コンテストに参加（#〇〇に参加する）
記事タイプ（無料/有料）
記事の追加（マガジン/メンバーシップ）
詳細設定の「コメントの受けつけ（プレミアム限定）」
詳細設定の「予約投稿（プレミアム限定）」

僕は使ってなかったので不要でした。

表示されているだけで目障り、押し間違えなどのデメリットがあったので、CSSを使って非表示にしてみます。

PC版noteの公開設定ページにあるお題/コンテストに参加、記事タイプ（無料/有料）などの画像

なお、本記事はnoteのほうに公開した後書いています。超端折るので、詳しく知りたい方はnoteのほうをご覧ください。

【note】公開設定のお題/コンテストに参加や記事タイプを消すCSS｜ナポリタン寿司@ブ

公開設定ページに不要な要素が多すぎる PCウェブサイト版「note」で記事を公開する前の最終確認ページ ...

https://note.com/naporitansushi/n/ne74a06428398

1. noteの公開設定ページをスッキリするCSS
2. 感想

noteの公開設定ページをスッキリするCSS

CSS本体

以下です。

CSS

/*公開設定ページの「お題/コンテストに参加」非表示*/
h4:has(+div>button>[aria-label^="#"][aria-label$="に参加する"]) {
    display: none !important;

    &+*,
    &+*+* {
        display: none !important;
    }
}

/*公開設定ページの「記事タイプ(無料/有料)」非表示*/
section:has(h3#paid-setting) {
    display: none !important;
}

/*公開設定ページの「記事の追加(マガジン/メンバーシップ)」非表示*/
section:has(h3#magazine-add) {
    display: none !important;
}

/*公開設定ページの詳細設定内にあるプレミアム(コメントの受けつけ、予約投稿)非表示*/
*:has(>h3#detail-setting)+*>*>div[class]:has(h3>span) {
    display: none !important;
}

/*公開設定ページの「お題/コンテストに参加」非表示*/
h4:has(+div>button>[aria-label^="#"][aria-label$="に参加する"]) {
    display: none !important;

    &+*,
    &+*+* {
        display: none !important;
    }
}

/*公開設定ページの「記事タイプ(無料/有料)」非表示*/
section:has(h3#paid-setting) {
    display: none !important;
}

/*公開設定ページの「記事の追加(マガジン/メンバーシップ)」非表示*/
section:has(h3#magazine-add) {
    display: none !important;
}

/*公開設定ページの詳細設定内にあるプレミアム(コメントの受けつけ、予約投稿)非表示*/
*:has(>h3#detail-setting)+*>*>div[class]:has(h3>span) {
    display: none !important;
}