読者です 読者をやめる 読者になる 読者になる

うたた寝ねね

趣味とか技術とか憂鬱とか。

twitter用CSS(不要部分非表示、DMアイコン表示、ミュート)

  • 2012/10/10 userstyles.org に公開しました。 Fix twitter UI / twitter mute user
  • 2012/09/28 DM送信可能なユーザにアイコン表示してみました
  • before   これが   after こんな感じになります。
  • 2012/09/28 日本語ハッシュタグ非表示の修正
  • 2012/09/27 t.co展開後の長いURLを省略せず表示するようにしました
  • 2012/09/27 絶対時間表記の際、ユーザ名が長いと回り込んでうざいので、省略するのを追加
  • 2012/09/26 日本語UI時ツイート欄下の広告が消えてなかったので #j_ad を追加
  • 2012/09/24 プロモツイートが消し切れてなかったので div[data-promoted="true"] を追加

余裕無いときに限って余計なことしたくなるよね。
体重落ちすぎてる気がするので高カロリー摂らないと消滅も近い……

twitterのウェブUIで、不要なものを消したりするアレ。英語UIで確認してます。
言語設定が英語だとそもそもツイート欄下の広告出ないから、そこに広告出てるの知らなかった。

FirefoxのStylishアドオン用に書いてます。
ChromeやSafariにも同様の拡張があると思うので、ちょっと変えれば使えるはず。

[css] @-moz-document domain("twitter.com") {

/* bio font-style ( for old ui ) */
.bio {
    font-style: normal !important;
}

/* absolute time */
.tweet-timestamp:before {
    content : attr(title)" ( ";
}
.tweet-timestamp:after {
    content :" )";
}
/* fix margin */
.js-tweet-text {
   margin-top : 1px !important;
}

/* kill Ads */
#j_ad,
div[data-component-term$="_ad"] {
    display: none !important;
}

/* Left Side Column */
/* Who to follow */
div[data-component-term="user_recommendations"],   /* https://twitter.com/ */
.wtf-module,   /* https://twitter.com//i/connect */
/* Trends */
div[data-component-term="trends"],
.trends,
/* footer */
div[data-component-term="footer"],
.site-footer,
/* Similar to you */
div[data-component-term="similar_user_recommendations"],
/* Promoted Tweet */
div[data-item-id$="-promoted"],
div[data-component-term="empty_timeline_recommendations"],
div[data-promoted="true"],
/* Promoted Account */
.promoted-account
{
    display: none !important;
}

/* follow/unfollow button */
.follow-button,
.follow-btn,
/* fav button */
.action-fav-container
{
    display: none !important;
}

/* username overflow */
.js-action-profile {
    display : block;
    width : 250px;
    white-space : nowrap;
    overflow : hidden;
    text-overflow : ellipsis;
    -webkit-text-overflow : ellipsis;   /* for Safari */
    -o-text-overflow : ellipsis;    /* for Opera */
}

/* Expand URL */
.twitter-timeline-link > .invisible {
    font-size : 14px !important;
}
.twitter-timeline-link > .tco-ellipsis {
    display: none !important;
}

/* DM icon */
.can-dm:before {
    float : left;
    margin : 3px 5px auto auto;
    /* icon by http://freeeps.com/mail-envelope/ Thanks !! */
    content : url(data:image/gif;base64,R0lGODlhGAAYAPf/APPm0fLlzuLJnd+2d66cf968gtyycampqduwctqvZv3+/vz9/fr9//369fb5/N2wadqwavf4+a6ur/PkzaGhouW6fd+5et6ydv79+9yxavLn1eDh4dXV1dDQ0eO7gNywZXV0c/Tq2N+1c+C2duC2dd60b920bt+1cd61cd2zauC3eNyyauC3ed60cPPgyN2za9yyad+1ct+1dOC2d////t2zbt6zb/Lgx920beC3d9+0dfTn1N20bN61cN21dd+1dvb39/X4+vn6+v7//9qvYt6zcduxaN20b/v8/OC1duG4e960c9yxZtyyZuC2ed+0dPPn0tuxZt2yba+vsN+zcbm5uvTn09yyaNuwZ/Xn1fTn0uG1eeK4ftyzdOC0d/Pmz/Px7e7cw9yza6amp9+0ct+0c9+2dfHkz960ePv9/pycnd+4eM/S1eXEkOnOo+bUtv79/O7j0NTW1/7+/urXt8nJyvDn2dLS0vv379yzbNmuY+C9iOC2e96zcN2ybuG4evDr4t6zbvL09fT19PX19PP19d61dpGQkd+0cN2ya/T29fX29/n8/9ewbuG3ffv+/9yya5KRj9qxbd20cd61d9OvfaKjpditX960cvDx8PX3+dra2trc3vXv5d20dvT08/bq2PPjzO7izvv48/r59fv38enbxuzawOC1dN6ya7GsouO+h+TDkObHlufNo+nPqd20a7W1tuK3d7O2uufo6O/v7+O7eN+zZ/b5/vb6/dquYd2yaduyaPHixvHct6ysrd60dK2usfb4+4yMi7e5u+7w89bX1/j5+fnx5fr7++fSsevZvO/cvO/s5czMze7l1MvO0dHR0oiIh/n07urr6/v06+TInb6/v9uwZuvTrNuxZ+Hi4tyybfP089yzbd20c/Lgxt/g4PPgx+O8ieC2eunl3/b6/+C3euG3et/f39yybtqwad6xbNuxauC5e+C4fO/q4fHr4OC2dN6yb/Lo1Pb4+u3YtPb5++K2evX19fbp2PP09by8vPX29v///////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5NDMxNUZGMDk2NzExRTI5NDU4QUEwMjREQjhBNkFEIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NDMxNUZFMDk2NzExRTI5NDU4QUEwMjREQjhBNkFEIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIElsbHVzdHJhdG9yIENTMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ1dWlkOjM0Q0M3NkM1RjlDQURGMTFCRTc4Rjk2QTg2MUVDNjkyIiBzdFJlZjpkb2N1bWVudElEPSJ1dWlkOjMzQ0M3NkM1RjlDQURGMTFCRTc4Rjk2QTg2MUVDNjkyIi8+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+ZW52ZWxvcGVAPC9yZGY6bGk+IDwvcmRmOkFsdD4gPC9kYzp0aXRsZT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAD/ACwAAAAAGAAYAAAI/wD/CRxI0F8vezQIKlxIkAYzCxaywWFIUSAGNxbWmHHXqkHFgQsU+GvQJoeNB+zIvFtV7aM/IIX6gYkXh44rVh5GqEAHqqK/fkAXBXHAaEgaUp1EnXqlj4a/hUMGAQWKhNa1WPw4Pcp171O+CELmDMRwJshUJNEoRKMWbkoVIVMV7RsisIGHZQ6AHtugpt+GKnX6/eqQbGq3Uv/wsJhnRxjQNGo48DsUbQqFTVMWANVEaBwyegl8ADJXD0gtaelAZPJ3wJkxCQvq4RJkCsGNEDC8FVAGz0GxYRtAcLDMmg2DZm/2UCkyAbcJKRkGWNMQCZocYsEszRrzTICPBzaSLP8J5byFCFRUZFUiUM6XAFUECuz6EOiEjBFlwDlHIYJEDicVVNCIEanYcgsTL5jQQgwkzPDEbSscwZ9OSpBTAyw12ICIARCIcYR5DT4Ywgol8DcDC4bkkQIOCp4gwhKS1DChCjqIM2IJ9g1gQAYpJIJDCT2cwOAPBvRxH40u3BiDDNxoA0MKL/wYZH8jDNDFNycmkeQKLUzSThS8QMmDCUC6SMIIOZxDiScsaBkCJOoYEUUTV4hJJgpmosmCEnyg4UWS62DBRBNM1PnCmCXGIM+ZKjjxBxeOXOCCBpfoQgQReiSADRZGtJOBFH70UQQmwOjwwxb46BDGKAG06uoXAMQSCgAUUGihhRVW7LBDFlnsME1AADs=);
}

/* Interactions tab */
.tweet-row>.tweet-text {
    white-space : normal  !important;
}

/* Hide Japanese hash tag */
/*
a[href*="/search/?q=%23"] {
    display: none !important;
}
*/

} [/css]

普段ウェブでtwitterを見ることはほとんどないのですけど、CSSでユーザーミュートもできますね。

[css] @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {

/* 指定ユーザーをミュート */
/* @User1 , @User2 をミュートする場合 */
div[data-screen-name="User1"],
div[data-screen-name="User2"]
{
    display: none !important;
}

/* 公式RTをミュート */
/*div[data-retweet-id]
{
    display: none !important;
}
*/

} [/css]

ミュートで関係がこじれても責任は取りません~。