※2012/2/15 新Twitter画面での改行を表示に対応。
Twitterの入力欄「いまどうしてる？」には改行を入力できるのですが、表示欄では改行が半角スペースとして表示されてしまいます。
この動作により、Twitterで改行を入力しても無駄と考えている人が多いのではないでしょうか？
実はTwitterで入力した改行は入力したまま保存されており、改行として表示できます。
Twitterで入力した改行の表示前後の比較
改行の表示前イメージ
改行の表示後イメージ
このページでは、Twitterで入力した改行の表示方法を解説していきます。
Twitter上で改行が表示されない原因に興味がある方は「（作成中）Twitterで入力した改行の実験」をご覧下さい。
Twitterで入力した改行を表示する方法
次の３つの方法が思い当たります。
| 方法 | 動作方法 | 備考 |
| １．ユーザースタイルシート | ブラウザ上でTwitterの改行を常に表示。 | 標準機能では、サイト毎にユーザースタイルシートの使い分けができないブラウザが多い。その場合Twitte以外のサイトでも設定内容の影響を受ける可能性あり。 |
| ２．ブックマークレット | ブラウザ上でブックマークレットを実行したタイミングでTwitterの改行を表示。 | Twitterの改行表示のON/OFFを切り替え可能な物を用意しました。 |
| ３．クライアントアプリケーション | 改行コードを表示可能なクライアントアプリケーションを利用する事でTwitterの改行を表示。 | 動作は各クライアントアプリケーションに依存。 |
| ４．TwitAA (New!! 2011/1/30) |
AAを画像としてTwitPic上で共有する事で改行を表示。 | 画像として共有されるため、クライアントの違いによる影響を受けにくい。 |
１．ユーザースタイルシートを利用した、Twitter改行表示の仕組み概要
ユーザースタイルシートをブラウザに設定し、Twitterで入力した改行を表示します。
ユーザースタイルシートとは？
WebブラウザでWebページを閲覧する際に、閲覧者が任意のスタイルシートを適用する機能。
ユーザースタイルシートをブラウザに設定する事で、自分の好みのスタイルシートをWebサイトに適用可能。
具体的な設定内容
スタイルシートのクラス指定の記述”.js-tweet-text{white-space:pre!important;}” を含む、スタイルシートを用意しブラウザに設定します。
設定方法は、「Twitterで改行を表示する方法のまとめ」内のユーザースタイルシート編をご覧ください。
※補足情報：Twitter非公式サイトの場合に”.js-tweet-text{white-space:pre!important;}”を設定すると、ウィンドウの横幅に応じた折り返しがされず（140文字が１行で表示される）読みづらくなる事があるようです。
その場合は、"white-space:pre-wrap!important;"や"word-wrap:break-word!important;"を、ユーザースタイルシートに設定すると良い感じに折り返しされます。
２．ブックマークレットを利用した、Twitter改行表示の仕組み概要
ブラウザで表示したTwitterサイト上でブックマークレットを実行し、Twitterで入力した改行を表示。
ブックマークレットとは？
ウェブブラウザで作動するJavaScriptプログラムの一種。
ブラウザのお気に入り等に登録しておき、任意のタイミングで実行可能。
具体的な設定内容
Twitter改行表示用のブックマークレットをブラウザのお気に入りバー等に登録。
Twitterの改行を表示したい時に、Twitter改行表示用のブックマークレットをクリック。
設定方法は、「Twitterで改行を表示する方法のまとめ」内のブックマークレット編をご覧ください。
３．クライアントアプリケーションを利用した、Twitterの改行表示の概要
改行コード(CRLF)に対応しているTwitterクライアントアプリケーションを利用することで、Twitterで入力した改行を表示します。
Twitterクライアントアプリケーションとは？
Twitterでは開発用にTwitter APIが公開されており、このAPIを利用したフリーソフト等が幾つも公開されています。
これらの中には改行コードを改行として表示可能なソフトが存在していますので、これを利用する事でTwitterで入力した改行を表示します。
４．TwitAAを利用した、Twitterの改行表示の概要
Twitter公式サイトとの連携機能が実装されている、TwitPic上でAA画像を共有する事で改行を表示します。
これらの具体的な設定方法は、以下のTwitterで改行を表示する方法のまとめで解説していますのでご覧ください。
Twitterで改行を表示する方法のまとめ
- Twitterで入力した改行を表示する方法 ： 概要
- Twitterで入力した改行を表示する方法 ： Internet Explorer ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Firefox ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Google Chrome ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Safari ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Opera ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： ブックマークレット編
- Twitterでアスキーアートを表示する方法
- TwitAAの使い方(New!! 2011/1/30)
更新履歴
- 2010/04/13 white-space:pre;をwhite-space:pre-wrap;に変更。（IEを除く）
- 2010/04/24「Twitterでアスキーアートを表示する方法」を追加。
- 2011/01/30 TwitAA関連の情報を追加。
- 2012/02/14 新Twitter画面での改行表示に対応。
- 2012/02/15 フォント設定を強制するため、スタイルシートに!important設定追加。
＿ _ ＿＿＿_ ┏┓ ┏━━┓ / ) ) )／ ＼ ／＼. ┏┓┏┓ ┏┛┗┓┃┏┓┃ { ⊂) （●） （●） ＼ ┃┃┃┃ ┗┓┏┛┃┗┛┃┏━━| / ///（__人__）/// ＼━━┓┃┃┃┃ ┏┛┗┓┃┏┓┃┃ ! ! `Y⌒y'´ | ...┃┃┃┃┃ ┗┓┏┛┗┛┃┃┗━━| l ﾞー ′ ,／.━━┛┗┛┗┛ ┃┃ ┃┃ | ヽ ー‐ ｨ ┏┓┏┓ ┗┛ ┗┛ | / | . ┗┛┗┛ | 〆ヽ/ | ヾ_ノ＿＿＿_ ／ ＼ ／ ─ ─＼ ／ （●） （●） ＼ | （__人__） | ＼ ｀ ⌒´ ／ ノ ＼ ／´ ヽ カ | ｌ l||l 从人 l||l l||l 从人 l||l カ タ ヽ -一''''''"~~｀`'ー--､ -一'''''''ー-､. タ ヽ ＿＿＿＿(⌒)(⌒)⌒) ) (⌒＿(⌒)⌒)⌒)) ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐ ,. - ''"|￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ρ￣`ｌ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ノ￣￣ ＿＿＿_ ／ ＼ （送信） ／ ─ ─＼ ／ （●） （●） ＼ ／ }ー┐ r┐ ＼ | （__人__） |. { ノヽ / ＿＿ ヽ / |/ } ＼ ｀ ⌒´ ,／. ＼ ツ ／ ､_／ Ｏ ／ , -‐ ´ ! ー ! ｀ ｰ-､ / __ ∧ | ∧ . 〃 ,. --ミヽ /∧ i |/ハ ji／ ￣｀//, ..__､〃 , ___!＿_j＿＿＿＿＿__ . {{ '/ // '‐-､ ′ | ｉ´￣￣￣￣￣￣￣ ｀ｉ ﾚ, / , ∨ | | | //7//―ｧ/‐/7/￣{ iっ | | ┌―――┐ | /! 〃 // （' //} ｉ | | | |┌―― ､| | . | 〃 ￣ jﾉｲ | | |::l::i::::::::::::::| | . | ､__ﾉ{__,.ｲ , | | |_j::l::::::::::::::| | ｜ ） ﾚ／_＿__ー‐――┤:::::::::: |――┘ ￣￣￣￣￣￣〔丁￣￣￣￣￣￣￣￣￣| ::::::::::::|￣￣￣￣ ｀￣￣￣￣￣｛二二二二l_＿＿_|二二}