※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で改行を表示する方法のまとめ
- Twitterで入力した改行を表示する方法 : 概要
- Twitterで入力した改行を表示する方法 : Internet Explorer ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 : Firefox ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 : Google Chrome ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 : Safari ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 : Opera ユーザースタイルシート編
- Twitterで入力した改行を表示する方法 : ブックマークレット編
- Twitterでアスキーアートを表示する方法
- TwitAAの使い方(New!! 2011/1/30)
更新履歴
- 2011/01/31 新Twitter画面で改行を表示できるよう対応。
コメント / トラックバック308件