WindowsでTwitter公式webページをUserCSSでキレイに見せる

overviews.

WindowsでTwitter公式webページを対象に、Google ChromeのStylishアドオンでフォント調整を行い、キレイに見せます。

Macは元からキレイだから良いよね。。。

2024-08-24

あの、Stylishが改悪されすぎて終わっていたので、User JavaScript and CSSを使います。

introduction.

適用前

適用後

settings.

User JavaScript and CSSインストール

Google Chromeの機能拡張でUser JavaScript and CSSをインストールします。

User JavaScript and CSSでスタイル作成

コード

@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="User-Name"] .r-1tl8opc {
  font-family: "Noto Sans Mono", "Noto Sans JP" !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

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;
}

適用先

次で始まるURL　https://x.com/*

保存！！！

descriptions.

v2.0.0

機能拡張の変更とCSS修正

• 機能拡張はUser JavaScript and CSSにしました。

• 現行サイトに合わせてCSSを修正しました。

v1.0.0

新規作成

Windows10で標準採用された游ゴシックをベースに英数字は’Helvetica Neue’を使います。

游ゴシックは、レギュラーサイズではフォントの線が細くなりボヤッとした印象を受けるため、ウェイトを掛けてくっきりはっきり見えるようにしました。