スマホ版Twitter(現X)をカスタマイズ

ちょっとアプリだと色々不便なことが増えてしまったので、スマホでブラウザ版Twitterを使用し、不要なものをUserCSSで消していきます。

続きを読む

必要なもの・方法

Android

ブラウザはFirefoxを使用し、Stylusアドオンを入れます。

Xを開き、その状態で拡張機能メニューからStylusを開きます。

URL部分は全体に適用されるようにhttps://x.com/から始まるURLにしておきます。

CSSを記述し保存すると適用されます。

iOS

ブラウザはSafariを使用し、UserScripsアプリを使用してUserScriptでカスタムCSSを適用させます。

App storeからUserscriptsアプリをインストールします。

スクリプトファイルを入れるフォルダを選択します。iPhone内にuserscriptsなど適当な名前のフォルダを作成し、Set Userscripts Directoryボタンから指定します。

下記を作成し、適用したいCSSを記入してx.jsなど適当な名前.jsで保存します。

// ==UserScript==
// @name         x css
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  add usercss to X
// @author       @noc_turn
// @match        https://x.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const customCSS = `

        /* 適用したいCSSをここに書く */

    `;

    const applyCSS = () => {
        const styleElement = document.createElement('style');
        styleElement.textContent = customCSS;
        document.head.appendChild(styleElement);
    };

    applyCSS();

    const observer = new MutationObserver(() => {
        applyCSS();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });
})();

作成した.jsファイルをスマホ内の先ほど指定したフォルダに入れます。PCのテキストエディタで作った場合はiCloud経由で送ってあげます。

Safariを起動してxを開き、Userscriptのメニューからスクリプトをオンにしてページを再読込すると適用されます。

iPadの場合は右上にメニューがあるかも

CSS

CSS色々です。適用したいものを使用して下さい。

メニューのgrok、マネタイズ、スペースを非表示

a[href*="/grok"], a[href*="/communities"], a[href*="premium_sign_up"],
a[href*="/settings/monetization"], a[href*="ads.x.com/"], [data-testid="Dropdown"] a[href*="/jobs"],
a[href*="/i/spaces/"], a[data-testid="tweet-text-show-more-link"] {display:none !important;}

開催中スペースのバナーを非表示

[role="presentation"] [data-testid="placementTracking"] button{display:none}

ミュブロしているアカウントがリストのリポスト(RP)でも表示されないようにする

相手のIDが必要です　IDは@を抜いたもの(TwitterJPなど)

.css-175oi2r .r-j5o65s:has(a[href$="ミュートしたいID1"]),.css-175oi2r .r-j5o65s:has(a[href$="ミュートしたいID2"]){display:none}

インプレッション数を消す

a[href*="analytics"]{display:none}

画像を見えにくくする

アプリではメディアを非表示にする項目がありますが、ブラウザ版にはないので画像を細長く表示します。タップすると表示できます。

.r-9aw3ui .r-1ny4l3l .r-1udh08x div[style*="padding-bottom"]{padding-bottom: 6% !important;}
div[style*="padding-bottom: 56.25%;"]{padding-bottom: 12% !important;}

iPad用、見た目をシンプルに変える

/*右カラムを非表示*/
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;
}

CSS,UserScript,Twitter,カスタムCSS,X,Stylus