2007-03

最近お気に入りのブログ、「となりのインテリア」。内容もそうですが、デザインがかなり素敵です。

そのブログのサイドバーに「アフィリエイト報酬の行方」という説明があります。この説明が好感度高いです。

ブログにアフィリエイト貼っていると「あさましい・・」と思われがちですが（そうでもないかな・・・）、こういう風にかわいく説明してもらうと「どうぞ、どうぞ」という気になりますね（と、僕は思います）。

↑ 「てまひま」ってとこがいいｗ。

このようにさりげなく人間味あふれるパーツを配置したいものですね。うまいなぁ、と思ったのでご紹介でした。

あと、おまけですがアクセス解析のところも吹いた。

↑ 懐かしい・・・。

「となりのインテリア」は以下よりどうぞ。すごく更新頻度が高いというわけでもないのでRSS登録がおすすめです。

» となりのインテリア ← Faviconかわいい。

「このページは見つかりませんでした」という404ページ。サーバーによっては工夫を凝らしたものがありますね。

今回ご紹介する404ページは「語りかけてくる404ページ」です。

» 404 File not found!

アニメーションでテキストが出てきて、いかにもチャットで話しかけられるように「ごめん、ページないや」と謝られます。

↑ テキストがタイプされるように現れます。

人によって受ける印象は違うでしょうが、ユニークな試みですね。いつこのチャットが終わるかわからないのでさりげなく広告とかちりばめてもいいかも。

なお、ユニークな404ページは以下のサイトが詳しいですね。よろしければどうぞ。

» 404 Research Lab

「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。

今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。

↑ ツリー構造のテーブルを実現。

↑ CSSでプログレスバー。

↑ CSSでちょっとかっこいいボタン。

↑ CSSでドロップシャドウかな。

世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。

» » 25 Code Snippets for Web Designers (Part2)

まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。

さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。

ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。

» 25 Code Snippets for Web Designers (Part1)

Part 1なので続編もありそうですね。続編が出たらまたお知らせします。

良いメニューは印象に残りますよね。

ということで今日はメニュー系のデザインをまとまた人の記事をご紹介。

» 8 web menus you just can’t miss

全部で8つありますね。個人的に気に入ったものをピックアップ。

↑ シンプルかつスタイリッシュ。

↑ ちょっとB-BOY風（謎）。

↑ ウルトラシンプル。悪くないですね・・・。

↑ Mac OS風。

↑ diggっぽい？

以上のデザインはこのサイトでダウンロードもできますよ（.rar形式なんでちょっとマニアックですが・・）。よろしければどうぞ。

» 8 web menus you just can’t miss

情報をきれいに配置するためのグリッドレイアウトは大事ですよね。その資料がいろいろまとまったサイトでちょっと便利そうな背景画像を紹介されていました。

» Web Page Layout Grid | Smiley Cat Web Design

テストの時にはこれを使うと便利かもですね。スタイルシート的にはこんな感じかな（ファイル名は適当に変えてくださいな）。

body {
  margin: 0;
  padding: 0;
  background:transparent url(/images/background-grid.gif) repeat 0 0;
}

↑ コードを書くとつっこまれやすいのでちょっと怖い・・・が、勉強だと思って晒しておきます。

これを配置しておけばちょっと新しいパーツを作りたいときに簡単にサイズの見当をつけられたりするかもですね。

グリッドレイアウト（グリッドシステムって言うのかな？）に関するほかの資料はこちらをどうぞ。

» Grid systems in Web Design

■ 追記（2007-03-08）

あきやんがこれのブックマークレットを作ってくれました・・・便利かも。素敵。よろしければどうぞ！http://www.akiyan.com/cgi/mt/mt-tb.cgi/330

» グリッドレイアウトブックマークレットを作りました : akiyan.com

ちょっと便利かも。

Javascriptからコメント行やら改行やらと取り除いてファイルサイズを圧縮してくれるツールです。ブラウザからコピペして使えます。

よくあるツールだと思いますが、こういうのはいろいろ知っておいて損はないので興味のある方はお試しください。自分で試してみて自分にあったものを使いたいですよね。

ちなみに実行例は以下。

実行前。

// is.js
// (c) 2001 Douglas Crockford
// 2001 June 3
// is
// The -is- object is used to identify the browser.  Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.
var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}

実行後。

var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}

何をどう省いているかもきちんと説明されているので安心して使えますね。ただ、元ファイルはメンテナンス用にきちんとバックアップしておきましょうね・・・。

» JS Minifier

テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。

細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。

» Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS

応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。

個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。

setTimeoutとかこう使うのねー、と読みときながら、これを元にいろいろなエフェクト作成にチャレンジしてみてはいかがでしょうか。

ニュースサイトTHE INDEPENDENTには日付ごとに記事を閲覧できる仕組みがついています。

「Day in a page」という検索フォームがあらゆるページに付いていて、どこからでも過去の記事を日付ごとにリストアップできます。

調べてみたところ、他のニュースサイトでこのような過去の記事へのアクセスを簡単にしてくれるものはありませんでした。

ちょっと昔の記事を見てみたいときに便利です。そもそも新聞サイトのような「いつそれが起きたのか」が重要なコンテンツにはこうした仕組みが大事ですね。

» THE INDEPENDENT

Press Escのブログはコメントの表示にオプションが付けられてちょっとうれしい。

• 表示方法　－スレッド状orフラット
• 表示する順番　－新しい順or古い順
• 1ページに表示できるコメント数

など選択できます。

しかも”Save settings”とある通り、クッキーかなんかに保存して次回訪れたときもその設定が反映されるみたいです。

今はなぜか機能していませんが、人それぞれの設定で見え方が変わるブログというのも新しいですね。

» Press Esc