X(Twitter)のタイムラインを「画像のみ」表示に切り替える

X(Twitter) でイラストレーターや写真家の投稿を見る時、テキストツイートが邪魔で画像だけをサクッと見たいことがある。ブックマークレットまたは Chrome 拡張機能でテキストツイートを自動で非表示にできる。

何ができるか

以下が実現できる：

画像・動画が含まれないツイートを自動で非表示
タイムラインが画像・動画付きツイートだけになる
イラストや写真の閲覧に集中できる
ワンクリックで ON/OFF 切り替え可能（拡張機能版）

方法1: ブックマークレット版（一番簡単）

インストール不要で、ブックマークレットを作成するだけ。

手順

Chrome で新しいブックマークを作成（ブックマークバーを右クリック → 「ページを追加」）
名前を「Twitter 画像のみ」などに設定
URL に以下のコードを貼り付け：

javascript:(function(){const id='twitter-img-filter';let s=document.getElementById(id);if(s){s.remove();}else{s=document.createElement('style');s.id=id;s.textContent='div[data-testid="cellInnerDiv"]:has(article):not(:has(div[data-testid="tweetPhoto"])):not(:has(video)){display:none!important;}';document.head.appendChild(s);}})();

使い方

X(Twitter) のタイムラインを開く
作成したブックマークレットをクリック
画像・動画がないツイートが非表示になる
もう一度クリックすると解除される（トグル動作）

方法2: Chrome 拡張機能版（自動適用）

ページを開くたびに自動で適用される拡張機能を作成する。

1. フォルダ構成

以下の構成でフォルダを作成する：

twitter-image-only-filter/
├── manifest.json
├── content.js
├── popup.html
└── popup.js

2. manifest.json

{
  "manifest_version": 3,
  "name": "Twitter Image Only Filter",
  "version": "1.0",
  "description": "X(Twitter)で画像・動画付きツイートだけを表示",
  "permissions": ["storage", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://x.com/*", "https://twitter.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

3. content.js

// 設定を読み込んでフィルターを適用
chrome.storage.sync.get(['enabled'], function(result) {
  if (result.enabled) {
    applyFilter();
  }
});

// 設定変更を監視
chrome.storage.onChanged.addListener(function(changes) {
  if (changes.enabled) {
    if (changes.enabled.newValue) {
      applyFilter();
    } else {
      removeFilter();
    }
  }
});

function applyFilter() {
  // 既存のstyleを削除
  const existingStyle = document.getElementById('twitter-image-only-filter');
  if (existingStyle) {
    existingStyle.remove();
  }

  // 新しいstyleを追加
  const style = document.createElement('style');
  style.id = 'twitter-image-only-filter';
  style.textContent = \`
    /* 画像・動画がないツイートを非表示 */
    div[data-testid="cellInnerDiv"]:has(article):not(:has(div[data-testid="tweetPhoto"])):not(:has(video)) {
      display: none !important;
    }
  \`;
  document.head.appendChild(style);
}

function removeFilter() {
  const style = document.getElementById('twitter-image-only-filter');
  if (style) {
    style.remove();
  }
}

4. popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px;
      padding: 15px;
      font-family: sans-serif;
    }
    label {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    input[type="checkbox"] {
      margin-right: 8px;
    }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" id="toggle">
    画像のみ表示
  </label>

  <script src="popup.js"></script>
</body>
</html>

5. popup.js

CSP (Content Security Policy) 対策のため、スクリプトを別ファイルに分離：

const toggle = document.getElementById('toggle');

// 現在の設定を読み込む
chrome.storage.sync.get(['enabled'], function(result) {
  toggle.checked = result.enabled || false;
});

// トグル変更時に保存
toggle.addEventListener('change', function() {
  chrome.storage.sync.set({ enabled: toggle.checked });
});

6. 拡張機能のインストール

Chrome で chrome://extensions/ を開く
右上の「デベロッパーモード」をオン
「パッケージ化されていない拡張機能を読み込む」をクリック
作成したフォルダを選択
拡張機能がインストールされる

7. 使い方

X(Twitter) を開く
拡張機能アイコンをクリック
「画像のみ表示」チェックボックスをオン
ページをリロードするとフィルターが適用される

仕組みの解説

このフィルターは CSS の :has() 擬似クラスを使ってる。

セレクタの詳細

div[data-testid="cellInnerDiv"]:has(article):not(:has(div[data-testid="tweetPhoto"])):not(:has(video))

このセレクタの意味：

div[data-testid="cellInnerDiv"] - タイムラインの各セル（ツイート全体を囲む div）
:has(article) - article 要素を含むセル（実際のツイート）
:not(:has(div[data-testid="tweetPhoto"])) - 画像コンテナがない
:not(:has(video)) - 動画がない

X(Twitter) の DOM 構造では、各ツイートは cellInnerDiv という div で囲まれており、画像がある場合は tweetPhoto という testid を持つ div が含まれる。article タグではなく、その親の div を隠すことで確実にツイート全体が非表示になる。

カスタマイズ

リツイートも非表示にしたい場合

content.js の applyFilter() 関数内、style.textContent に以下の CSS を追加：

/* リツイートを非表示 */
div[data-testid="cellInnerDiv"]:has([data-testid="socialContext"]) {
  display: none !important;
}

特定のユーザーのツイートは画像なしでも表示したい場合

content.js の applyFilter() 関数を以下のように書き換える：

// 特定ユーザーのツイート以外を非表示（画像なしのみ）
const allowedUsers = ['username1', 'username2'];
const userSelector = allowedUsers.map(u => \`:has([href*="/${u}"])\`).join(',');
const styleText = \`
  div[data-testid="cellInnerDiv"]:has(article):not(:has(div[data-testid="tweetPhoto"])):not(:has(video)):not(${userSelector}) {
    display: none !important;
  }
\`;

username1, username2 のところに、表示したいユーザーの ID を入れる。これらのユーザーのツイートは画像がなくても表示される。

注意

X(Twitter) の仕様変更で将来的に動作しなくなる可能性がある。
ブックマークレット版はページをリロードすると解除される。
拡張機能版は設定が保存され、次回以降も自動適用される。
スクロールして新しいツイートが読み込まれた時も自動でフィルターされる。

こんな時に便利

イラストレーターの作品だけを見たい
写真家のタイムラインをギャラリーのように見たい
画像付きツイートだけを流し見したい
テキストツイートが多すぎて画像が埋もれる
純粋にビジュアルコンテンツだけを楽しみたい