メインコンテンツまでスキップ

カスタムCSSの設定

X のカラムに、自分で書いた CSS を適用できる上級者向けの機能です。
文字の大きさを変えたり、不要な要素を隠したりと、表示上の細かい部分を好みに合わせて調整するための機能として提供しています。

上級者向けの機能です

CSS の内容や、カスタムCSSを設定したことによって発生した不具合について、開発者はサポートしません。
CSS の知識があり、リスクを理解した上でご利用ください。

カスタムCSSを設定する​

カスタムCSSは すべての X カラムに共通で適用されます。カラムごとの個別設定はありません。

  1. サイドバーの 歯車アイコン（ ） をクリックして「Open-Deckシステム設定」を開きます
  2. 「カスタムCSS(上級者向け / Twitterのみ有効 / 次回起動時有効)」の入力欄に CSS を入力します
  3. 「設定」ボタンをクリックします
  4. 「適用しました」という内容のメッセージが表示されたら保存完了です
  5. Open-Deck を開き直す（ページを再読み込みする）と、カスタムCSSが適用されます
設定は次回起動時から有効です

カスタムCSSは Open-Deck の起動時に読み込まれます。
「設定」ボタンを押しただけでは、開いている Open-Deck には反映されません。
設定後は Open-Deck を開き直してください。

カスタムCSSを無効にするには

入力欄を空にして「設定」ボタンを押し、Open-Deck を開き直してください。

入力した CSS はそのままの形でも保存されるため、システム設定を開き直せば前回入力した内容を確認・編集できます。

対応しているカラム​

カスタムCSSはTwitterのカラムのみに適用されます。

カラムカスタムCSS
Timeline カラム 対応
Notifications カラム 対応
Explore カラム（検索・トレンドなど） 対応
Post カラム 対応

カラムを移動したり、カラム内でページが再読み込みされたりしても、カスタムCSSは自動で適用し直されます。

安全のための制限（サニタイズ）​

上級者向けの機能とはいえ、入力された CSS をそのまま信用して適用すると、最低限の安全も保てなくなります。
そのため Open-Deck では、「設定」ボタンを押したときに CSS をチェックし、外部サーバーへの通信が発生する記述などを除去してから保存しています。

除去される記述​

記述例除去する理由
@import@import url(...);外部の CSS を読み込むため
外部 URL の url()url(https://...)外部サーバーへの通信が発生するため。入力内容を外部に送信する攻撃（CSS キーロガー等）に悪用できるため
相対パスの url()url(/image.png)閲覧中のサイトへの通信が発生するため
ページ内参照の url()url(#id)判定を単純にするため、data URL 以外は一律で除去しています
エスケープ表記の url()\75\72\6C(...)チェックを回避する手口のため
外部フォントの @font-facesrc: url(https://...)外部サーバーへの通信が発生するため
文字列で URL を指定する関数image-set() -webkit-image-set() image() src() cross-fade() -moz-image-rect()url() を使わずに外部 URL を指定できるため
上記の関数と var() を同じルール内で使用background: image-set(var(--a))別のルールから URL を差し込めるため
許可されていない data URLSVG / MIME 省略 / 非標準の MIME形式を画像・フォントのみに絞り、悪用リスクの少ないファイルタイプに限定するため
文字列内の url(content: "url(x)"文字列自体は無害ですが、url() と紛らわしいため

変換される記述​

記述変換後理由
<\3C </style><script> を書き込んで任意のコードを実行させる攻撃（XSS）を防ぐため

ブラウザは \3C を文字としての < として扱うため、content などで表示される文字は変わりません。

使用できる記述​

記述内容
data URL（画像）image/png / image/jpeg / image/gif / image/webp / image/avif
data URL（フォント）font/woff / font/woff2 / font/ttf / font/otf
カスタムプロパティ / var()image-set() などとの併用を除いて使用できます
@media / @supports / @keyframes / ネスト中の記述が除去の対象でなければ使用できます

除去の範囲​

除去の対象を含むルールは、ルール（{ } のまとまり）ごと除去されます。
同じルール内にある安全な宣言も一緒に除去されるので注意してください。

/* このルールは color: red; も含めて丸ごと除去されます */
a {
    color: red;
    background: url(https://example.com/image.png);
}

@media / @supports / ネストの中に除去の対象がある場合は、そのルールだけが除去され、外側のブロックは残ります。

ただし、次の場合はブロック全体が除去されます。

  • @keyframes の中に除去の対象がある場合
  • @supports の条件部分に url( を含む場合

除去されたルールの確認​

除去されたルールがある場合は、「設定」ボタンを押したときのメッセージに除去されたルールの一覧が表示されます。
意図しないルールが除去されていないか確認してください。

他人に「貼り付けて」と言われたCSSは危険な場合があります

外部 URL などは設定時に除去されますが、完全な安全は保証できません。
ボタンを隠したり、表示を偽装したりする CSS も作れてしまいます。
必ず内容を理解した上で使用してください。

CSS の書き方のヒント​

X の画面はクラス名が頻繁に変わるため、data-testid 属性を使ったセレクタで指定するのがおすすめです。
また、X 側のスタイルに打ち消されないよう、必要に応じて !important を付けてください。

例：ポスト本文の文字を小さくする​

div[data-testid="tweetText"] {
    font-size: 13px !important;
}
要素の調べ方

お使いのブラウザでTwitterや拡張機能版Open-Deckを開き、
変更したい部分で右クリックして「検証」を選ぶと、開発者ツールで各要素の data-testid を確認できます。

構文エラーなどは通知されません

当たり前のことですが、ブラウザが対応していないプロパティや構文エラーのある宣言は動作しません。
これらは設定時のメッセージには表示されないのでご注意ください。

うまく反映されないときは​

  • Open-Deck を開き直したかを確認してください。設定は次回起動時から有効です。
  • 設定時のメッセージで、ルールが除去されていないかを確認してください。同じルール内の安全な宣言も一緒に除去されます。
  • CSS の文法が正しいかを確認してください。構文エラーのある宣言は何も表示されずに無視されます。
  • セレクタが正しいかを確認してください。X の仕様変更で data-testid が変わることがあります。
  • !important を付けてみてください。 X 側のスタイルの方が優先されている可能性があります。
  • Open-Deck のカラム設定と競合していないかを確認してください。バナー表示・トップ表示・表示モード・RT非表示などの設定も CSS で実現しているため、同じ要素を指定すると思った通りに表示されないことがあります。