※2012/2/15 新Twitter画面での改行を表示に対応。
Twitterの入力欄「いまどうしてる？」には改行を入力できるのですが、表示欄では改行が半角スペースとして表示されてしまいます。
このTwitterで入力した改行を、Firefoxのユーザースタイルシート設定により半角スペースではなく改行として表示する方法を解説します。
（※今回の解説で使用する環境は、Windows Vista + Firefox 3）
Twitterで改行を表示するユーザースタイルシートの設定方法
-
スタイルシートを用意します。
次の何れかの方法でスタイルシートを用意してください。
スタイルシートを選択 詳細 １．改行を表示したい 改行表示用のスタイルシート(userContent.css NEW!! 2012/2/15)をダウンロードして下さい。
最もシンプル。単に改行を表示したいだけであれば、こちらで良いでしょう。２．改行込みのアスキーアートを表示したい アスキーアート表示用のスタイルシート(userContent.css NEW!! 2012/2/15)をダウンロードして下さい。
・詳細は、「Twitterでアスキーアートを表示する方法」を参照してください。３．改行込みのスタイルシートを自作したい 次のクラス定義を含むスタイルシートを作成して下さい。
.js-tweet-text{white-space:pre-wrap!important;} -
Firefoxへ、ユーザースタイルシートの設定を行います。
Firefoxでユーザースタイルシートを設定するには、決められたフォルダに決められたファイル名でユーザースタイルシートファイルを配置しFirefoxを再起動します。
（私のVista環境だと"C:\Users\<ユーザー名>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\"でした。）
Firefoxのユーザースタイルシート設定フォルダとファイル名 項目 値 ユーザースタイルシートのフォルダ <Firefoxのプロファイルフォルダ>/chrome/ ユーザースタイルシートのファイル名 userContent.css Firefoxのプロファイルフォルダ （参考：Firefox サポート / ナレッジベース /プロファイル ）
xxxxxxxx はランダムな 8 文字の文字列を意味します。OS Firefoxのプロファイルフォルダのパス Windows 7/Vista/XP/2000 %APPDATA%\Mozilla\Firefox\Profiles\xxxxxxxx.default\ Windows 98/Me C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\ Linux ~/.mozilla/firefox/xxxxxxxx.default/ Mac OS ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/
ユーザースタイルシート “userContent.css”を、<Firefoxのプロファイルフォルダ>/chrome/配下に配置します。
（画像はVistaのイメージ）
※もしAppDataフォルダが表示されない場合は、フォルダオプションの[すべてのファイルとフォルダを表示する]を適用してください。
（フォルダオプションダイアログはエクスプローラー上で[ALT]キーを押し表示されるメニューバー内の[ツール]-[フォルダオプション]と選択する事で表示されます。 ）
- Firefoxを再起動後、Twitterへアクセスし改行の表示結果を確認します。
確認用にどうぞ→ http://twitter.com/illiorzilli
本サイトで取得しているTwitterアカウント、http://twitter.com/illiorzilli では、改行を含むアスキーアート(AA)を定期的につぶやいていますので表示してみてください。
Twitter上のAAと改行についてユーザーシート適用前と適用後の比較
ユーザースタイルシート設定前のTwitter上のAA
ユーザースタイルシート設定後のTwitter上のAA
この様にFirefoxにユーザースタイルシートを設定することで、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画面で改行を表示できるよう対応。
- 2011/02/13 ユーザースタイルシートのリンク先変更と、ファイル名をFireFox固定(userContent.css)の名称へ変更。
- 2012/02/14 新Twitter画面での改行表示に対応。
- 2012/02/15 フォント設定を強制するため、スタイルシートに!important設定追加。
コメント / トラックバック17件