2008-08-10

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

2008.9.28 12:53 追記



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


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





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




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

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

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

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

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

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

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

何を作ったの?

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

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

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

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

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

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

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

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

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

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

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

@(参考用)私のよく見るサイト・・・ニコ動wikipediaスラッシュドットジャパン、2nn.jp2ch)、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,'MS Pゴシック',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;
}




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



update

トラックバック - http://anond.hatelabo.jp/20080810113624

記事への反応(ブックマークコメント)