Subscribe with livedoor Reader
Twitter Account
TWITRSS

Twitterで入力した改行を表示する方法 ： Safari ユーザースタイルシート編

Posted in 3月 7th, 2010 By asciiart

※2012/2/15 新Twitter画面での改行を表示に対応。

Twitterの入力欄「いまどうしてる？」には改行を入力できるのですが、表示欄では改行が半角スペースとして表示されてしまいます。

このTwitterで入力した改行を、Safariのユーザースタイルシート設定により半角スペースではなく改行として表示する方法を解説します。
（※今回の解説で使用する環境は、Windows Vista + Safari 4）

 

Twitterで改行を表示するユーザースタイルシート設定方法

  1. スタイルシートを用意します。

    次の何れかの方法でスタイルシートを用意してください。

    スタイルシートを選択 詳細
    １．改行を表示したい 改行表示用のスタイルシート(usercss_twitter_linebreak.css NEW!! 2012/2/15)をダウンロードして下さい。
    最もシンプル。単に改行を表示したいだけであれば、こちらで良いでしょう。
    ２．改行込みのアスキーアートを表示したい アスキーアート表示用のスタイルシート(usercss_twitter_asciiart.css NEW!! 2012/2/15)をダウンロードして下さい。
    ・詳細は、「Twitterでアスキーアートを表示する方法」を参照してください。
    ３．改行込みのスタイルシートを自作したい 次のクラス定義を含むスタイルシートを作成して下さい。
    .js-tweet-text{white-space:pre-wrap!important;}

     

  2. Safariへ、ユーザースタイルシートの設定を行います。


    メニューバーより、[編集]-[設定]と選択し表示されたダイアログの[詳細]アイコンをクリックします。
    [ユーザースタイルシート]テキストエリアに１で用意したスタイルシートへのパスを設定します。

     

  3. Twitterへアクセスし改行の表示結果を確認します。


    確認用にどうぞ→ http://twitter.com/illiorzilli
    本サイトで取得しているTwitterアカウント、http://twitter.com/illiorzilli では、改行を含むアスキーアート(AA)を定期的につぶやいていますので表示してみてください。

    Twitter上のAAと改行についてユーザーシート適用前と適用後の比較

    ユーザースタイルシート設定前のTwitter上のAA

    ユーザースタイルシート設定後のTwitter上のAA

この様にSafariにユーザースタイルシートを設定することで、Twitter上の改行を常に表示できるようになります。

Twitter上で改行を表示する方法は他にも幾つかの選択肢がありますので、以下のリンク先を合わせてご覧ください。

 

Twitterで改行を表示する方法のまとめ

更新履歴

  • 2010/04/13 white-space:pre;をwhite-space:pre-wrap;に変更。（IEを除く）
  • 2010/04/24「Twitterでアスキーアートを表示する方法」を追加。
  • 2011/01/30 新Twitter画面で改行を表示できるよう対応。
  • 2011/02/13 ユーザースタイルシートのリンク先変更。
  • 2012/02/14 新Twitter画面での改行表示に対応。
  • 2012/02/15 フォント設定を強制するため、スタイルシートに!important設定追加。

AAテスト、コメント適当にどうぞ～