AZ::Blog

AZ::blog Home >> Archive by category 'WebDesign'
24
Nov
2008

抹茶入りAZ::Blog

  

抹茶のお菓子
坂田 阿希子
¥ 1,470 / 家の光協会
( 2008-05 )
通常24時間以内に発送

ブログのデザインを、ブラック系に変えてみました。
モニタの消費電力もすこし減るし、環境にもやさしいAZ::blogです(あとづけの説明)。
色味もあずき色のほかに、抹茶風味をプラス。
抹茶の渋緑色が、ちょうど小豆色と補色の関係にあるんです。

18
Nov
2008

AMAZ君EXプラグイン

  

合衆国再生―大いなる希望を抱いて
バラク・オバマ
¥ 1,995 / ダイヤモンド社
( 2007-12-14 )
通常24時間以内に発送

上のような、アマゾンの本とかDVDのリンク。
asin番号と簡単なタグを打ち込むことで、自動的に生成される仕組み。
以前から自前で作ってるんですが、今回がんばってWordpressのプラグインにしてみました。

3
Oct
2008

デザインを少し変更

  

Light is delight

記事もだいぶ溜まってきたので、デザインを少し改造。
でかいフッターをつけて、そこにカテゴリーやカレンダーなど、ブログ内リンクを設置、と。

10
Sep
2008

jQueryで遊んでみる

  

TagCloudブログをちょこっと改造中。

jQueryという、ウェブデザインをする人たちには超有名な、javascriptのライブラリを使って遊んでいます。

表紙ページで、フォト蔵の写真、タグクラウド、メールなどが、レイヤーで浮かぶようにしてみました。
shadowboxという、jQueryのプラグインを利用。

28
Jun
2008

フォントのすすめ

  

このごろ、ネットで長い文章を読むのが、苦でなくなりました。好きになったといってもいいくらい。
なんでかなと考えるうち、フォントのせいだと気づいた。

去年(07年)の終わりくらいから、UbuntuをメインのOSに使ってますが、Ubuのフォントはかなり綺麗。
マックのがきれいなのは昔から有名だけど、Ubuのデフォルトのフォントもなかなか。
ことにアルファベットは多種多様に美しい。
日本語フォントも、種類は少ないものの、悪くないんです。

でも、「きれい」ということより、可読性というのか、読みやすさがグンと上がった。
多読速読、バリバリ文章を読み倒すのに向いています。

文字の縁のギザギザの処理の仕方が、ちょっとちがう書体。

じつは、Windowsでも、同じようなもの、使えます。
クリアタイプと呼ばれてるもの。Vistaではデフォルトですが、XPでも使用可能。
前にも少し書いたけど、またまたフォントのすすめ。

XPの場合、「メイリオ」と「IPAフォント」(あるいは「IPAモナー」)をインストール、
あとは、クリアタイプの設定をちょこっとすればよいです。
(ちなみに、Windows2000にメイリオを入れると、かなり無残な結果になるらしいですw)
もちろん、Ubuntuを使うという手もある。(ほんとはそれが一番おすすめ☆)

どんだけ綺麗になるか、以下にスクリーンショットのリンクを。
「IPA P ゴシック」「IPA P 明朝」「メイリオ」。
サンプルにつかったのは、青空文庫 「国枝史郎 神秘昆虫館」
明朝が美麗です。

Screenshot-国枝史郎 神秘昆虫館 - IPA モナー P ゴシック
IPA モナー P ゴシック

Screenshot-国枝史郎 神秘昆虫館 - IPA モナー P 明朝
IPA モナー P 明朝

Screenshot-国枝史郎 神秘昆虫館 - メイリオ
メイリオ

英語も見ときますと。
(サンプルページは、ニューヨーク・タイムズ。Op-Ed Columnist - Paul Krugman - Fuels on the Hill - Op-Ed - NYTimes.com
フォントは、「Georgia」かな。どのOSにもデフォルトで入ってますが、IE6ではキレイに表示されんはず。

Screenshot-Op-Ed Columnist - Paul Krugman - Fuels on the Hill - Op-Ed - NYTimes
NYTimes

美しい。
長文を読みたくなります。

格差はつくられた―保守派がアメリカを支配し続けるための呆れた戦略


ポール・クルーグマン
¥ 1,995 / 早川書房
( 2008-06 )
通常24時間以内に発送

興味深いのは、昔からパソコンを使っている理系の人たちには、クリアタイプ系のフォント、かならずしも評判が良くないらしいこと。
「ぼやんとぼやけすぎ」って印象なんだそうです。

ここで、ひとつの憶測。
プログラミングをやってきた人は、このフォントを好まない傾向があるのかもしれない。
慣れということもあるのですが、もっと大きいのは、プログラミングの場合、一字一字の見誤りが致命的であること。
だから、少々ギザついていようが、くっきりはっきり形を認識できる書体がいい。

一方、大量に文章を読む場合。
一字一字の単位では見てなくて、少なくとも一単語…実際には、数文節を一度に視野に入れて、読んでいる。
視界に捉える文章が大きいほど、速読の度合いが増していきます。
くっきりはっきりじゃなくて、何となくぼやんと掴み取る。
プログラマとは、全然、書体に対する無意識の要求がちがうわけです。
いわば、木を見て森を見ないのと、森を見て木を見ないのと、二通りのタイプがあるってこと。

高速で標識を読み落としやすい人と、そうじゃない人ってのも、このへんと関係することかもしれません。
標識を読み落とす人は、逆に、「サービスエリアのマークを絵に描いて再現する」といったことでは、読み落とさない人より長けているのでは、と予想。どうなんだろう。

12
Jun
2008

CSSコーナーナビ

  

ブラウザのウィンドウの四隅にカーソルをもっていくと、
ナビゲーション(他ページへのリンク)が表示される
…という仕掛けを設置してみました。

新ブログの目玉機能。
名づけて、CSSコーナーナビ。
まだ記事が少ないんで、リンク先があまりないんだけどw

コーナーナビ

なお、IE6では表示されませんヽ(´ー`)ノ
FirefoxSafariOperaIE7では、ちゃんと使えるのにな。
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ユーザの数がいまだいちばん多いという事実。
政治とか市場とかでも、この原理によって、「最悪」が多数によって選択…されてなければいいのだけれど)