Webサイト

・The 5 Worst Website Designs in the World （Blog.SpoonGraphics）

　上のブログの記事で、デザインがイタいサイトを5つ挙げています。たしかにどれもこれも強烈です。あのポケモンの事件ですら比べ物にならないほど、ピカピカギラギラしています。

　「AHHHH!!! MY EYES! MY EYES!」なんて阿鼻叫喚なコメントが寄せられているのもよく分かります。

　でも、日本にはもっとすごいサイトがあります。

・愛生会病院

　その筋（どんな筋だ）では知らぬ者はいないと言われるほど、カルト的な人気を誇るサイトです。
信じられないだろ？病院の公式サイトなんだぜ、それ。

　でもいまだにこのサイトが病院サイトだって信じられないんですよね。初めて見たのは4、5年前。それから、やっぱりネタじゃないか？という疑念がずーっと晴れません。このページとか読むと、やっぱりちゃんとした病院サイトなんかなぁ、と思いつつ、一生懸命作った結果があのサイトって誰が得するんだろ？少なくともあれを見てあの病院に行こうと思う人間はいないよなぁ、一体何の目的で？と負のスパイラルに捕らわれそうです。
誠意って何かね？

　ウェブデザイン技能検定3級に合格しました！
　Web制作に関連する資格はいくつかありますが、国がやっているということで、ウェブデザイン技能検定を選んでみました。Web・ITに詳しいライターを名乗っている以上、3級くらいは取って当たり前でしょ、と強がって受けてみましたが、合格してホッとしました。

・ウェブデザイン技能検定　

　サイト上に、こーいう問題が出ますよ、と練習問題がアップされましたが、実際の問題はそれよりもはるかに難しかった。詐欺じゃーん、と言うくらいに実際の試験は難しく、練習問題をベースに勉強していた人はショックが大きかったんじゃないでしょうか。

　受かったから、ということでいうわけじゃないんだけど、Web業界歴3年以上の人は、2級から受けた方がいいと思う。3級レベルの実技は簡単過ぎて逆に迷う。

　たとえば、「このサイトのヘッダー部分の背景色を、IE、FF両方のブラウザーで見え方に差異が無いように、指定の色に変更しなさい。」なんて問題が出たけど、ちょっとWebに詳しい人だったら、「IEとFFで差異が無いように」ってところで「ん？」と考えてしまうかもしれない。

　実際、僕も悩んだ。
　IEとFFでは、「margin」「padding」の捉え方が微妙に異なるので、IEハックを使わなくてはいけないのか？なんて深読みしてしまい、marginとpaddingの設定をあーだこーだイジってしまった。先日、回答を見たら、CSSのbackground-colorを変えるだけでよかったらしいけど、それだけだと、IEとFFでは見え方が異なるはずだ。いいのかそれは？

　どのレベルまでコーディングをやればいいのか判断に迷うので、文章だけではなく、「XXを変更して図Xのような見え方にしなさい」と完成図を提示して欲しいと思った。

　学科の方は、html・CSS関連の設問が1/3くらいで、あとはWebに関して網羅的な知識が要求されていたように思う。僕はWeb業界歴が長いので、聞きかじった知識でなんとかなったけど、Web制作のことしか勉強してきていない人は難しく感じかもしれない。

 

＃肝心のウェブデザイン技能検定のサイトがダメダメってことは触れてはいけませんか？そうですか。
なんでもかんでもPDFで提供するのは勘弁して欲しい。Acrobat Readerが何個何個も起動するのは軽く殺意を抱きます。
手続きがWebからできないのも、なんだかなぁ、という気がしますよ。受験料の支払い控えを貼った出願表を郵送ってどんだけ時代錯誤やねんな。
合格した人に、サイトの制作をお願いすればいいんじゃないのー

　いまだに、VicunaとMT4の使い勝手に戸惑っているので、習得するためにデザインを一から作り直してみようと決意してみた。理想形としてはこーいうサイトを考えている。

　ただ土台となるCSSレイアウトは、色んなテンプレートが公開されているけど、僕の理想にはちょっと足りない。僕が欲しいのは、左図のような5カラムのレイアウトである。

　無いなら作ってしまおう、ということで作ってみた。

・DEMO

そのCSSとhtmlはこちらからダウンロードください。

・Download

　ちなみに、「side-top」と「side-bottom」はいくらでも置くことができます。<div id=”side-top”>、あるいは<div id=”side-bottom”>をそれぞれコピーして、既存のside-topやside-bottomの下に追加してください。

　逆に、「side-top」と「side-bottom」を使わないって人は、htmlからその箇所を削除してください。

　WindowsのIE6、IE7、Firefox2で確認はしましたが、何分、CSSに関しては素人もいいところなので、おかしい箇所があってもおかしくありません。気が付いたことがあればコメントでお教えください。

　

気が付けば2週間ほど更新が滞っていて、月日の経つのは早いものですな。
Movable Type 4（MT4）に移行し、デザインテンプレートの「Vicuna」を使ってみた。Vicunaはフリーで公開されているテンプレートで、MT4ならば Template Set Pluginを使って比較的簡単に適用できるのが魅力。

・Vicuna – Movable Type テンプレート

ちなみに、WordPress、Nucleus、Serene Bach、FC2にも同様のテンプレートが公開されている。やっぱり最大のメリットは、ある一箇所のタグを書き換えるだけで、1カラム、2カラム、3カラムと自由にレイアウトを変更できる点。

しかも、2カラムも、左右にメインコンテンツを入れ替えることができるし、3カラムも中央にメインコンテンツを持ってくることも、左にメインコンテンツ左にサブコンテンツを2つ並べることもできる（このブログもそのスタイルですな） 。

嬉しいことに、いくつかデザインテンプレート（Skinと呼んでいる）が公開されていて、それを差し替えるのもカンタン。スタイルシートやhtmlにあまり詳しくない人でも、好みのレイアウトやデザインに変更することができるのではないでしょうか。

もっともMTビギナーやhtmlを一度もイジったことが無い人でもカンタンに使えるか、というとそれは結構厳しそう。僕はMTは使い慣れているのでMT4＋Vicunaを使いますが、MTに触ったことがないという人なら、デザイン（こちらはThemesと呼んでます）の変更がむちゃくちゃカンタンなWordPressの方をオススメします。WordPress用のVicunaも公開されてますしね。

備忘録として、公式サイトではあまり触れられていないことをいくつか。

・sub-skinの適用

デフォルトのスキンセットである「ninja」には、sub skinという形で「Boomer」「Mono Crystal」という派生スキンが公開されています。これらsub skinを適用させるには、
（ここでは、すでに、ninjaが適用されていて、それをBoomerに差し替えたい場合を例にとって説明します）

1：スキンの配布ページから、「Boomer」をダウンロード
2：ダウンロードしたファイルを解凍すると、「1-subSkin.css」「2-singleUtilities.css」の2ファイルと「images」フォルダが出てくるはず
3：FTPでアクセスし、「/mt/mt-static/themes/style-ninja/subSkin/」にある、「1-subSkin.css」「2-singleUtilities.css」「imagesフォルダ」の上に、2で解凍されたファイルを全て上書きする。

でOKです。Boomerってスキン名なので他のスキン同様、

@import url(”<$MTStaticWebPath$>themes/style-Boomer/0-import.css”);

と入れてはみたけど適応されていない、なんて思いをしているのは僕だけではないはず。

Vicunaの雑感。
Vicunaのスキンをほぼそのまま使いたいって人はいいとして、Vicunaをベースにして色々とデザインをイジってみたいという人にはあまりオススメできないかも。

デザインの汎用性を持たせているので、とにかくコードが多い。分かりやすく分類はされているのですが、どこをどうイジったらサイトに反映されるのかがよむ分からない。僕も、FireFox＋Firebugが無かったら心が折れていたかも。

　ページ上部のメニューをちょっと変更してみた。ちなみに、デザインの参考にしたのは、「MITRABLOG」。WordPressのテーマとしても公開されているデザインなのだが無理矢理このブログに移植しようと試みた。ソースは一切見ずにキャプチャして画面データからレイアウトサイズや使われている色を割り出すという、レシピがあるにもかかわらずそれを見ずに分子構成からオリジナルの味を再現するような愚挙に走っているわけです。ほっとけ。

　しかし、ただ真似するだけでは芸が無いので、jQueryのプラグイン「Lava Lamp」を使って、無駄にリッチなメニューを付けてみようと画策してみた。この「Lava Lamp」、実際ののデモ画面を見ていただけると、一目瞭然なのだが、メニューにマウスカーソルを合わせると、ミュイーンとフォーカス部分が動くのである。一見、Flashのようにも見えるが、CSSとJavaScriptだけで行っている。

　実際に当ブログに入れてみると、ミュイーンと動きはするのだがクリックできない。クリックしても該当のページに移動できないので、全く見掛け倒しのメニューとなってしまった。というわけで、現在はJavaScriptは外して、Lava LampのCSSだけでメニューを構成している。

　あと既知の問題として、トップページと各記事のメニューは問題なく表示されるのだが、カテゴリー別ページや月別ページでは表示がずれる。ほんとCSSってめんどくさい。メニューだけTableで組んでしまおうか、なんてことも考えたくなる。

＃風邪を引いたらしく昨日から伏せっている。体の節々が痛くて、楽しみにしていた「ピューと吹く！ジャガー THE MOVIE」も見に行けず、冴えない連休となりそう。

Googleが提供するアクセス解析サービス「Google Analytics」のトラッキングコードが修正されていました。このトラッキングコードはアクセス解析したいページのhtmlに付け加えなくてはいけない文言です。（文言って言い方もヘンだけど）

ちなみにこのサイト、というかブログはMovable Typeで構築されていますが、こういう全ページに渡るような修正の場合、ほんと便利。これを1ページ1ページ修正しなくてはいけない、なんてことになると泣きそう。

フッターの部分を切り分けて、footaer.phpとしてモジュール化していますが、そこの部分に新しいコードを貼り付けて、再構築して終了です。ものの10分もかかりません。一応、その手順を書いておきますね。

（1）新しいトラッキングコードを取得する

（2）コピーした新しいトラッキングコードをMovable Typeの該当するテンプレートに貼り付ける

※追記（12月21日）

Googleアナリティクス ga.jsの新しいトラッキングコードへの移行は少し待ったほうが良い！？ （WEBマーケティングブログ）

新しいコードだと、アクセス解析の一部のデータが文字化けするようです。というか文字化けました。まだ解決していないようなので、お気をつけください。