小さいウィンドウでTweetDeckを快適に使う (ModernDeck + CSS調整)

(2018/08/05 追記) Tweetenを使えば楽々解決

Tweetenを使えば、私の要求に合うようにTweetdeckをカスタマイズできる。アプリ版とChrome拡張版があるが、私はStylusと併用するためにChrome拡張版を使っている。ModernDeckとは併用できないと思うのでそちらは消しておきましょう。



以下古い内容

PCでゲームしながらTwtterしたいので、Twitterアプリはスマホアプリみたいに縦細くして画面の隅に常駐させているんだけど、UWP版の公式Twitterアプリが機能的にイマイチなのでTweetDeckを代わりに使えるようにしたい。

といってもTLを追うだけならほぼカスタマイズなしでいい感じに使えるんだけど、ユーザプロフィールとかユーザTLとかの画面がポップアップ的になってるからウィンドウを縦細くしてると画面外に出ちゃって不便なのよね。

というわけで下記手順でそれを解消しました。

  1. ModernDeckを入れる。
  2. Stylish等を使って下記CSSをtweetdeck.twitter.comに適用する
  3. Chromeのメニューから[その他のツール]-[デスクトップに追加]を選び、TweetDeckを個別のウィンドウで起動できるようにする
  4. デスクトップに追加されたアイコンからTweetDeckを起動し、ウィンドウ幅をカラム幅ぴったりに合わせる
/**** 以下、ModernDeckを細くして使うときの調整 ****/

/* 全体の幅をいい感じに狭める */
.js-modal-context .s-profile, /* プロフィール */
.js-modal-panel, /* ユーザツイートリスト */
.js-modal .s-inreply /* リツイート */
{
	width: 320px;
}

/* 設定画面は元のサイズに戻す */
.settings-modal .js-modal-panel.mdl {
	width: 580px;
}

/* ユーザツイートリスト画面の左ペインのサイズを小さくしてツイートリストを縦に表示する余裕を作る */
.js-modal-panel .mdl-column-med {
    display: block;
    height: 200px;
    width: 100%;
}

/* ツイートリストを左ペインの下に表示する */
.js-modal-panel .mdl-column-rhs {
    border-top: 1px dashed #979797;
    height: 100%;
    position: relative;
    top: 0;
	width: 320px; /* サイズも上書きされているので再指定 */
}

/* 検索領域も狭める */
.js-search-in-popover .js-popover {
	width: 320px !important;
}

/**** 以下、バグフィクス ****/

/* TL上の画像プレビューの余白が詰まりすぎているのを修正 */
.media-item:first-child {
	margin-top: 16px;
}

/* Activityタブで~がリツイートしました等の文言が消える問題の修正 */
.activity-header .nbfc {
    display: block;
}

/* Homeタブで~がリツイートしました等の文言が消える問題の修正 */
.tweet-context .nbfc {
	font-size: 14px;
}

/* Activityタブで~がフォローしましたの文言がズレる問題の修正 */ 
.activity-header + .account-summary {
	margin-top: 24px;
}

/* Activityタブだけactivity-headerの色が濃いのを修正 */
.activity-header .nbfc,.activity-header .nbfc a {
    color: #979797;
}

/* TLのユーザ名を太字にする */
.account-inline .fullname {
    font-weight: 600;
}

とりあえずユーザTLと検索がいい感じになるようにしただけだから、崩れている場所もあるかも知れない。見つけたら直す。

2017/10/22

諸々おかしいところも含めて微調整した。設定画面は狭くしないようにした。