10秒で分かる説明

ユーザCSSを設定できる拡張機能を使って、TweetDeckのタイムラインを縦書きにしました。

0.僕たちは横書きを強いられているんだ

現状では、Twitterは横書き表示しかできません。いつになったら縦表示を選べるようにしてくれるのでしょうか。非常にフラストレーションがたまるので、自分で縦書きにしてしまいましょう。
……しかし、縦に積み重なるタイムラインなど、横書き表示を前提としたUI設計なので、利便性を考え妥協に妥協を重ねます。

1.Tweetdeckにログイン

使っていない人は、TweetDeckからログインしてみましょう。ブラウザ版の公式Twitterは、縦書き表示にするとすごく見にくいので、カスタム性に優れたTweetDeckを使います。見やすさを追求するため、アプリケーションで開けるようにしておくことをお勧めします。

2.Stylebotをインストール

Chrome拡張機能である、Stylebotをインストールします。ユーザースタイルシートを設定できる拡張機能なら何でもいいです。お使いのものをどうぞ。

3.CSSを上書きする

Tweetdeckを開いて画面右上、拡張機能一覧から、Sが書かれたマーク→「open stylebot」→「code」の順にクリックします。真っ白な画面が出てくるので、以下のコードをコピペしてください。

.js-tweet-text.tweet-text.with-linebreaks {
  font-family: serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  margin-top: 0.4em;
  max-height: 15.8em;
  writing-mode: vertical-rl;
}

.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  font-family: sans-serif;
  max-height: initial;
  writing-mode: horizontal-tb;
}

.column {
  width: 400px;
}

TweetDeckを更新すると、タイムラインが縦書き表示になっているはずです。

Good…………

4.細かい説明

タイムライン上のCSS

.js-tweet-text.tweet-text.with-linebreaks {
  font-family: serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.35em;
  margin-top: 0.4em;
  max-height: 15.8em;
  writing-mode: vertical-rl;
}

ここでTLに流れる各ツイートの見た目を決定しています。各項目の詳細です。

単独表示に関するCSS

.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  font-family: sans-serif;
  max-height: initial;
  writing-mode: horizontal-tb;
}

どうしても縦だと見にくい文章というのはあるので、単独表示したとき横書きになるようにしましょう。なお、letter-spacingとline-heightに関しても気になるようでしたら、initialをつけてデフォルトの設定に戻してください。

その他のCSS（カラムの幅）

.column {
  width: 400px;
}

カラムの幅指定です。400px自体にあまり意味はないですが、狭すぎるとツイートが読みにくくなります。

これで最低限の改良は終わりです。指定した数量をいろいろ変えてみて、性に合うものを見つけてください。ここから先は好みに合わせた更なる改良になります。

5.更なる改良

対応するものを.js-tweet-text.tweet-text.with-linebreaksに追加してください。

ツイートの基準を右に置きたい

横幅を設定することで文章の基準が右側になります。このとき、短いツイートが浮いた感じになって見にくいので、背景を薄い色で装飾するとよいです。

.js-tweet-text.tweet-text.with-linebreaks {
  background-color: rgb(248, 255, 255);
  border-color: rgb(220, 248, 255);
  border-style: dotted;
  box-sizing: border-box;
  padding: 0.3em;
  width: 100%;
}

.js-tweet-text.tweet-text.txt-size-variable--18.margin-b--10.with-linebreaks {
  background: none;
  border: none;
  padding: initial;
  width: initial;
}

こんな感じになります。

英数字を立たせたい

デフォルトでは英数字は横方向に表示されているので、立たせたい場合はこれを追加します。

.js-tweet-text.tweet-text.with-linebreaks {
  text-orientation: upright;
}

6.まとめ

これでTLに縦書きの文字が並び、最高の気分になることができました。しかしその代償として、画面に表示されるツイート数が半分以下になってしまいました。CSSが文字数を習得できないので、多分これは解決できないです。これも縦書きのためです、背に腹は代えられません。

備考

本当は横スクロール版も作りたかったのですが、Webエンジニアリング未経験の僕には無理でした。誰か頑張ってください。

Stylebotでの変更が反映されなくなったら、恐らくTweetDeckの仕様変更です。一年ほど使って、動かなくなったことはないので大丈夫だと思います。

参考リンク

縦書きWeb普及委員会