2013年1月28日

Twitterで改行を有効にするCSS＋広告カット

この改行用CSSについて

ブラウザからTwitterにアクセスすると改行が無効になってしまいますが、それを有効にするための方法として、ユーザーCSSを書いてみました。
動作確認はFirefox17.0.2のみですが、他のブラウザでもバージョンが最新のものであれば多分使えると思います。多分。
あと、2013年1月26日現在のTwitterのレイアウトに最適化してあるので将来変更があった場合はこの改行用CSSもうまく動かなくなる可能性があります。気が向いたら、追いかけるつもり。

実際のCSSはこちら
.js-tweet-text,.bio {
white-space:pre-line!important
}
.account .bio{
margin:-1.29em 0 0 0!important
}

前は色々めんどうだったのですが、今はこれだけです。CSSの説明サイト等でwhite-spaceとは何かを調べれば上記のCSSの意味が分かるかと思います。
また、プロフィールの文章も改行表示できるようになっています。

ちなみに、Firefoxでは@-moz-documentという書式を使って上のCSSをtwitter.comのみに限定させることが出来ます。その場合は次のようになります。
@-moz-document domain(twitter.com) {
.js-tweet-text,.bio {
white-space:pre-line!important
}
.account .bio{
margin:-1.29em 0 0 0!important
}
}

広告カットについて

Twitterでは広告のことをプロモーションと表現し、CSSの名前にもそのまま使われているので探すのが楽でした。

.promoted-tweet,
.promoted-account,
.promoted-trend {
display:none!important
}

これだけでプロモーションツイート、プロモーションアカウント、トレンドの一番上にあるプロモーション用ハッシュタグが消えます。広告が邪魔だと感じる方は使ってみてください。

ラベル: ,