StylusでQiitaの見た目をシンプルにする

これが、、、

適用前

こうなります ↓ ↓ ↓

適用後

（どうせGoogle検索からしかサイトを見ないので）記事ページを対象に以下の変更を行います。

• ヘッダーの削除
• フッターの削除
• ソーシャル要素の削除
• 記事末尾の余計な要素を削除

はじめに

QiitaのページをChorome の拡張機能「Stylus」を使ってシンプル化します。

CSS定義

/* 2024/10/08 改定 */

/* 追従するヘッダーを非表示 */
div[id^="GlobalHeader-react-component-"] {
    display: none;
}
/* フッターを非表示 */
div[id^="GlobalFooter-react-component-"] {
    display: none;
}
/* 記事左側のソーシャル要素を非表示 */
section.style-1hl01qi {
    display: none;
}
/* 未ログイン時の記事末尾の案内を非表示 */
.style-qidqy3 {
    display: none;
}
/* 記事末尾のいいねやソーシャル項目を非表示 */
div.style-1f18zs1:has([aria-label*="Twitter"]) {
    display: none;
}
/* 記事末尾の作者のフォロー等のソーシャル項目を非表示 */
.style-1lzc8v9{
    display: none;
}
/* 記事下の広告欄を非表示 */
aside.style-itrjxe {
    display: none;
}
section.style-itrjxe:has([id^=dfp]) {
    display: none;
}
section.style-nxr1bw {
    display: none
}
/* 記事下のトレンドを非表示 */
section.style-cez8nc {
    display: none;
}
/* 記事下ののイベント案内を非表示 */
section.style-itrjxe:has([src^="//"]) {
    display: none;
}
/* 記事下のキャンペーンを非表示 */
section.style-itrjxe:has([href^="/off"]) {
    display: none;
}

これに加えて、どうしても低品質記事を乱造しているユーザーが検索結果に出る場合、Choromeの拡張機能の「ゴシップサイトブロッカー」でユーザー名のアドレスをブロックすれば検索結果に表示されなくなります。これと併せてQiitaが除染ができると思います。

Adblockと合わせてこういうのは標準の自己防衛だと思います。