【Twitter】DMの入力欄の高さ制限を撤廃するCSS

2022年10月16日Twitter

Twitterのアイコン

この記事では、TwitterのDM(メッセージ)の入力欄の高さ制限を撤廃するCSSについて書きます。長文入力がしやすくなります。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

TwitterのDM入力欄の高さ制限を廃止した画像1

本記事で紹介するCSSを使えば、TwitterのDM(ダイレクトメッセージ)の入力欄の高さ制限を廃止できます。

通常、TwitterのDM欄は、高さ制限が設けられています。一定量の文章を入力すると、スクロールバーが表示されて見切れてしまいます。

通常のTwitterのダイレクトメッセージ欄画像

長文を入力した時に、かなり不便ですよね。スクロールして、誤字チェックしたり、めんどくさいです。まぁ、そもそもTwitterのDMは、うっかりEnterで誤送信しちゃう恐れがあるので、別のメモ帳に書いて、コピペが安心です。

わざわざEnterで送信できないように制限する拡張機能もあるくらいです。

TwitterのDMで長文を頻繁に送る方、ぜひ参考にしてみてください。いつでもオンオフできます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

TwitterのDM入力欄の高さ制限を撤廃するCSS

Twitterにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*DM入力欄の高さ・幅の制限撤廃*/
.DraftEditor-editorContainer,
.DraftEditor-root,
.public-DraftEditor-content {
  max-height: none;
  min-height: auto;
  overflow: visible;
}

/*DM入力欄の背景色透明化*/
[aria-label="新しいメッセージを作成"]>div:nth-of-type(2) {
  background-color: transparent !important;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:twitter.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

試しに、サブ垢などを使って、長文のDMを入力してみてください。通常なら一定の行に達すると、スクロールバーが出てきて、見切れます。本記事のCSSを適用した後だと、どんどん上にせり上がります。何行書いても、一目で確認できます。

TwitterのDM入力欄の高さ制限を廃止した画像2

一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、TwitterのDM(ダイレクトメッセージ)の入力欄の高さ制限を廃止して、見やすくするCSSでした。

本記事は、読者の方から教えていただきました。感謝です。

Posted by ナポリタン寿司