Twitterの画像を非表示にしてちょい軽量に、けど…

Twitterで画像が添付できるようになったのは悪い話じゃないんだけど、私のPCだと重いし、画面が狭いので１ページで読める件数が減ってしまってどうも使いにくい。そんなこと言うなら画像を非表示にしちゃえば？それで変わるかどうかは知らないけど…というお話です。

どうやって実現するの？

今回はFirefoxのStylishというアドオンを使ってCSSを変更することで実現してみようと思います。具体的には画像にdisplay: none !importantを指定して非表示にします。

また、Stylishなら一時的に画像を表示させたいときはツールバーのStylishアイコンをクリックして無効にすれば画像が表示されますので、切り替えも簡単です。

速くなるの？

display: noneを指定しても実際は表示されないだけで読み込まれているからあまり意味がないのでは？という話もあるんですが、表示できるツィート数が増えた事もあって気分的に何となく軽くなった気がしています。

何となく？気がする？その程度なの？と突っ込まれそうですが、まぁそんなところだと思います。どう感じるかは試してみてください。

CSSの書き方

Stylishを使えば.xxx{display: none}のようにクラスセレクタを指定してCSSを変更することができますが今回はクラスセレクタを指定して変更する方法は極力避け出来る限り#timeline > div.xxx{display: none}のようなエレメント構造を意識した書き方をしていきたいと思います。

こうゆう書き方をするとレイアウトの変更に弱いというデメリットがある反面、他への影響を最小限に抑えられるというメリットがあります。今回はメリットの方をとりました。

Stylishの準備

TwitterでStylishを使うための準備をします。FirefoxにStylishアドオンがインストールされている前提で書きます。

まずTwitter.comのページを開きツールバーからStylishアイコンをクリックしWrite New Style > For twitter.com を選択します。すると編集画面になり以下のようなテンプレートが自動的に挿入された状態になります。

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

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

}

{と}の間にCSSを書いていくことになります。保存すれば即反映されますので実際の画面を確認しながら進められます。

それではGO!

初期の状態は以下のような感じです。

まずはタイムライン中の画像を非表示

まずというか本命のタイムライン中の画像の非表示にしてみたいと思います。間違って画像以外のものも非表示にしてしまわないように注意しながら作業を進めていきます。

タイムライン中の添付画像を非表示に

/* 画像 */
#timeline li[data-item-type="tweet"] div.AdaptiveMediaOuterContainer {
    display:none !important;
}
/* 引用内の画像 */
#timeline li[data-item-type="tweet"] div.QuoteMedia {
    display:none !important;
}
/* 引用の画像(iframe内の画像) */
div.TwitterCardsGrid div.SummaryCard-image {
    display:none !important;    
}

これで画像が見えなくなります。画像が見えなくなった分ページ内に表示されるツイート数がちょっと増えます。

画像が表示されなくて寂しい場合は…

画像が表示されなくて寂しい場合はStylishを無効にすればいいのですが、ツイートの上にマウスを重ねた時（マウスオーバーした時）に画像を表示させるのを考えてみました。正直、引用の画像は中途半端ですし、マウスを動かすたびに画像の表示/非表示が切り替わってうっとおしいので、あまりオススメはできません。

マウスオーバーで画像表示

/* 画像 */
#timeline li[data-item-type="tweet"]:hover div.AdaptiveMediaOuterContainer {
    display:inline !important;
}
/* 引用の画像(iframe内の画像) */
#timeline li[data-item-type="tweet"]:hover div.QuoteMedia {
    display:inline !important;
}
/* 引用の画像(iframe内の画像) */
div.TwitterCardsGrid:hover div.SummaryCard-image {
    display:inline !important;  
}

アバター画像を非表示

今度は投稿者とおすすめユーザーのアバター画像も非表示にします。たまにアバター画像からアバター画像に縦線が引かれる事があるので、それも非表示にします。アバター画像くらいは表示された方が良い場合は以下はスキップしてください。

タイムラインのアバター画像を非表示

/* アバター画像 */
#timeline li[data-item-type="tweet"] img.avatar {
    display:none !important;        
}
/* アバター画像から延びる縦棒 */
#timeline li[data-item-type="tweet"] ol.conversation-module > li:after,
#timeline li[data-item-type="tweet"] ol.conversation-module > li:before {
    display: none !important;    
}
/* おすすめユーザーヘッダー画像 */
#timeline li[data-item-type="who_to_follow_entry"] li[data-item-type="user"] a.ProfileCard-bg {
    display:none !important;
}
/* おすすめユーザーアバター画像 */
#timeline li[data-item-type="who_to_follow_entry"] li[data-item-type="user"] a.ProfileCard-avatarLink {
    display:none !important;
}
/* ツイート入力BOXのアバター画像 */
#timeline > div.timeline-tweet-box > div.home-tweet-box > img.avatar {
    display:none !important;
}

アバター画像が非表示になったことで余白ができてしまったりしているところとかありますので調整します。

リツート入力BOX、タイムラインの余白の調整

/* ツイート入力BOXの余白 */
#timeline > div.timeline-tweet-box > div.home-tweet-box > form {
    margin-left:0px !important;
}
/* コンテンツの余白 */
#timeline li[data-item-type="tweet"] div.content {
    margin-left: 0px !important;
}
/* ○○さんがリツートの余白 */
#timeline li[data-item-type="tweet"] div.context > div.with-icn {
    margin-left: 0px !important;
}
#timeline li[data-item-type="tweet"] div.context {
    margin-left: 0px !important;
}
/* アクションリストの余白 */
#timeline li[data-item-type="tweet"] div.ProfileTweet-actionList {
    margin: 0px !important;
}
/* おすすめユーザーの高さ調整 */
#timeline li[data-item-type="who_to_follow_entry"] li[data-item-type="user"] p.ProfileCard-bio {
    height: auto !important;
}

ここまででこんな感じです。

左側のパネルを非表示に

左側パネルの自分自身のアバター画像を非表示にと思ったのですが、私の場合はトレンドとか使ってませんし、自分自身の情報やツイート数、フォロワー数はプロフィールから見ればいいという人なので左側パネルそのものを非表示にしてしまおうと思います。それによって1行あたりに表示できる文字数が増えることが期待できそうです。

左側のパネルを非表示

#page-container > div.dashboard-left {
    display:none !important;
}

左側のパネルがなくなったのでタイムラインの幅をちょっと整えます。

タイムラインの幅を調整

#timeline {
    clear:both !important;
    float:left !important;
    width:100% !important;
    margin-left: 0px !important;
}

文字数は増えたような気もするのですが、様子がだいぶ変わってしまいました…。

エピローグ

戦いも終盤に近づき、画像も表示されなくなって、画面に表示できるツイートも増えたように思います。目的は達成できたように思うんですが、うーん、なんか寂しいです。それになんか満ち足りない…。

やっぱ画像があった方が華やかというか楽しいというか…あの頃が画像が懐かしいというか…。

その事を再認識するための戦いだったんだなーと思う今日このごろです。