■Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28　12：53　追記

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

• 公式サイトを開設しました。
• デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。
• 当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。
  • http://zamamin.org/labs/black-out

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

_________________ここから下は古い情報▼__________________________________________________

今、自分のブログをスクラッチしているので、こちらで。→2008/9/28　スクラッチ完了！BLACK-OUT.CSS公式ページ

作りました

【black-out.css】

2008.9.13　23：30　追記

• wmtg.netドメイン失効に伴い、zamamin.comに変更

2008.8.10　22：29　追記

• bookmarkletを作りました！！Firefox以外でも手軽にお試し頂けます。
  • 　http://anond.hatelabo.jp/20080810224028

当エントリは、下記の方におすすめの情報でございます。

1. Firefoxユーザーである（※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperaやsafariなどのブラウザでもすぐにお試しできます）
2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
3. （mixiをPCで使っている場合）右に出てくる鬱陶しいバナーにうんざりしていたり、日記とコミュにしか興味がない人。
4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
5. コンソール（CUI）が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
6. カラム、２カラムのレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
   • wikipediaも段組みやめてくれよサイドバーうざいよ、デフォルトの白背景色は目が痛いって思ってる人とか特に
7. リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
8. 背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットしまくりなんで目が疲れにくいのがいい人
9. サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！

と、強く考えておられる方むけの情報です。

何を作ったの？

私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。

だから2chのシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。

ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい

＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。

導入方法について

1. Firefoxのアドオン「stylish」をインストールします。→　https://addons.mozilla.org/ja/firefox/addon/2108
2. インストール後、stylishの管理画面を開きます。（Firefoxウィンドウの右下にあるメモ帳っぽいアイコンで右クリック→スタイルの管理）
3. 「スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
4. どんなサイトでも同じデザイン（コンソールのような画面）になります。なお、いつでもstylishdのメニューでcssの有効／無効は切り替えられますのでご安心を。
5. テストとして、wikipediaを見てみられると雰囲気が掴めると思います。

/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセス済みのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像はマウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch（暫定） */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}

既知の問題点というか仕様

• ごちゃごちゃしたサイトに出くわした時に、必要に応じて使う、というのを想定しています。どんな時でも使える万能cssではないです
• mixiの日記投稿のように、文字入力に関してはあまりメリットはないです。view専用のcssと考えられるとよいかと。
• windowsではメイリオの入っているvista機やxp機がおすすめです。macは、まぁとりあえずこのフォントでいいかなとテキトーにやっています（一応、macとwin両方で閲覧テスト済み）
• objectやembedタグのあるサイトでは、objectやembed部分が変になるかも。今後の課題。ニコ動だけ特別対応させています。
• リンクカラーがオレンジなのは映画イノセンスのオレンジ色の画面が好きだったから
• スタイルを何もかも破壊するのでfirebugもおかしくなります

update

• 2008.8.10 21:05
  • @namespaceを書いていなかったので追記。ありがとうございました。 -> http://pc11.2ch.net/test/read.cgi/software/1216790587/553

Permalink | 記事への反応(2) | 11:36

ツイートシェア