「ページをマトリックス風に表示するJavascript」にトラックバックをいただいた方がおもしろいJavascriptを作っていたのでご紹介。

» oitake blog

マウスオーバーするとなんと文字がブルブルします。

実際の動きや実装方法はそちらのブログを参照のこと。

ちょっとしたTipsがサイトに遊び心を与えてくれますね。

おもしろい技術ってブログなどを通してつながっていくものなのですね。他にも「こんなの作ったよ！」という方がいらっしゃれば是非コメントなりトラックバックなりをいただければと思います。

こんな絵葉書風なコメントフォームを見つけました。（絵葉書風に見えるのはあくまでも主観ですが・・・）

普通のフォームとは違いとてもシンプルだし、手紙を出すような感覚でコメントできる。（たぶん）

実現するにはフォームに以下のスタイルシートを適用するだけ。

<style type="text/css">
#hoge {
font-size: 10px;
background: white;
width: 165px;
margin:2px 0;
padding: 0;
border: 0;
border-bottom:1px solid #dddddd;
}
</style>
<input type="text" name="hoge" id="hoge" value=""/>

詳しくはdeliciousdays.comを参照のこと。

今ではすっかり懐かしくなった絵葉書。

こうした懐かしいインターフェースをあえて使ってみるのもいいかもですね。

Jack Slocum’s Blogでは、ブロックコメントという新しいコメント方法を実装している。

下のほうを見てもコメント欄は見当たらないが、左の黄色いクリップをクリックするとコメント欄が出てくる仕掛けである。

つまり、パラグラフごとにコメントできてしまうというわけ。

Yahoo! UI LibraryのDrag and Drop Utility Grid Componentを用いており、動きもサクサクで気分がいい。

自分で実装してみたい人はこのブログからダウンロードしたり、ドキュメントを参照することもできる。

ひとつのブログに何個もコメントしちゃいたくなりますね。

自分のブログを読んでもらったあとに何をしてもらいたいか？その答えはフッターリンクに用意しておくべきです。

もっと記事を読んで欲しかったら「最近の記事投稿一覧」や「関連する記事一覧」を置くとよいでしょう。

ではブログで仕事がもらいたい場合はどうでしょう？

最近は次のようなリンクをよく見るようになりました。

↑ 最近良く見るのはプロフィールをフッターリンクに置く手法

こうした手法はデザイナーやコンサルタントの人に多く使われているようです。記事を読んだ人が「これはいったい誰が書いているのだ？仕事頼めるかな？」と思う心理を先読みしているわけですね。

フッターリンクまでたどり着いた人は何かのアクションを起こす可能性が高いでしょう。あなただったら何を置きますか？

実装する方法がわからないのだけど、とにかくご紹介。

37signalsのブログ、Signal vs. Noiseのコメント欄はその記事を書いた投稿者のコメントだけをハイライトしてくれます。

↑ Jason Friedの記事。JF（Jason Fried）のコメントだけこのようになります。

ブログで議論がもりあがってくると全部のコメントを読むことがつらくなります。そういうときは全部のコメントを読むのではなくて、投稿者がそもそもどういうことを意味していたのかを知りたい場合が多いですよね（でもない？）。

そうしたときにこのテクニックは有効ですね。どなたかMovableTypeで実装する方法を教えてください・・・。

実装されている方もいらっしゃるかと思いますが・・・の小技。

トラックバックを打つときにはトラックバックURLをコピペして貼り付けることが必要ですが（Auto-Discoveryもありますが）、その際にコピーしやすいように細工しておきましょう。

このブログでもトラックバックURLをクリックするとそれが全選択されるようにしてあります。

↑ マウスクリックで一発選択。あとはコピーするだけ。

ちょっとしたことですが簡単なJavascriptを仕込むだけですのでよろしければどうぞ。

<input type="text" size="70" id="tb_url" value="http://www.simplexsimple.com/cgi-bin/mt/mt-tb.cgi/3" onClick="document.getElementById('tb_url').select();" />

追記:通りすがりさんよりコメントいただきました。this.select()でいけました・・・。ご指摘ありがとうございました！修正したコードは以下。IDは本当はいりませんが、なんとなく。

<input type="text" size="70" id="tb_url" value="http://www.simplexsimple.com/cgi-bin/mt/mt-tb.cgi/3" onClick="this.select();" />