ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。
その他には、コメントやコメント周りや…
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? （言語選択の表示： 旗、テキスト、両方、別の方法？）と言う記事の方が面白い。コメントも沢山書かれていて、読んでいてすごく興味深いので、ちょっとそちらの方をまとめてみます。
言語選択の表示に国旗は使うな（パート１）
ブログなどでもよく国旗を言語選択の表示に使うとをよく見かけます。しかしこれは「Authoring Techniques for XHTML & HTML Internationalization: Specifying the language of content 1.0」： Technique 16: Don’t use flags to indicate languages でも書かれている通り、良い方法では有りません。理由は Technique 16 のディスカッションに書かれている説明が非常にわかりやすいです。
Flags represent countries, not languages. There are many countries that use the same language, and numerous countries that have more than one official language.
（国旗は国を表す旗であり、言語を表す物ではない。同じ言語を使用する国は数多く有り、また１つ以上の言語を公用語として定めている国も数多くある。）
Throw tables out the window … not in Japan
This recent research into the company websites of those listed in the Nikkei 225 index of the Tokyo Stock Exchange, has shown that 68.9%(155 out of 255) still uses table layout. Those with CSS layout are only 12.4% (28 out of 255). A hybrid of table and CSS layout are 14.2% (32 out of 255). A rather dissapointing 4.4% (10 out of 255) are Flash only.
More than 50% of the sites are constructedin HTML4.01 transitional, less than 10% are XHTML1.0 strict or transitional. 79.1% do not specify the DTDs. 51.6% of the site uses flash in some way, and 6.2% uses frames.
(The percentage figures are taken from the attached pdf file.)
This does not mean that the rest of the company and corporations in Japan are also uses table layout. Also, in most cases the websites are developed by the developers and creators outside, ie as a client.
Its been nearly two years since Douglas Bowman wrote an article “Throwing Tables Out the Window”. Together with past research into the website layouts of prefectural concils, major city councils, governmental, and portal sites in Japan, looks like the table layout is still the way to go in Japan.
ウェブサイトの国際化、ローカル化、多言語
ウェブサイトの国際化、ローカル化、多言語に興味が有ります。とは言うものの、これらに関して１つも記事を書いていませんでした。とりあえず、まずは言葉の定義を簡単にまとめて整理。
- Internationalization（国際化）
- Internationalization（インターナショナライゼーション）は国際化と言う意味。i18Nと略されることもある。i18nとは、ウェブサイト、アプリケーション、ドキュメント、等々のプロダクツをローカル化しやすい用に設計、デザインする事。
- Localization（ローカル化）
- Localization（ローカライゼーション）はローカル化、つまりその国や地域に合わせて表示言語等を変更する事。l10nとも略される。
- Monolingual（モノリンガル）
- Monolingual（モノリンガル）とは１つの言語で構成されていること。
- Multilingual（マルチリンガル）
- Multilingual（マルチリンガル）とは１つ以上の言語で構成されていること。２つの言語を意味するbilingual（バイリンガル）もマルチリンガルに入る。
i18nとl10nは似ているように思えるが、意味は明確に違う。i18nは大きな枠組みで、方向性のようなもの。l10nがそのプロセス。i18nの中にl10nがあると考えたら良い。i18nはウェブ制作よりも以前からソフトウェア開発でよく使われていた概念のようですね。
l10nはモノリンガルなサイトだ。サイト全体がその国、もしくは地域に考慮して、言語やデザインなどを変えている。
高槻市ウェブサイトに見る、行政ウェブサイトの評価のされ方
今朝の朝日新聞の朝刊。地域（大阪）の面に写真付きでこんな見出しが出ていた。
高槻市ＨＰが特選に
全国広報コンクール
職員ブログ「発信の姿勢」評価
同ＨＰは０４年に入選しており、今回は総務大臣賞（なんで総務大臣なんですかね）に輝いた。審査会は、市民や職員によるブログを「市役所みんな、市民みんなで情報発信していく姿勢がうかがえる」、地図情報や天気のリンクを「使われ。見られる情報に向けた試行錯誤が感じられる」と評価。（朝日新聞より一部抜粋）
そこでチェックしてみました：–Takatsuki City 高槻市–。ＣＳＳでは無くテーブルレイアウトです。フォント等にもほとんどＣＳＳは使われていません。W3C Markup Validatorでエラーが無ければ良いと言うわけではないのですが、エラーが出る箇所が li が ul に囲まれていないと言うのが気になる。ＨＴＭＬタグがすべて大文字なのも。文字を大きくする方法の説明にNNとOperaが有るのになんでFirefox無いん？ 「–Takatsuki City 高槻市–」がtitleに記述されていますが、日本語を先にすべきでは？
以前、益子貴寛さんが「都道府県の脱テーブル状況」を調べられ、おさんぽさんぽさんも県庁所在地及び政令指定都市のWebサイト脱テーブル状況を調べられましたが、高槻市もまだまだ脱テーブルレイアウトができていないですね。ちなもに受賞したほかの行政サイトもすべてテーブルレイアウト。
じゃあなぜ総務大臣賞を受賞したんだ？