カスタマイズ: 2006年10月アーカイブ

サイドメニューを折りたたみ形式に変えたかったので、いろんな方法を探してみましたが、prototype.jsを実装していることもあって簡単にできないものかと思い。試してみたら実行できましたので紹介します。

トップページにて最近のコメント・トラックバックを表示していますが、それほど重要性がまだないようなので、非表示にすることにしました。クリックの頻度が薄いコンテンツを折りたたみ表示にすることでトップページを少しすっきりさせることができます。

前回のHighslide JS-サムネール画像を拡大表示するスマートなjavascriptを紹介したエントリーで記述していたように、Movable Type（ムーバルタイプ）の埋め込み画像（ファイルのアップロード）作業にてHighslide JS用のアトリビュートを追加するようにカスタマイズできましたので紹介しておきます

このカスタマイズをすることでMovable Type（ムーバルタイプ）で簡単にHighslide JSを使えるようになります。

今回このカスタマイズでmixiにてヒントをくださいました。ナカヤマ様・きりり様この場を借りてお礼申しあげます。ありがとうございました。

サムネールをクリックすると同一ウィンドウ上に画像を表示するというjavascriptでLightbox JS・Lightbox が有名かと思います。以前からあまりスマートではないと思っていたら、スマートにしたタイプのHighslide JSが公開されていましたので紹介します。

Highslide JS-サムネールをクリックすると同一ウィンドウ上に画像を表示します。サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。とってもスマートです。Lightbox JSよりも若干ストレスなく画像表示できます。

Highslide JS - JavaScript thumbnail viewer

http://vikjavev.no/highslide/

• IE 4.0・Netscape 4.79には対応していませんが、その他の最新ブラウザには対応しています。

• 拡大された画像の下にキャプションをいれることも可能です。

• 拡大画像の外枠の指定も4パターンの中から好きなパターンを選べます。

• JavaScriptがオフの場合は、そのままイメージ画像が拡大表示されます。

• 拡大された画像をドラッグドロップで好きな位置に移動できます。

Highslide JS実装サンプル

実際に実装してみるとこんな感じになります。

Movable Type（ムーバルタイプ）でトラックバックURLを簡単に取得できるようにする方法と各個別エントリーのテキストリンクを簡単に取得できるようにする方法の紹介です。

S i M P L E * S i M P L Eさんのブログで紹介されていたて小技（トラックバックがしやすくなる小技 | S i M P L E * S i M P L E:）がかなり使えるものでしたので、情報の受け流しになりますが紹介しておきます。

この小技、FirefoxならびにIEで試してみましたが、簡単にリンク選択ができるので便利です。テキストエリアに表示されている内容がワンクリックで簡単に選択できるという小技です。URLをコピーするための選択の手間が省けます。

Movable Type Compare Plugin(プラグイン)を使って投稿者のコメントだけをハイライトにする方法の紹介です。

百式の管理人さんが運営している他のブログでコメント欄を読みやすくする方法 | S i M P L E * S i M P L Eより

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

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

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

確かにコメントが多数寄せられるサイトには、いいアイデアだと思いました。

私もコメントしていただける方の情報というのは、自分のエントリーした内容に＋αの要素を与えてくれる場合が多いと考える方なので、自分のコメントと差別化（メリハリをつけたい）したいなんて思い、同じMovableTypeなので今後のことも考えて「投稿者のコメントだけをハイライトにする方法」素人ながらいろいろと考えて、探してみました。行き着いた方法は、Compare Plugin for Movable Typeを使って実装することで可能という一つの答えが見つかりました。