Weizlogy

Logo

作ったもの、気づいたこと、試したこと。元エンジニアの視点で技術をつづる雑多ブログ「Weizlogy」。

View My GitHub Profile

2026/07/23

Windows環境におけるWeb版SNS（Twitter/X・Bluesky）のUserCSSフォント最適化および表示カスタマイズガイド

Windows環境のWebブラウザからSNS（Twitter/X および Bluesky）を利用する際、標準のフォント描画やレイアウトをUserCSS（カスタムCSS）によって最適化する総合ガイド。

1. 背景と課題：WindowsにおけるWebフォント描画問題

Windows環境のGoogle ChromeやEdge等のWebブラウザにおいて、Twitter (X) や Bluesky などのWebクライアントを閲覧した際、テキストが薄く見づらい、あるいは意図しないフォントで表示される現象が発生する。主な技術的原因は以下の3点にある。

  1. 游ゴシックの描画特性（フォントウェイト問題）: Windows 8.1 / 10 以降で標準搭載された「游ゴシック（Yu Gothic）」は、標準ウェイト（Regular）が非常に細く設計されているため、高DPIディスプレイ以外の環境では文字がかすれて視認性が著しく低下する。
  2. DirectWriteとアンチエイリアス: Chromium系ブラウザのフォントレンダリングエンジン（DirectWrite）とWindowsのフォントラスタライズ処理の組み合わせにより、Mac（Core Text）と比較して文字の太さや輪郭が弱く描画される。
  3. Webサイト側のCSS指定: サービス側で指定されたシステムフォントスタックが、Windows環境での見やすさを必ずしも考慮していない。

これらの課題を解決するため、ブラウザ側でCSSを上書き（UserCSS）し、「Noto Sans JP」 や 「Noto Sans Mono」 等の視認性に優れたフォントへ統一する。

2. 拡張機能（アドオン）の選定理由

WebページへカスタムCSSを適用する拡張機能は複数存在するが、安全性および機能性の観点から選定を行う必要がある。

3. Twitter (X) 用 カスタムCSS

Twitter（x.com）における本文フォントの視認性向上、エディタ領域のフォント調整、およびプロモーション（広告）の非表示化を行う。

適用先URL

https://x.com/*

スタイル定義コード

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&display=swap');

/* テキスト全体 */
div[data-testid="tweetText"] .r-1tl8opc
, a[data-testid="tweet-text-show-more-link"]
, .r-18u37iz {
  font-family: "Noto Sans Mono", "Noto Sans JP" !important;
  font-weight: normal !important;
  font-size: 12px !important;
}

/* 投稿ユーザー名 */
div[data-testid="User-Name"] .r-1tl8opc {
  font-family: "Noto Sans Mono", "Noto Sans JP" !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

/* 投稿エディター */
div[data-testid="tweetTextarea_0"] > div > div > div > span > span
, .public-DraftEditorPlaceholder-inner {
  font-family: "Noto Sans Mono", "Noto Sans JP" !important;
  font-weight: normal !important;
  font-size: 12px !important;
}

/* 左ペインのナビゲーションバー */
nav[role="navigation"] > a > div > div > span {
  font-family: "Noto Sans Mono", "Noto Sans JP" !important;
  font-weight: normal !important;
  font-size: 16px !important;
}

// h1[id="accessible-list-1"]

/* 右ペインの広告除去 */
div[data-testid="sidebarColumn"] aside[role="complementary"] {
	display: none !important;
}

/* 広告除去 */
div[data-testid="placementTracking"] {
	display: none !important;
}

4. Bluesky 用 カスタムCSS

Bluesky（bsky.app）におけるフィード本文、プロフィール領域、および投稿エディタのフォント調整を行う。

適用先URL

https://bsky.app/*

スタイル定義コード

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:[email protected]&display=swap');

/* ポスト本文全体 */
.css-146c3p1,
.css-146c3p1 > a {
  font-family: "Noto Sans Mono", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* プロフィール表示名 */
div[data-testid="profileHeaderDisplayName"] {
  font-family: "Noto Sans Mono", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

/* プロフィール領域（フォロー・フォロワー数等） */
.css-175oi2r .r-12vffkv > div,
.css-175oi2r .r-12vffkv > div > span {
  font-family: "Noto Sans Mono", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* 投稿ユーザー名 */
a > .css-1jxf684 {
  font-family: "Noto Sans Mono", "Noto Sans JP", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* 投稿作成エディタ */
div[data-testid="composePostView"] > div > div > div > div > div > div > div {
  font-family: "Noto Sans Mono", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}

5. CSSメンテナンス：F12開発者ツールを用いたDOMセレクタ特定手法

ReactやReact Native for Web等で構築された現代のSPA（Single Page Application）では、ランダムなビルドクラス名（例: .css-146c3p1）が頻繁に変更される。サイトのアップデートによって仕様が崩れた場合、以下の手順で新たなセレクタを追跡・補修する。

セレクタ特定の手順

  1. 対象ページ上で F12 キー（または右クリック -> 検証）を押し、ブラウザのデベロッパーツールを起動する。
  2. インスペクターツール（Ctrl + Shift + C）を起動し、カスタマイズしたいテキスト要素をクリックする。
  3. DOM構造ツリーおよび右側の「Styles」パネルを確認し、以下の優先順位でCSSセレクタを選定する：
    • 第1優先 (data-testid): div[data-testid="tweetText"] や div[data-testid="profileHeaderDisplayName"] など、テスト用属性はアップデートでも変更されにくいため最も信頼性が高い。
    • 第2優先 (セマンティックな構造・クラス): data-testid が付与されていない要素については、親要素の data-testid からの相対パス、または比較的固定的なクラス名を指定する。
  4. 特定したセレクタをUserCSSへ書き換え、!important 宣言を付与してスタイルを適用する。

まとめ

Windows環境におけるWeb版SNSの表示崩れ・視認性低下問題は、適切なUserCSS管理と信頼できる拡張機能の導入によって大幅に改善される。SPAサイトの仕様変更に対しては、data-testid 属性を基準とした堅牢なセレクタ指定を行うことが運用のポイントとなる。

#user-css #twitter #bluesky #browser-extension #css #font #noto-sans #web-extension #developer-tools #dom-selector #spoof #stylish #stylus