Subscribe with livedoor Reader
Twitter Account
TWITRSS

Twitterでアスキーアートを表示する方法

※2011/1/30 新Twitter画面でも改行を表示できるよう対応。

Twitterの改行をブラウザ上で表示する方法は、別の投稿で紹介した通り。

改行表示だけでもある程度の表示を行えるのですが、次のイメージの通り微妙にズレる事があります。

↓ズレの修正結果。

このページでは、日本のアスキーアートに最適化されたユーザースタイルシートを紹介します。

アスキーアートを表示するための基本設定

日本の多くのアスキーアートは、アスキーアートが普及した時期に多く使われていたブラウザIE5の設定にあわせて作られています。

このIE5当時の標準表示設定をTwitter上に反映する事で、多くのアスキーアートを適した設定で表示できるようになります。

IE5当時の標準表示設定を、スタイルシートで記述すると次の通り。

font-family: IPAMonaPGothic,'MS Pゴシック',sans-serif;
font-size  : 16px;
line-height: 18px;
参考:「アスキーアート - Wikipedia」

Twitter上でアスキーアートを表示するためのユーザースタイルシート

今回は「アスキーアートを表示するための基本設定」に改行表示のスタイルシートを追加し、Twitter上でアスキーアートを表示するためのユーザースタイルシートを作成してみました。

微調整として「アスキーアートを表示するための基本設定」のfont-familyを次の様に変更してあります。
・英語版Windows上での表示を意図してfont-familyに'MS PGothic'を追加。
・IPAMonaPGothicでは、一部の文字が上手く表示されない事があるためフォントの優先順位を変更。

通常のつぶやきも問題無く読めますのでお試しください。

Internet Explorer用(usercss_twitter_asciiart_ie.css ダウンロード

#timeline .entry-content,
.tweet .tweet-text{
	white-space: pre;
	word-wrap:break-word;
	font-family: 'MS Pゴシック','MS PGothic',IPAMonaPGothic,sans-serif;
	font-size  : 16px;
	line-height: 18px;
}

FireFox、Google Chrome、Opera、Safari用(usercss_twitter_asciiart_ie.css ダウンロード

#timeline .entry-content,
.tweet .tweet-text{
	white-space: pre-wrap;
	font-family: 'MS Pゴシック','MS PGothic',IPAMonaPGothic,sans-serif;
	font-size  : 16px;
	line-height: 18px;
}

これらのスタイルシートを、ブラウザのユーザースタイルシートとして設定する事でTwitter上でもアスキーアートを適した設定で表示できるようになります。

ユーザースタイルシート設定方法は、次のリンク先を参照して下さい。

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

更新履歴

  • 2011/01/31 新Twitter画面で改行を表示できるよう対応。

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

  1. 匿名 より:
      ____
      |
      | ロ
      |
      | ロ
      |____ 
     ヽ(´・ω・)ノ <うるせぇUSB端子
        |  /  ぶつけんぞ!
        UU
  2. 匿名 より:
    (V) ∧_∧(V) 
     ヽ(^ヮ^)ノ  <
      ノ ̄ゝ
  3. 匿名 より:
    ..::::::::::::::::::::
      ...::::::::::::::::
     . ......::::::::::::
        Λ_Λ...::::::
       /彡ミヽ )ー、::::
      /:ノ:ヽ \::|.:::
      /:/::  \ ヽ|.:::
     ̄(_ノ ̄ ̄ ̄\_ノ ̄ ̄

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