PG日誌

各記事はブラウザの横幅を1410px以上にすると2カラムの見出しが表示されます。なるべく横に広げてみてください。

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

シンプルにするというか不要な要素や見たくない要素を非表示にする感じです。

はじめに

最近どんな事を検索してもQiitaが検索結果に出てくるので色々諦めてあきらめて快適に使う方法を考えてみました。具体的には Chorome の拡張機能「Stylus」を使います。この拡張はあらゆる Web サイトに自作の CSS を強制的に挟み込むことができます。この機能を使ってサイト内の余計な要素を(自分で調べて)CSSで「display: none;」とすると見たくない or 不要な要素を好き内容に非表示にできます。

CSS定義

では早速コードです。

/* Qiita.comを対象にしたCSS */

/* -x-x- トップ画面の表示を変更 -x-x- */

/* 右側の転職応援キャンペーン等の枠を消す */
.p-home_aside > a {
    display: none;
}

/* [x]で消せるアナウンスを消す */
.p-home_aside > div[data-hyperapp-app]{
    display: none;
}

/* よく気になるされている求人を消す */
.p-home_recruiting {
    display: none;
}

/*  */
.uh-Container {
    display: none;
}

/* -x-x- 個別の記事の表示を変更 -x-x- */

/* 画面上部のヘッダーを削除 */
.st-HeaderContainer {
    display: none;
}

/* 記事下部のコメント欄・メッセージを消す */
.p-items_wrapper-white {
    display: none;
}

/* 記事下部の編集リクエストなどを消す */
.it-Footer {
    display: none;
}

/* 記事下部の記事を書いたアカウントの表示を消す */
.ai-Container {
    display: none;
}

/* フッターの削除 */
#globalFooter {
    display: none;
}

/* 画面上部の黒帯のキャンペーンを消す */
.wb-CampaignLink {
    display: none;
}

/* 左側の再度メニューバー(LGTM)などを消す */
.p-items_stickyMenu {
    display: none;
}

/* 小サイズ時に追従してくるLGTMバナーを消す */
.it-ActionsMobile {
    display: none;
}

/* 右側の広告欄を削除(さすがにやりすぎだと思うのでコメントアウト) */
/*
.p-items_options {
    display: none;
}

/* 広告を削除したら右側の目次は上に上げる */
.p-items_toc {
    grid-row: 1 / 3;
}

/* 上げた分見出しの高さを広げる */
.it-Toc_nav {
    max-height: 100vh;
}
*/

/* 邪魔なコードのエラーの赤線を消す */
.it-MdContent .highlight .err {
    border-bottom: initial !important;
}

そうするとシンプル目なブログみたいになるのでお勧めです。

どうしても低品質な記事を乱造しているユーザーは「ゴシップサイトブロッカー」でユーザーページ以降をブロックして検索結果に表示されないようにしましょう。それでだいぶ快適になるはずです。

適用前・後の表示状態

適用前はなんか色々表示されていてごちゃごちゃしています。

何もしない時のQiitaの表示内容
適用前

適用後はヘッダー、サイドバーフッターがすべて非表示化されるので見た目がシンプル化します。

Stylusでカスタマイズした後のQiitaの表示内容
適用後

まぁ、いくらQiitaの低品質な記事があらゆる検索結果上位に表示されまくるのが気に入らないからと言っても、広告を削除するのはいかんせんやりすぎな気がするので、そこらへんは各自お好みで対処してください。

こういったユーザーがコンテンツを投稿するタイプサイトは長く運営しているとエントロピーが高くなっていき質が低下するのはどのサービスも共通だと思いますが、今の状況はひと昔前に炎上した侍エンジニア塾を笑えなくなってきてますね(ぼくはあのサイトはゴシップサイトブロッカーで完全に検索結果から削除しているのでどうなろうがしったことではないですが)Qiitaはどんなに低品質な記事が乱造されてもユーザーがコンテンツを作っているので炎上までしないと思います。しかし、検索結果に表示される内容次第ではフラストレーションは溜まるものです。もう少しGoogleも賢くなってくれればよいのですが、、