ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。
その他には、コメントやコメント周りや…
Continue reading
タグ: WebDesign
[投票企画]ブログの記事タイトルと同じ場所に表示してほしいのは？
トップページにしろ、個別記事のページにしろ、記事のタイトルは（ほぼ）必ず表示されます。よくこの記事タイトルの下に投稿日やカテゴリに、タグ、コメント数、投稿者、等が表示されるように一般的になっています。でも、あまり表示しすぎるとかえってごちゃごちゃと見にくい事になります。どうするのが一番良いのかな、と思っていましたが、せっかくなのでAutomatticが先日買収したPollDaddy.comを使用して投票企画を行ってみようと思います。
CSS Nite in Ginza (vol.27)へ行ってきた感想
久しぶりに（1年半くらいかな）CSS Niteへ行ってきました。運良く都合が合ったと事ももちろんありますが、今回予定されていたプレゼンセッションにとても興味を持ったからです。相変わらずの下手な文章ですが、感想・思った点を書いてみます。
WinXP+IE6ではアウト
やっぱり、WinXP+IE6では駄目でした。僕はIEの事を頭に置きながら、Firefoxで作成して、後でIEに対応、というスタイルです。でも今回は久しぶりと言うこともあって、IE対応なんてほったらかしでカスタマイズしてたら案の定です。でもまぁ、透過PNGを解決したら大体OKかも。
と言うことで、買ったけど未設定の無線ルーターを、無線アクセスポイントとして使うべくひっぱり出してきました。 これにWinXPのノートPCを無線で繋いで、IE検証しつつ、VistaのデスクトップPCで修正させます。
タグが英語か日本語か
今まで特に何も考えずに英語で（アルファベットで）タグ付けをしてきました。一応英語メイン、または多言語のブログだったと言う事もある。それにもしもの時は英語のほうが解決しやすいんとちゃう？、が理由です。しか～し、日本語をメインとするとした以上、これからはタグも日本語のほうが良いんでしょうか？一応マルチバイト文字を使用しても、WP的には問題なさそうだし。
たとえば、「WordPress」 タグは「WordPress」か「ワードプレス」か？
もしくは、「WordPress」と「ワードプレス」の両方をタグ付けするのが良いのか？
それともやはり、サーチエンジンで検索されるかもしれない方でタグ付けすべきか？
たとえば、「川越」を検索する人のほとんどが「川越」と入力して検索すると思います。「Kawagoe」と検索する人はほとんど無いかと。反対に、「WordPress」は、「WordPress」と検索する人もいれば、「ワードプレス」と検索する人も結構いるのでは？
何か最適な法則は無いもんでしょうかねぇ。
日本語のみに別のCSS設定をする
今のデザインは、記事部分のフォント・サイズ（font-size）を14pxに。行の高さ（line-height）を1.4emに設定してあります。英文だとこれで全然問題ないのですが、やはり日本語だと行間がキツイです。そこで、記事内の日本語のみ少し大きめのline-heightを設定してみました。
TrueTypeフォント パーフェクトコレクションによれば、欧文の行間（レディング）はフォント・サイズの２０％くらいでOKだそうですが、和文の場合は５０％、もしくは７５％くらいが適切だそうです。ちなみに、組版用語では、５０％を「二分アキ」、７５％を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。
そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。
Litebox と Lightbox
以前、巷で評判のLightboxを入れていました。WordPressの場合、Lightboxの導入を簡単にしてくれるプラグインが幾つか有ります。見た目も格好よくて、まさに今風って感じなのですが、大きな問題点が１つ。読み込むjavascriptのファイルが大きい、つまり、サイトが重くなる事。更に、プラグインを使用するとどのページであろうと、所かまわず読み込みます。Aboutだろうが、Archivesだろうが・・・。
これらの理由で一時的にLightboxをはずしてました。でもやっぱり入れたいなぁと思ったので、プラグインを使用せずにLightbox JS v2.0を入れようと四苦八苦。上手くいったところで、MasayanさんはLiteboxに入れなおした事を発見。おおっ、そういう手があったのか、とこちらに乗り換え。Lightboxの時と全く同じ問題に直面しましたが、問題解決。Lightboxのトータル・ファイル・サイズ、110kbから、Liteboxの30.6kbへとスリムになった。
以下は、LightboxとLiteboxの両方で手こずった点。
IE７はDoubled Float-Margin Bugが修正されているのとIEハック
今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。
このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。
解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。
Waviaei Design ver.2
IE対策でちょっとてこずりましたが、なんとか完成。以前のデザインは「0.5くらい」って言ってましたが、あれはもうver.1にします（笑）。それで今回は「Waviaei Design ver.2」とします。一応サブタイトルは「Midori」。そのまんまやんけっ！、と突っ込まれてもおかしくないくらい、なんのひねりもありません。
今回のデザイン、レイアウト、そして色に関するインスピレーションのネタなどを少し書いてみようと思います。
リ・デザイ・・・ン？
Waviaeiのデザインをまた変えました。今回も全て一から作ったんですが、ゴメンナサイ。IEのチェックが甘かったです。IEは、最近入れたIE7betaでチェックすると問題なかったので、IE6だとPNGだけを入れ替えるとOKなんじゃないかと思ってた。でもサイトのトップやでっかいフッタの部分の「ブロック」が１つずれる。原因がいまいちわかりません。Widthのトータルを親divのwidthよりも少なくしても変わらない。う～ん。
早急に原因を解明して直します。また、良い機会なのでIE7でも使えるCSSのブラウザ振り分けとハックを実践してみようかと。
WaviaeiへのアクセスはIEとFirefoxが同じくらいですが、わずかの差でIEがトップ。以外にも（失礼！）Safariからのアクセスも結構あります。でもMac持っていないので、Safariでもおかしかったら教えてください。
CSSよりもHTMLの方が大事
CSS does not make a site accessible. CSS does not make your site rank higher in search engines. Good CSS does not make you an elite web programmer. I don’t code CSS. CSS is misunderstood.
訳すと、「CSSはサイトをアクセシブルにはしない。CSSはサイトをサーチエンジンに最適化しない。良いCSSが書けても、優れたウェブ・プログラマにはなれない。私はCSSのコーディングはしない。CSSは誤解されている。」
題名の「ＣＳＳに価値は無い」と共にセンセーショナルな見出しと始まりですが、要するにCSSよりもHTMLの方が重要だと Mike Stenhouse 氏は書いてます。CSSを用いるのは、セマンティックなHTMLを書いているから。そのセマンティックなHTMLの見た目を整える為にCSSを用いている。
ふと思った。世界一のインターネット環境が整っている日本。でもなかなかテーブルレイアウトを抜け出せない事も含め、セマンティックな方向に進まない。セマンティック・ウェブの可能性を自ら閉じているようにおもえるのだが・・・。世界一に環境がもったいない。
（セマンティック・ウェブについてはメタ情報とセマンティック・ウェブが詳しいです。）
言語選択の表示に国旗は使うな（パート２）
（・・・パート１から続く）
ではどのようにするのが一番よいのか？
Technique 15: Using hreflang with CSS のやり方が W3C で書かれています。しかし先日、と言っても１ヶ月ほど前ですが、456 Berea Street に書かれた Indicating language choice: flags, text, both, neither? （言語選択の表示： 旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。