※2012/2/15 新Twitter画面での改行を表示に対応。
Twitterの入力欄「いまどうしてる？」には改行を入力できるのですが、表示欄では改行が半角スペースとして表示されてしまいます。
このTwitterで入力した改行を、Google Chrome のユーザースタイルシート設定により半角スペースではなく改行として表示する方法を解説します。
（※今回の解説で使用する環境は、Windows Vista + Google Chrome 4）
Twitterで改行を表示するユーザースタイルシート設定方法
Google Chromeは、標準でユーザースタイルシートをサポートしていないようです。
ここではGoogle Chrome上でユーザースタイルシートを利用するため、Chrome Stylist という Google Chrome 拡張機能をインストールした後にTwitter改行表示用ユーザースタイルシートを設定します。
-
Google Chrome 拡張機能 Chrome Stylistをインストールします。
次のサイトにアクセスし[インストール]をクリックします。
「Chrome Stylist - Google Chrome 拡張機能ギャラリー」
https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd
[インストールの確認]ダイアログが表示されるので、[インストール]ボタンをクリックします。
次のメッセージが表示され、インストールが完了します。
-
Google Chromeへ、ユーザースタイルシートの設定を行います。
Google Chrome右上にある、[Google Chrome の設定]アイコンをドロップダウンし[拡張機能]をクリックすると[拡張機能]タブが表示されます。
この[拡張機能]タブ内の[Chrome Stylist]の[オプション]ボタンをクリックします。
[Chrome Stylist]の[オプション]ボタンをクリックすると、[Chrome Stylist]のオプション画面が表示されます。
[Styles]タブをクリックします。
[Add New Style]ボタンをクリックし、イメージの様に値を設定し[Save]ボタンをクリックします。
スタイルシート部分は、以下の何れかの設定を行って下さい。- ・改行を表示したい
-
#page-container .js-tweet-text{white-space:pre-wrap!important;} - ・改行込みのアスキーアートを表示したい
-
#page-container .js-tweet-text{ white-space:pre-wrap!important; font-size : 16px!important; line-height: 18px!important; font-family: 'ＭＳ Ｐゴシック','MS PGothic',IPAMonaPGothic,sans-serif!important; }
-
Twitterへアクセスし改行の表示結果を確認します。
確認用にどうぞ→ http://twitter.com/illiorzilli
本サイトで取得しているTwitterアカウント、http://twitter.com/illiorzilli では、改行を含むアスキーアート(AA)を定期的につぶやいていますので表示してみてください。
Twitter上のAAと改行についてユーザーシート適用前と適用後の比較
ユーザースタイルシート設定前のTwitter上のAA
ユーザースタイルシート設定後のTwitter上のAA
この様にGoogle Chromeにユーザースタイルシートを設定することで、Twitter上の改行を常に表示できるようになります。
Twitter上で改行を表示する方法は、他にも幾つかの選択肢がありますので以下のリンク先を合わせてご覧ください。
Twitterで改行を表示する方法のまとめ
- Twitterで入力した改行を表示する方法 ： 概要
- Twitterで入力した改行を表示する方法 ： Internet Explorer ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Firefox ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Google Chrome ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Safari ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： Opera ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 ： ブックマークレット編
- Twitterでアスキーアートを表示する方法
- TwitAAの使い方
更新履歴
- 2010/04/13 white-space:pre;をwhite-space:pre-wrap;に変更。（IEを除く）
- 2010/04/24「Twitterでアスキーアートを表示する方法」を追加。
- 2011/01/30 新Twitter画面で改行を表示できるよう対応。
- 2012/02/14 新Twitter画面での改行表示に対応。
- 2012/02/15 フォント設定を強制するため、スタイルシートに!important設定追加。
(~) γ´⌒｀ヽ {i:i:i:i:i:i:i:i:} ｽﾞｽﾞｰ （ ´･ω･） . (っ=|||ｏ) . ￣￣ ｀――´￣￣￣＼∩ _( ⌒) ∩__ ／/,. ノ￣＼ / .)E） /i"/ /|_|i_トil_| / / ／￣￣￣￣￣ |ii.l/ /┃ ┃{. / / ＜ ぱいぱい ボイン！ボイン！ボイン！ |i|i＿/''' ヮ''丿i＿/ ∧ ∧ i|/ ,ク ム"／ ／ (*‘ω‘ *) ちんぽっぽ |（ ヽ -====-＼ ./ つ ゞヽ 三 ( ( ) ミ ＼ヽ ノ ヽし ミ ぼいんっ