ブログのデザインを、ブラック系に変えてみました。
モニタの消費電力もすこし減るし、環境にもやさしいAZ::blogです(あとづけの説明)。
色味もあずき色のほかに、抹茶風味をプラス。
抹茶の渋緑色が、ちょうど小豆色と補色の関係にあるんです。
上のような、アマゾンの本とかDVDのリンク。
asin番号と簡単なタグを打ち込むことで、自動的に生成される仕組み。
以前から自前で作ってるんですが、今回がんばってWordpressのプラグインにしてみました。
jQueryという、ウェブデザインをする人たちには超有名な、javascriptのライブラリを使って遊んでいます。
表紙ページで、フォト蔵の写真、タグクラウド、メールなどが、レイヤーで浮かぶようにしてみました。
shadowboxという、jQueryのプラグインを利用。
このごろ、ネットで長い文章を読むのが、苦でなくなりました。好きになったといってもいいくらい。
なんでかなと考えるうち、フォントのせいだと気づいた。
去年(07年)の終わりくらいから、UbuntuをメインのOSに使ってますが、Ubuのフォントはかなり綺麗。
マックのがきれいなのは昔から有名だけど、Ubuのデフォルトのフォントもなかなか。
ことにアルファベットは多種多様に美しい。
日本語フォントも、種類は少ないものの、悪くないんです。
でも、「きれい」ということより、可読性というのか、読みやすさがグンと上がった。
多読速読、バリバリ文章を読み倒すのに向いています。
文字の縁のギザギザの処理の仕方が、ちょっとちがう書体。
じつは、Windowsでも、同じようなもの、使えます。
クリアタイプと呼ばれてるもの。Vistaではデフォルトですが、XPでも使用可能。
前にも少し書いたけど、またまたフォントのすすめ。
XPの場合、「メイリオ」と「IPAフォント」(あるいは「IPAモナー」)をインストール、
あとは、クリアタイプの設定をちょこっとすればよいです。
(ちなみに、Windows2000にメイリオを入れると、かなり無残な結果になるらしいですw)
もちろん、Ubuntuを使うという手もある。(ほんとはそれが一番おすすめ☆)
どんだけ綺麗になるか、以下にスクリーンショットのリンクを。
「IPA P ゴシック」「IPA P 明朝」「メイリオ」。
サンプルにつかったのは、青空文庫 「国枝史郎 神秘昆虫館」。
明朝が美麗です。
英語も見ときますと。
(サンプルページは、ニューヨーク・タイムズ。Op-Ed Columnist - Paul Krugman - Fuels on the Hill - Op-Ed - NYTimes.com)
フォントは、「Georgia」かな。どのOSにもデフォルトで入ってますが、IE6ではキレイに表示されんはず。
美しい。
長文を読みたくなります。
興味深いのは、昔からパソコンを使っている理系の人たちには、クリアタイプ系のフォント、かならずしも評判が良くないらしいこと。
「ぼやんとぼやけすぎ」って印象なんだそうです。
ここで、ひとつの憶測。
プログラミングをやってきた人は、このフォントを好まない傾向があるのかもしれない。
慣れということもあるのですが、もっと大きいのは、プログラミングの場合、一字一字の見誤りが致命的であること。
だから、少々ギザついていようが、くっきりはっきり形を認識できる書体がいい。
一方、大量に文章を読む場合。
一字一字の単位では見てなくて、少なくとも一単語…実際には、数文節を一度に視野に入れて、読んでいる。
視界に捉える文章が大きいほど、速読の度合いが増していきます。
くっきりはっきりじゃなくて、何となくぼやんと掴み取る。
プログラマとは、全然、書体に対する無意識の要求がちがうわけです。
いわば、木を見て森を見ないのと、森を見て木を見ないのと、二通りのタイプがあるってこと。
高速で標識を読み落としやすい人と、そうじゃない人ってのも、このへんと関係することかもしれません。
標識を読み落とす人は、逆に、「サービスエリアのマークを絵に描いて再現する」といったことでは、読み落とさない人より長けているのでは、と予想。どうなんだろう。
ブラウザのウィンドウの四隅にカーソルをもっていくと、
ナビゲーション(他ページへのリンク)が表示される
…という仕掛けを設置してみました。
新ブログの目玉機能。
名づけて、CSSコーナーナビ。
まだ記事が少ないんで、リンク先があまりないんだけどw
なお、IE6では表示されませんヽ(´ー`)ノ
Firefox、Safari、Opera、IE7では、ちゃんと使えるのにな。
IE6だけが、だけが、だけが。。
opacityというCSSのプロパティを使ってます。
透明度を指定するやつ。(IE7では、filter:alpha)
通常は透明度100%で見えなくなってて、マウスを持ってくると、hoverで透明度が0になる仕組み。
「position:fixed」にして、画面の四隅に配置し、透明度の設定をするだけ。かんたん。
長い記事で下の方にスクロールしてても、ちゃんと四隅にナビが現れます。
IE6でもやろうとするなら、透明度を使うのではなく(hoverの時にうまくいかないみたい)、
配置のleftやらrightやらtopやらbottomやらの数値を、
hoverの時に変化させるようにすればいいじゃないですかね。
バックグラウンド画像もちょっと余白のあるのにして。余白はgifかpng8の透明を使うのもあり。
そうすれば、opacityというやや怪しげな機能を使わず、Validateもパスできるし。
(まだ他にもやり口はありそう。)
…と、わかってるなら、やれよw
でも、たしか「position:fixed」にも、IE6だけ罠があるんです。もー。面倒くさいっす。
結局、CSSハックするのが、手っ取り早いのかなあ。。
(と、この記事は、IE6ユーザを、他のブラウザへ誘導する意図をひそかに隠し持っていますw
ブログのデザインで、IE6だけが、いつもいつもヘンになって、泣きそうでした。ちょっと怒ってますから。
そして、こんなにいっぱいブラウザの選択肢があるというのに、IE6ユーザの数がいまだいちばん多いという事実。
政治とか市場とかでも、この原理によって、「最悪」が多数によって選択…されてなければいいのだけれど)










