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に流れる各ツイートの見た目を決定しています。各項目の詳細です。
| 各要素 | 説明 |
|---|---|
font-family |
フォントをして指定ます。せっかくなので明朝体で。 |
font-size |
フォントサイズを決定します。 |
letter-spacing |
文字の間隔を決定します。0.05em以上推奨です。 |
line-height |
行間隔を決定します。広めにとると縦読みしやすくなります。 |
margin-top |
デフォルトだと上部との間隔が狭いので、少し広くします。 |
max-height |
デフォルトではTLが縦に長くなってしまうので、縦の最大値を指定します。最低でも縦に15文字入るようにすると読みやすいです。 |
writing-mode |
一番重要な、文字方向を指定しています。 |
単独表示に関する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の仕様変更です。一年ほど使って、動かなくなったことはないので大丈夫だと思います。