Subscribe with livedoor Reader
Twitter Account
TWITRSS

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

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

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

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

 

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


Google Chromeは、標準でユーザースタイルシートをサポートしていないようです。
ここではGoogle Chrome上でユーザースタイルシートを利用するため、Chrome Stylist という Google Chrome 拡張機能をインストールした後にTwitter改行表示用ユーザースタイルシートを設定します。
  1. Google Chrome 拡張機能 Chrome Stylistをインストールします。


    次のサイトにアクセスし[インストール]をクリックします。

    「Chrome Stylist - Google Chrome 拡張機能ギャラリー」
    https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd


    [インストールの確認]ダイアログが表示されるので、[インストール]ボタンをクリックします。
     
    次のメッセージが表示され、インストールが完了します。

     

  2. 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 Pゴシック','MS PGothic',IPAMonaPGothic,sans-serif!important;
    }

     

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


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

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

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

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

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

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

 

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

更新履歴

  • 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設定追加。

コメント / トラックバック81件

  1. 匿名 より:
      r=====ュ (_ __)
      {!    l}  |/
      ヾ__o__〃 __
      /~~~~~ヽ //
      ,'.:.:(,・ω・):.:/ お茶どぞ~
     {.:.:つ旦O:ノ
      ヽ、__ノ  旦旦旦旦
       U U
  2. 匿名 より:
    拡張機能の保存は出来たのに、Chromeをまた立ち上げたら、その拡張機能の保存していたデータが消えていました。どうなってるんですか?
  3. テスト より:
    r=====ュ (_ __)
      {!    l}  |/
      ヾ__o__〃 __
      /~~~~~ヽ //
      ,'.:.:(,・ω・):.:/ お茶どぞ~
     {.:.:つ旦O:ノ
      ヽ、__ノ  旦旦旦旦
       U U
  4. 匿名 より:
    て
    す
    と
    てすと
    てすと
  5. tesuto より:
     ( ^ω^)
      / ,   ヽ    <Vista厨涙拭けお
     ̄_|,..i'"':, ̄ ̄ ̄ ̄
      |\`、: i'、
      \ \`_',..-i
       \.!_,..-┘
  6. tesuto より:
    あ
    ああ
    あ
  7. tesuto より:
    タスポ
    たす
    です
  8. tesuto より:
     
      ( ^ω^) 
      / ,   ヽ    <ロンガーども
     ̄_|,..i'"':, ̄ ̄ ̄ ̄  涙ふけお
      |\`、: i'、
      \ \`_',..-i
       \.!_,..-┘
  9. test より:
    あ
    い
    う
  10. 匿名 より:
          _,,,
         _/:・e・:
       ∈ミ;;;ノ,ノ
         ヽヽ
  11. 匿名 より:
              ,,.  - ─   - ..,, 、
           ,. "こミミミミミミミミミミミ ヾ、
          /彡彡彡いノソソ洲l!jjミミミミミ彡:!
          /彡三ヲ'''''"⌒"''ー'''""⌒''"ヾ彡l!
          fjィミィ'''"                  :ミ!
         fjlィ彡                  :ミ!
    .     fjィ彡  ,,;7三ニ=;;,   ,r=ニ二、.:ミ!
         ヘjfj!.    ,,rェテゞ:::...  |!t.テゞ, レゝ
          r,. l!     ``~~ ';:::::..  |!"~´   「r1
          iいl!       ,.:::::::  l、:::..   !l{.!
    .      ヽ'1         /t__;' ;_,}ソ、:::..  !-′
           |      ,.ィ:'彡ノノハミミヾゞ,, |
            !   -''''”"~"~'''''''"~`"``/
            |:::..       二.. ..:::::,.イ
            / 丶      ...:.::;、 _, / |
    .     / \. ` -     三三/ |、
        /     ` 、    三三/    ! \
      /          丶 _/    ,'   \
            ヽ    /  \   /       \
              \_/ | (○  \_/
  12. てすと より:
    て
    す
    と
  13. てすと より:
             .__ 
           ((ヽ|・∀・|ノ  乗った! 
             |__| )) 
              | | 
              調子
  14. tesuto より:
    . .: : : : : : : : :: :::: :: :: : :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
        . . : : : :: : : :: : ::: :: : :::: :: ::: ::: ::::::::::::::::::::::::::::::::::::::
       . . .... ..: : :: :: ::: :::::: :::::::::::: : :::::::::::::::::::::::::::::::::::::::::::::
            Λ_Λ . . . .: : : ::: : :: ::::::::: ::::::::::::::::::::::::::
           /:彡ミ゛ヽ;)ー、 . ::: : :: ::::::::: :::::::::::::::::::::::::::::
          / :::/:: ヽ、ヽ、 ::i . .:: :.: ::: . :::::::::::::::::::::::::::::::::::::::
          / :::/;;:   ヽ ヽ ::l . :. :. .:: : :: :: :::::::: : ::::::::::::::::::
     ̄ ̄ ̄(_,ノ  ̄ ̄ ̄ヽ、_ノ ̄ ̄
  15. 匿名 より:
      _ ,..-、 
     ,ノ ・く‐⌒ ォェ‐‐!!! 
    ./  r ヾ∵。 
    |.   |  ゚U
  16. 匿名 より:
    te
    su
    to
  17. 匿名 より:
    test
    t
    e
    s
    t
  18. 匿名 より:
    te
    sut
  19. 匿名 より:
    T
    e
    s
    t
  20. 匿名 より:
    t
    e
    s
    t
    aaa
  21. 匿名 より:
    a
    b
    c
    d
  22. テスト より:
    はいはいわろすわろす
    
     〃∩ ∧_∧
     ⊂⌒( ・ω・)
      \_っ⌒/⌒c
        ⌒ ⌒
  23. 匿名 より:
    d
    d
    2
  24. 匿名 より:
    金
    バ
    エ
  25. 以下、名無しにかわりまして より:
    あああ
    い
    う
  26. 匿名 より:
    _人人 人人_ 
    > 突然の死 < 
     ̄Y^Y^Y^Y ̄
  27. 匿名 より:
    テストー
      r=====ュ (_ __)
      {!    l}  |/
      ヾ__o__〃 __
      /~~~~~ヽ //
      ,'.:.:(,・ω・):.:/ お茶どぞ~
     {.:.:つ旦O:ノ
      ヽ、__ノ  旦旦旦旦
       U U
  28. テスト より:
        。☆.゚。.
      。:☆・。゚◇*.゚。
      ・◎.★゚.@☆。:*・.
     .゚★.。;。☆.:*◎.゚。
      :*。_☆◎。_★*・_゚
      \ξ \  ζ/
       ∧,,∧\ ξ
      (`・ω・ )/  < おめでとう
      c/  つ∀o
      
  29. 匿名 より:
    test
    dayo
  30. 匿名 より:
            ( ⌒ ) 
            γ⌒   ⌒ヽ 
            ゝ      ノ   ポッポー 
              | l | 
                ____ 
                /      \ 
             / 一 ノ  ゝー ヽ 
            /  (●) }lil{ (●) ', 
         __|  ノ(  (__人__)    |
       (´  .\ ⌒   | /     /
        ``゙''ー、 >ー- `´ --‐ '’
              }         ヘ 
             .{       j、   }
           }        :! `ー'
           /  / ヽ   }  |l!il| 
            (  /    ヽ  ! γ `゚´ ヽ て 
            `ー'      `ー'  {___jzz, て 
                  )          て 
                  ゝ⌒ ヘ/⌒ヽて
  31. 匿名 より:
    ┌○┐   
    │ね|ハ,,ハ   
    │む|゚ω゚ )     
    │い| //   
    └○┘ (⌒)   
        し⌒”
  32. 匿名 より:
    てすてす
    てすてす
  33. 匿名 より:
    ♪
        ∧_∧ ♪  オドロゥ♪
    . ((o(・ω・` )(o))
       /
       し―-J
    ♪
       ∧_∧
     ((o(´・ω・)o))  オド・・アレ?
        ヽ   ヽ ♪
        し―-J
  34. 匿名 より:
    ニャー    ニャー 
     
    ∧_∧  ∧_∧ 
     
    (。・ω・) ミ。・ω・ミ 
    ~(_uu)~ミ_uuミ
  35. 匿名 より:
          ,ハiヽミ               ∧,,∧
           /"・,, ミミ             (・ω・;)っ_/)   ≡ =
          (。/ )   ミi┬―┬‐’⌒ヾミミミミ彡と,,__,,つ
            ノ    |_|_____.| "    )               ≡ = = -
           ,( 、  ,,)_.||_彡(  ,,ノ   = ―
             //( ノ."    ,ノ.ノ, (      ≡ ==
          //   \Yフ  , ‘/  い        三 ≡ = ―
          くノ     "  くノ    //"三
       ,.,,, ,.,,,      ,,,     くノ   ,,, ,           ,.,,,
        ドドッドドッ
  36. 匿名 より:
        ヘ⌒ヽフ 
       
    ( ・ω・) ㌧ 
       
    / ~つと)
  37. 匿名 より:
    て
    す
    と
  38. 匿名 より:
    て
    す
    と
  39. 匿名 より:
                      ____ 
                    /_ノ  ヽ、_\ 
             ,. -- 、,  o゚((●)) ((●))゚o 
         ,.―<,__    ヽ:::⌒(__人__)⌒::::: \ 
        /          ヽ  |r┬-|     | 
       __|            }.  | |  |     | 
      / ヽ,       /  {   | |  |     | 
      {    Y----‐┬´   、. | |  |     | 
     /'、   ヽ    |ー´   ヽ, | |  |     | 
     {  ヽ  ヽ    lヽ_!´   ヽ`ー'ォ    / 
     ',   ヽ  ヽ    ,/     } 
      ヽ  ヽ  、,__./      / 
       \  ヽ__/,'    _ / 
         \__.'! 〈  _, '
  40. test より:
    tes
    te
  41. てst より:
    てst
    っとぺk
    
    えおrgkぺおrげ
    grこえ
  42. oo より:
    ε ⌒ヘ⌒ヽフ
    (   (  ・ω・)
     しー し─J
  43. oo より:
     , -―-、、
    /   ヘ⌒ヽフ 
    l  ( ・ω・)
    ヽ、_ フづと)'
      人  Yノ
      し(_)
  44. oo より:
      ∧,,∧
     (;`・ω・)  。・゚・⌒) チャーハン作るよ!!
     /   o━ヽニニフ))
     しー-J
    
    
      ∧,,∧  豚肉も入れるよ!
     (;`・ω・)             ヘ⌒ヽフ⌒γ
     /   o━ヽニニフ       (・ω・ )  )
     しー-J              しー し─J
    
    
      ∧,,∧  ・・・
     ( ´・ω・)             ヘ⌒ヽフ⌒γ
     /   o━ヽニニフ       (・ω・ )  )
     しー-J              しー し─J
    
    
                              ∧,,∧  野菜だけでもおいしいね
                             (・ω・  )
                 / ̄ ̄ ̄ ̄ヽ・゚・ 。・゚/(_,   )
                /         ̄ ̄ ̄ \、_)
               | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
                 ̄| ̄| ̄ ̄ ̄ ̄ ̄ ̄| ̄| ̄
    
      ε ⌒ヘ⌒ヽフ ブヒ♪
     (   (  ・ω・)
      しー し─J ヽ・゚・ 。・゚/
               ̄ ̄ ̄
  45. 匿名 より:
    あsだdds
    さだsだf
  46. ささ より:
     ┌○┐   
     │ |ハ,,ハ   
     │祝|゚ω゚ )  Twitterが 
     │  _| //  改行表示に 
     └○┘ (⌒)   対応しました
        し⌒
  47. ささ より:
     ┌○┐   
     │  ハ,,ハ   
     │祝|゚ω゚ )  Twitterが 
     │  _| //  改行表示に 
     └○┘ (⌒)   対応しました
        し⌒
  48. ささ より:
                 ;' ':;,,     ,;'':;,
             ;'   ':;,.,.,.,.,.,,,;'  ';,
            ,:'           : :、
           ,:' /      \   ::::::::',
           :'  ●     ●     :::::i.
           i  ''' (_人_) '''' *    :::::i
            :              :::::i
           `:,、           ::::::::: /
            ,:'        : ::::::::::::`:、
  49. ささ より:
      。。 
     ゚●゜
        。。 
       ゚●゜ 
    
      。。 
     ゚●゜
    
        。。 
       ゚●゜
    
      。。 
     ゚●゜ ちょっと通りますにゃ 
    
        。。 
       ゚●゜ 
    
      。。 
     ゚●゜ 
    
        。。 
       ゚●゜ 
    
      。。 
     ゚●゜
  50. a より:
        。。 
       ゚●゜ 
    
      。。 
     ゚●゜ 
    
        。。 
       ゚●゜ 
    
      。。 
     ゚●゜

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