「Helvetica」を含む日記 RSS

はてなキーワード: Helveticaとは

2024-03-25

UDデジタル教科書体のバリエーション

Windows10 以降のWindowsに標準搭載されるようになった「UDデジタル教科書体」というフォントがある。游ゴシックに並んで書体が美しいフォントで、そこらへんのチラシや張り紙などで濫用されているのをよく目にするだろう。

だがUDデジタル教科書体はバリアントが6種類もあって、それぞれがどんなフォントなのかわかりにくい。Wordバリエーションを選ぼうとすると、一覧にはこんな風に並ぶ。

 

UD デジタル 教科書体 N-B

UD デジタル 教科書体 NK-B

UD デジタル 教科書体 NK-R

UD デジタル 教科書NP-B

UD デジタル 教科書NP-R

UD デジタル 教科書体 N-R

 

フォント名を単純に昇順で並べただけで、バリアント順になっていない。これでは何がなんだかわからないので整理してみよう。

書体和文欧文ウエイト
UD デジタル 教科書体 N-R等幅等幅標準
UD デジタル 教科書体 N-B等幅等幅太字
UD デジタル 教科書NP-R等幅プロポーショナル標準
UD デジタル 教科書NP-B等幅プロポーショナル太字
UD デジタル 教科書体 NK-Rプロポーショナルプロポーショナル標準
UD デジタル 教科書体 NK-Bプロポーショナルプロポーショナル太字

バリアントは

和文/欧文)×(等幅/プロポーショナル)×(ウエイト

という順列組み合わせになっていることがわかる。

どれを選べばいい?

基本的には「NP-R/B一択

日本語の文面は等幅フォントが読みやすく、英文英単語プロポーショナルフォントが読みやすいからだ(メイリオ游ゴシックなどもこの組み合わせである)。その組み合わせの NP ひとつオールマイティにいける。

なお、和文に強いてプロポーショナルフォントを使う場面はなく、せいぜい見出しタイトルなどの短いセンテンスや、UI部品メニューなどスペースが限られる用途などに限定して使うべきだろう。

また、英語等幅フォントも同様で、桁が揃っていないと見にくい表の数値や、プログラムのコードくらいしか一般的には使い道がない。

まり「N」や「NK」の出番はほとんどないのである。(誤字訂正しました。指摘サンクス

繰り返します。UDデジタル教科書体は NP-R/B 一択です。

(余談)増田フォント

ちなみに、はてな匿名ダイアリーWindows環境で閲覧すると、本文の表示には「Meiryo UI」が使われています。この書体OSUI用に作られた省スペースフォントで、文字幅を強く圧縮した独特の形状をしていますファイル名やメニュー項目を表示するには省スペースで重宝ですが、ブログの本文などの長文を表示するような用途にはまったく適していません。ごちゃごちゃと詰まっていてとても読みにくいです。こんなもの普通は読みものコンテンツの最優先フォントに使ったりはしません。

なぜこんなことになっているのか、スタイルシートを読み解いてみましょう。

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", sans-serif;

まず先頭に "system-ui" という総称フォントが書かれているのが噴飯ものです。

総称フォントとは「指定された固有フォントひとつも見つからなかった時に最後の手段として代替できるような一般名」のことで、本来フェイルセーフとして font-family 値の末尾に書き添えますブラウザ総称フォントに対しては必ず何らかのフォントを割り当てていますから、どう転んでも何かのフォントは見つかり、最低限の表示が保証されるわけです。

ところがそれを先頭に書いたりしたら一発でフォントが見つかって、それ以降のフォント指定は読み飛ばされてしまます。system-ui の後ろのカンマ以降の情報実質的にただのゴミです。書く意味がありません。

なぜこんなスカタンフォント指定になっているか、だいたいの想像はつきます

system-ui, -apple-system, BlinkMacSystemFont

このフォント指定は、MacOS付属の「San Francisco」という粋なフォントを呼び出す裏技として一部で流行していた方法なのです。すごく使いたかったんでしょうね、San Francisco を……。

しかMacOS以外のOSでも、system-ui にはそのOS固有のフォントが割り当てられていますWindows場合は長文の表示にまったく適さなMeiryo UI だった、というわけです。

どっちみち San Francisco記事内の半角英数記号くらいにしか使われませんが、Windows和文表示をすべて台無しにしてでもそうしたい何か強い理由があったんでしょうか。私には合理的理由は思い当たりませんが。

2022-12-04

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

Hatelabo::AnonymousDiary

2021-04-01

吉田vs増田

吉田吉田吉田吉田吉田吉田吉田増田吉田吉田吉田吉田吉田吉田吉田増田吉田

さて、増 田は何個?

これ編集中に増田吉田になるってことは、フォントいじってんのか。

font-family: "JustKidding",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Noto Sans JP",sans-serif

だとよ。

2020-11-19

フォント指定にArialと書くな 頼むから

ArialはHelvetica劣化コピーで表示はガタガタ、読みづらい。

そもそも日本語サイトでArialやらHelvetica指定するな。

数字とそれ以外の太さがバラバラになって大変に醜い。

頼むからfont-family: sans-serif とだけ書いておいてユーザー選択権を渡してくれ。

おいGoogle、おいはてなブックマーク、お前らのことだよ!

2020-03-17

anond:20200317104040

まえ

-apple-system-font,
Helvetica,
Arial,
"ヒラギノ角ゴ Pro W3",
Hiragino Kaku Gothic Pro,
sans-serif

いま

system-ui,
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
'Hiragino Sans',
'Hiragino Kaku Gothic Pro',
'ヒラギノ角ゴ Pro W3',
'Noto Sans JP',
sans-serif

2018-12-02

10大すごい欧文フォント

10大すごい欧文フォントって何だろう。

Helvetica

・Times

Futura

・Garamond

・Arial

くらいしか思い浮かばない。

2016-09-10

ドラえもん のび太はてな漂流

う゛ぇ~~~~ん,ドラえもーーーん!

どうしたんだい,のび太君?またジャイアンに虐められたの?

違うよ,そんなんじゃないよ.これ見てよ,僕の渾身の記事にせっかくブクマが付いたのに,「小学生が書いてんのか?」「大脳が壊れたメンヘル」「プリントアウトして病院へ」って叩かれるんだよ~

どんな記事書いたの?

「僕がおすすめする読まないと人生損する漫画ベスト3!!!」

若干煽り気味だけど(小学生のくせに何言ってんだ),そこまで悪くないんじゃない?何で叩かれたの?

コメント見てると,1位「ワンピース」が気に入らないみたい.でもそんなのおかしいよ.

僕が今一番大好きな漫画だし,好きな人も多いはずだよ?

う~ん,まあ,有名だし,みんな知ってるからねえ.みんな自分が知らない新しい情報が知りたいんだよ..

なんだよ,こいつら!僕が善意で教えてあげてるのに!叩きやがって

しかも君の記事見てると,漫画画像勝手うpしているじゃないか著作権違法で怒られるよ..

大丈夫だよ,僕小学生だし

え・・(なんだこいつ)

それより,ドラえもん!新しいネタを考えたいからさ,誰にも邪魔されないような道具貸してよ

また?いい加減やめればいいのに..ブログより楽しいこと,もっといっぱいあるよ?

嫌だ嫌だ!田舎暮らしながらブログを書いて,ブログ収入で静ちゃんを幸せにするんだ!

また現実味のない夢みたいなことを..(聞き分けがないなあ)

しょうがないなあ,はい つ「石 こ ろ 帽 子 」

サンキュードラえもん

ガチャッ のび太―,お使い行って・・,あらドラちゃんしかいないの?じゃあいいわ.

にししし,ママ気づいてないみたい.じゃあ僕は裏山行ってくるね.

―― 空き地

あ,スネ夫ジャイアン野球してる.

二人には見つかってないね,よかった.

スネ夫の奴,今日はなんなんだよ「ボクちゃんのブログは3人用~」だなんて!

共同執筆なんてもっとできるだろうに.僕のブログ馬鹿にして!思い出しただけで腹が立つ!

大体,金かけて気取ってるんだよなあ,

独自ドメインがあって,wordpress自作テンプレートを作ってもらって,

フォントは,webフォント用のHelveticaモリサワフォントだなんて..そんなの勝てるわけないじゃないか

いいんだ!僕には無料Google Noto Sans があるからいいんだ!スネ夫ブログなんてロード容量重くしてPVが減ればいいんだ.

僕は,記事の内容の質でスネ夫ブログなんて打ち負かしてやる!

あ,静ちゃんが向こうから歩いてくる

シャーーーーーーーーーーーーーーー

おーい!静ちゃn 

ガン!

え?

車に轢かれた!?

やばい!石ころ帽子を被ってたんだ..

誰か助け―― グシャ

――22世紀

??「――! あれ?」

??「突然,有名ブログ記事だけでなく,ブログ自体が消えた,どういうこと?ログすら残ってない..こんなことって..」

カチッ

??「大変!はてなが中身のない記事ばかりで溢れてる!このままではいつも以上に荒れ続けるわ!

??「わたしの好きなブロガーさん..も消えているわ,まずは彼のところへ行ってみましょう. id:nobinobi さんのところへ――」

予告:

監督細田守

主題歌ゆず

主題歌が流れながら)

ここがネットの海さ..のび太君(ホモボイス)

へぇ~,ネット世界って白いのね

互助会共和国

ボクちゃんのブログがやっぱりナンバーワン!

パンチカードってなんだ?うまいのか?

??「ジャイアンさんの歌声フーリエ解析してその周波数成分を取り出せば,あるいは..」

伝説増田..さん?

奴は『RAID0』にいる..!(ホモボイス)

ドラえもんの処理が重すぎる?なら,ぼくが並列処理を書くよ!

大脳が壊れたメンヘル共め,スターはくれてやる,だがこの世界は私の記事だけでいいのだ!(運昇ボイス)

ぼくたちがネットの秩序を取り戻すんだ!

互助会が正しいか間違っているかなんて,僕には...わからないよ..

――のび太君,君は本当にこの世界必要だと思うかい?(ホモボイス)

ドラえもん のび太はてな漂流記』

ネットの海で一人死んじゃうなんて寂しぎるよドラえもぉーーーーーーーーーーーーん!!!!!

20XX年8月 公開予定

今前売り券を買うと,カラースターキーホルダーが貰えるよ!(※色は選べません)

2016-04-08

東京オリンピックエンブレム

Bがいちばんマシだと思う。

Aの市松模様とDの朝顔はコンセプトがよく分からない。

市松模様デザインを見る外国人は、なぜチェック模様なのか困惑するだけだろう。

朝顔日本東京とどう関係があるのか日本人ですらよく分からない。

特にD朝顔デザインはゴチャゴチャして無駄に複雑すぎる。

このようなデザインは小さな商品プリントすると潰れて見えるし、低品質な紙媒体印刷するとインクが滲んだりするかもしれない。

スポンサー商品や様々なメディアで広く使われることがあまり考慮されていないようにみえる。


Cは北京オリンピックエンブレムを複雑にした劣化バージョンみたい。

赤とか緑とか原色の色使いがハレーションを起こしそう。

白黒で印刷した時に濃淡で色を区別できにくそうな配色。

文字の縦横の大きさやカーニングマヌケ感が気になる。

TOKYO2020はHelveticaなのにParalympicGamesの文字は別の斜体フォントを使ってるチグハグ感にも納得行かない。

とにかく個人的にCはパッと見てすべてダサい


というわけで、Bも少し複雑だしグラデーションが余計な要素だが消去法でBを選んだ。

これらの候補を並べてみると、佐野研二郎デザインはかなり考え抜いた秀逸なデザインだったことが分かる。

2015-09-02

佐野研二郎先生罵倒してるネットの屑どもへ

いい加減腹立ったので書いておく。

内部資料用に拾ってきた画像使って何が悪い

内部資料だぜ?

それを勝手クライアントであるノーパンしゃぶしゃぶ武藤が外に出したのであって、佐野先生は内輪で使うためにあれを用意したに過ぎないわけ。

お前らだってツイッターアイコン適当に拾ってきた画像だろ。

コピーライトを削った?

それがどうしたんだよ。お前らが使ってるそのどこかで拾ってきたアニメ調の壁紙画像検索にかけてみろよ。コピーライトなんか余裕で削ってるぜ? みんなやってんだよそれくらい。画像まとめサイト壁紙配布サイト管理人がやってることを、日本トップデザイナーであり年収5億を誇る佐野先生東京五輪エンブレム選定という世界規模の大仕事プレゼンでやっちゃいけないのかよ。なんだその差別

拾ってきた画像使って何が悪い

大体、アート世界ではネット画像を拾ってくるっていうのはごく普通ことなわけ。

例えば若手の一流アーティストであるカオスラウンジ

海外のド素人が作ったキメこなを、東浩紀先生も絶賛する梅沢先生アート昇華させたわけで、ありがとうございますと涙を流して感激するならともかくパクリパクリって頭どうかしてる。

画像は使います!使います!それ以上のコミュニケーションはないです。

ネットにある画像フラットから全部使う。使うことにごめんねはない。

ネットにある画像サンプリングしていきます

その結果として体力のないコミュニティが潰れてもしょうがない。

ネットにあるものは全部僕らの素材ですからそれ掠めとって芸術作品として世に出しますよ。

黒瀬陽平カオスラウンジ宣言』UStream内の発言より)

梅沢先生はなぜか「自分コピペでやりくりしてるから」とか卑屈なこと言ってて、黒瀬先生ノーコメントなのが残念だけれど、藤城先生佐野先生の全面擁護を展開、ネット民は今すぐ首吊って死ねツイートされていて本当に心強い。

アーティストってのはインターネット上の素材を自由に使い、編集する権利を持ってるわけ。どうもそれを理解してないゴミどもが多くて困る。

そもそもド素人パクリパクリうるせぇんだよカス

構図が似てたらパクリとかアホか。

んなこと言ったらArialはHelveticaパクリか?

FAIRYTAILワンピースパクリか?

コンプライアンスマルドゥック・スクランブル外伝パクリか?

ArialなんかaだけでHelveticaとの違いが一発で分かるし、FAIRYTAIL作家名を見れば一発で違うと分かるし、コンプライアンス漫画であって小説じゃないから一発で違うと分かる。

永井先生もおっしゃっているとおり、教養もない大衆にはコンセプトの違いが理解できないんだろう。お前ら大衆ブルーヌードを見て「なんだこれオランピアパクリじゃねぇか!」と喚き立てるわけだろ? あのコンセプトの違いが見て分からないとかほんと残念な目をしてんな。

しか迷惑メールを送りつけるとか、恥を知れよ。

佐野先生はもう十分社会的制裁を受けてるだろうが。

迷惑メールなんぞフィルタ自動削除だろとか考えてんのか?

メッセサンオー事件被害者のことを考えれば鼻糞未満の被害だろうがとか考えてんだろう。人間として最低だなお前ら。

さら佐野先生が公開した写真ネット上に晒すとか。

佐野先生が公開した写真を断りもなく、その引用元も明記せずに勝手によそで晒し、配布するっていうのは非常識しか言い様がない異常な行為で、まともな人間のやることじゃない。

あれは佐野先生著作物だろうが!

佐野先生許可とれよ屑どもが!

フリー素材じゃねぇんだぞ!

ツイッター2ch佐野先生の悪口が連日書かれている状況とか、まさに「人間として耐えられない限界状況」だと思う。カオスラウンジ黒瀬先生は何も気にすること無く今日美術学校講師としても活躍していらっしゃるし、鳩山元首相とか元気ハツラツとしてツヤツヤしていらっしゃるけど、ネット炎上が人を確実に死に追いやる行為だということをお前らは自覚した方がいい。

お前らのやってることはまさに現代魔女狩りなんだよ。

魔女他人の作ったもの剽窃して金と名誉社会的地位を荒稼ぎしていたことが露呈したからといって、狩っていいって話にはならねぇだろ。正義ヅラしやがって。正義の反対は悪ではなくまた別の正義なんだよ。魔女正義理解しろよ。金のない貧乏人が僻んでんじゃねぇ。

加えて家族への攻撃とかほんと論外。嫁はミスターデザイン広報担当トートバッグの件は部下に責任があり悪いのは全て部下です佐野関係ありません悪いことは全て部下がやりましたと言っただけで今回の問題とは無関係な全くの善人であることは明白だろうが。

だいたい、お前ら佐野先生自殺したらどう責任をとる気なの?

お前らだってSTAP事件の笹井先生のことを毎日思い出しては「やり過ぎてしまった、人の命は地球より重いのになんてことをしてしまったんだ」と悔やんでるだろ? それをまた繰り返したいのか?

集団で個人を叩いて面白いか? どうせお前らは集団で叩かれた側の人間だろうが。いじめダメだって習わなかったか? 不正手段で金と地位名誉を少々得たからって、それはいじめる理由にならねぇだろうが。とはいっても先生財産は半端ねぇし、なんぼでもやっていけるだけのコネも持ってるし、お前らがギャーギャー喚いたって痛くも痒くもねぇけどな。東電社長清水さんとかあれだけお前らが槍玉に上げたけど、結局今でもバリバリ現役だからな。慶応評議員にも立候補したし。

佐野先生よりもっと悪い奴がいるはずだって意見がある。それは一面的には分かる。でもそれじゃ佐野先生も悪いみたいじゃないか。佐野先生は悪くない。コピーライトを削って100万ぽっちを稼ぎ、五輪エンブレムデザイナーとしての地位を得ようとしたこと、それは業界の闇と陰謀によって佐野先生がやらざるをえなくなってしまったことだというのは誰が見ても一目瞭然で、佐野先生は完全に被害者なんだ。9/1付けで写真権利者が佐野先生からコンタクトがないことを明かしたけど、その程度の不手際を責めるのは明らかに不当だと思う。佐野先生のところは担当者がいつも不在なくらい多忙なんだよ。お前ら家に引きこもってるニートとは違うんだよ。

私は佐野先生全面的に支持します。

2014-11-20

スライドの作り方のコツ

http://zemilog.com/article/intelligible_design_for_presentation

これ見たんだけど、「絶対に抑えたい5つのコツ」とかいいながらスライドを見せてるけど、

最後スライドが見やすいのはそれらのコツが全く関係ないということに

コレ書いてる人も気づいてないのか?

1. フォントを選ぶ

に関して言えば余程変なフォントを選ばない限り変わらない。まあ、無難Helveticaとか使っとけ、っていう程度なら分かるけど、大概デフォルトで良い。

余計な事して変なのを選ぶからおかしくなるだけ。

2. 行間をとる

これもデフォルトテーマでOk。コツもクソもない。

3. 余白をとる

まあ、ぎちぎちまで書くのはどうかと思うが「十分な余白」ってどれくらい?スライドが全部映らない様な

ところならそもそもまともにスライド見れないのでどうでもいい。

4. 揃えて、グループ化する

物によるとしか特に左のはタイトルページじゃないのか?読みにくいのは最後に書くけど変な所で区切ってるからってだけ。

右のも変なところにそんな線入ってたら邪魔しか言い様がない

5. コントラストをつける

てかタイトルの方は最初から文字の大きさとか色々違うじゃん。。。

後、その薄い青は会場によっちゃ見えない、少なくとも見づらい。

スライドの端まで書くのはやめよう、とかよりよっぽど重要だろ。。。

で、最後スライドは確かにそれまでのに比べてちょっとやすいけど、

それは上の5つのこつは全く関係なく、単に文章区切りの良い所で改行してるから、に過ぎない

右の方なんてリスト内の改行後には先頭を揃えるとかまでしてるし。




なんなんだろう?名前入った資料から自分で作ったんだろうけど、

それともここに載せた人はまた別の人でその人が勘違い

世の中のコンサルとかこういう適当なのが多いんだろうな。。。だから結局同じ様に言われたことをやっても何も上手くいかないとか。

本人すら何が良かったのか理解してないんだから、そりゃそうだよな。。。

2014-02-14

http://anond.hatelabo.jp/20140214110006

Helveticaだけでデザインしていいんだったら2000円でもArial(あり得る)が。

2008-08-27

変な名前の会社は多分損してる

ぶっちゃけ、社名で絶対こことは仕事したくねーって会社がある。

偉そうとか、損してるのはおまえだとか言われそうだけど、生理的に受け付けない名前ってのがあるのよ。

仕事を選べる立場にある人、つまり能力の高い人は、とくにそうだと思う。

極論、変な名前の会社には、仕事を選べない能力の低い人が集まることになると思うのよ。

だから無難で口に出して恥ずかしくない名前つけときゃいいのよ。

とりあえず、Helveticaつかっときゃいいやみたいな感じで。

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

 
ログイン ユーザー登録
ようこそ ゲスト さん