Stylusでブラウザ版Twitter(現X)の見た目の変更(24/6/22追記)

公式Twitterの画面はごちゃごちゃしているので、ユーザーCSSを記述して見た目を変更して使用しています。

こんな感じ

Firefox,Chrome,Edgeで使用できます。PC版SafariでもユーザーCSSを指定すると適用できます。

ついでに最近実装されたインプレッション数も非表示にしています。

続きを読む

Stylusの導入(Firefox,Chrome,Edge)

Firefox

こちらからダウンロードします

Stylus https://addons.mozilla.org/ja/firefox/addon/styl-us/

Chrome,Edge

Edgeの場合まず右上の「…」をクリック→「拡張機能」→左下の「他のストアからの拡張機能を許可」をオンにします。

Chrome,Edge共に以下からダウンロードします

Stylus　https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

Stylusに記述

Twitterを開いた状態で右上の拡張機能アイコンからStylusをクリック、「次のスタイルを書く：」の部分をクリックして以下のうち使用したい部分を記述します。

/*右カラムを非表示*/
div[data-testid^="sidebarColumn"]{display:none !important;}
/*メインカラムの幅を広めに*/
*[data-testid="primaryColumn"],.r-1ye8kvj{max-width:750px !important;}
/*メニューとメインカラムの間のマージンを0に*/
main > div > div > div > div{margin-left:0 !important;}
/*メニューの文字サイズ*/
.css-901oao{font-size:14px !important;font-weight:normal !important;}

/*鳥を消す*/
h1[role^="heading"]{display:none !important;}

/*左のメニューのツイートボタンの色　display:noneで消せる*/
header a[aria-label*="ツイート"],.r-l5o3uw{background-color:#000 !important;}
[data-testid="tweetButtonInline"]{background-color:#000 !important;}
[data-testid="SideNav_NewTweet_Button"]{background-color:#000 !important;}
/*背景色　適当な色へ*/
html{background-color:#eee !important;}
header{background-color:#eee !important;}
main{background-color:#eee !important;}

/*左下のDM欄消去*/
[data-testid="DMDrawer"]{
    display:none;
}

/*インプレッション数非表示*/
a[href*="analytics"]{display:none}
/*grok非表示*/
a[href*="/grok"]{display:none}
/*コミュニティ非表示*/
a[href*="/communities"]{display:none}
/*プレミアム非表示*/
a[href*="premium_sign_up"]{display:none}

下のURL部分を「次で始まるURL」を「https://twitter.com/」にしてTwitterのどのページにも反映されるようにします

PC版Safari

Safari の場合は「環境設定」–「詳細」–「スタイルシート」で上記のテキストを適当な名前.cssで保存して指定すると適用できます。

UserScriptでiOSに適用

まずApp storeでUserScriptをDLしておきます。デバイス内にファイルブラウザでuserscriptなど適当な名前でフォルダを作成しておきます。

// ==UserScript==
// @name         x styles
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  custom CSS to x.com
// @author       @noc_turn
// @match        https://x.com/*
// @match        https://www.x.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // CSSはここに記載
    const customCSS = `
        div[data-testid^="sidebarColumn"]{display:none !important;}
        *[data-testid="primaryColumn"],.r-1ye8kvj{max-width:750px !important;}
        main > div > div > div > div{margin-left:0 !important;}
        .css-901oao{font-size:14px !important;font-weight:normal !important;}
        h1[role^="heading"]{display:none !important;}
        header a[aria-label*="ツイート"],.r-l5o3uw{background-color:#000 !important;}
        [data-testid="tweetButtonInline"]{background-color:#000 !important;}
        [data-testid="SideNav_NewTweet_Button"]{background-color:#000 !important;}
        html{background-color:#eee !important;}
        header{background-color:#eee !important;}
        main{background-color:#eee !important;}
        [data-testid="DMDrawer"]{display:none;}
        a[href*="analytics"]{display:none;}
        a[href*="twitter_blue"]{display:none;}
        a[href*="/grok"]{display:none;}
        a[href*="/communities"]{display:none;}
        a[href*="premium_sign_up"]{display:none;}
        a[href*="/settings/monetization"], a[href*="ads.x.com/"], [data-testid="Dropdown"] a[href*="/jobs"], a[href*="/i/spaces/"]{display:none;}
        a[data-testid="tweet-text-show-more-link"]{display:none;}
    `;

    // Function to apply the CSS
    const applyCSS = () => {
        const styleElement = document.createElement('style');
        styleElement.textContent = customCSS;
        document.head.appendChild(styleElement);
    };

    // Apply CSS initially
    applyCSS();

    // Create a MutationObserver to observe changes in the DOM
    const observer = new MutationObserver(() => {
        applyCSS();
    });

    // Start observing the body for changes in the subtree
    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });
})();

上記を適用な名前.js(x.jsなど)で保存してiCloud経由で先ほど作成したフォルダにコピーします。

UserScriptアプリを起動して先ほどのフォルダを指定します。

UserScriptsアプリを起動、「Set Userscripes Directory」をタップして先ほどのフォルダを指定

SafariでTwitterを開き、「あぁ」をタップした中またはアドレスバー辺りにあるを開いてスクリプトを有効にする

これでCSSが有効になります。

その他

リストでミュートユーザーが効いていない！というときもCSS内に

.css-175oi2r .r-j5o65s:has(a[href*="ミュートしたいユーザーのID"]){display:none}

を追記すれば見えなくなります。

CSS,Twitter