小粋空間  -  a cheap joke and a play on words site

公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「公開テンプレートにフッタを追加する」でご質問を頂きましたので本エントリーにて紹介致します。スクリーンショットは固定レイアウトにフッタを追加した完成例です（フッタ部分のみ切り取って表示させています）。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

１．固定レイアウトの場合

１．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素（終了タグ）の間に青色で示したフッタを挿入します。

　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
　　　　　　：

１．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-two-column-left #footer,
.layout-two-column-right #footer {
    margin: 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、

.layout-two-column-left #box
.layout-two-column-left #content
.layout-two-column-right #box
.layout-two-column-right #content

で検索しましょう。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

またレイアウトによって下記も同様に修正してください。

左サイドバーの場合

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

右サイドバーの場合

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

２．リキッドレイアウトの場合

当サイトで公開しているリキッドレイアウトは左右カラムを absolute（絶対値）指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

２．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素（終了タグ）と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

左サイドバーの場合

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<br class="clear" />
　　　　　　：

右サイドバーの場合

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　：

２．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer {
    margin: 15px 0 0;
    padding: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

１．はじめに

１．１ 当サイトのテンプレートをご利用の場合

プラグインは当サイトで配布しているテーマ（3カラム版）のデフォルト状態に適用可能な形で配布しています。インストールしてプラグインを有効にするだけで「Recent Comments」「Recent Trackbacks」「Categories」の各メニューリストがツリー化されます。

１．２ 他のテンプレートをご利用の場合

「ツリー化プラグイン」を利用する場合、メニューリストのマークアップで下記のように青色のタグが利用されている必要があります。

<ul>
  <li><h2>Recent Comments</h2>
     <ul><?php get_recently_commented(); ?></ul>
  </li>
  <li><h2>Recent Trackbacks</h2>
     <ul><?php get_recently_trackbacked(); ?></ul>
  </li>
 
    :
 
</ul>

また、このプラグインはメニューリストタイトルをキーにして、ツリー対象のメニューリストを検索するため、５項の内容にしたがって、スクリプトに埋め込むメニューリストタイトルを修正する必要があります。

CSS はプラグインに同梱されている tree-maker.css を適宜変更してください。

２．プラグインのダウンロード

下記のいずれかのリンクをクリックし、プラグインアーカイブをダウンロードしてください。

tree-maker.zip / tree-maker.lzh

2007.02.27 初版 2007.05.11 プラグインパス取得方法変更

３．プラグインのアップロード

ダウンロードしたアーカイブを解凍し、tree-maker フォルダごと、wp-content/plugins 配下にアップロードしてください。アップロード後、下記のようなディレクトリ・ファイル構成になっていればOKです。

wp-content/
　　　plugins/
　　　　　tree-maker/
　　　　　　　　maketree.js
　　　　　　　　tree_end.gif
　　　　　　　　tree_lst.gif
　　　　　　　　treehandler.js
　　　　　　　　tree-maker.css
　　　　　　　　tree-maker.php

４．プラグインを有効にする

WordPress の管理画面より「Tree Maker」の有効化のリンクをクリックします。

５．カスタマイズ

treehandler.js を任意のエディタで開き、ツリー化したいメニューを記述します。カッコ内にはメニューリストのタイトルをそのまま記述してください。
デフォルトでは下記の設定、つまりメニューリストタイトルが「Recent Comments」「Recent Trackbacks」「Categories」となっているものに対してツリー化するようになっています。

function treeMaker() {
  tree('Recent Comments');
  tree('Recent Trackbacks');
  tree('Categories');
}

またメニュータイトルを日本語にしている場合は、下記のように日本語のタイトルと英語の名称（適当でいいです）してください。

function treeMaker() {
  tree('最近のコメント', 'comment');
  tree('最近のトラックバック', 'trackback');
  tree('カテゴリー', 'category');
}

６．ツリー表示変更

デフォルト状態では冒頭のスクリーンショットのように、2階層目のリストからツリー表示する設定にしています。
これを左のように、1階層目からツリー表示にしたい場合は、tree-maker.css を任意のエディタで開き、コメントアウトしている下半分の

#sidebar .tree li,
#links-left .tree li,
#links-right .tree li {
    padding: 0 0 0 16px;
    background: url(tree_lst.gif) no-repeat 5px 0em;
}
 
#sidebar li li.end,
#links-left li li.end,
#links-right li li.end {
    background-image: url(tree_end.gif);
}

を有効にして、上半分の設定をコメントアウトするか削除してください。

７．ツリー表示変更

ツリー画像を変更したい場合は、プラグインディレクトリにある、tree_lst.gif / tree_end.gif をそれぞれ入れ替えてください。

はてなブックマークの「人気エントリー」や「注目エントリー」を Ajax + Perl を利用して、スクリーンショットのように「記事タイトル+被ブックマーク数」のフォーマットでブログ等に表示させるカスタマイズです。

他のサイトで同じようなリストを見かけたのですが、そのようなインタフェースあるいはツールを探し出せなかったので、自作しました（すでに同じものが提供されていたらお恥ずかしい限りですが）。

単に一覧を表示するのであれば、RSS + feed2JS でも可能ですが、被ブックマーク数まで表示することができないため、はてなブックマークで表示される HTML ファイルを Ajax + Perl で取得し、JavaScript で加工しています。
きめ細かいエラー処理等実装していないので、動作に不具合がございましたらご連絡ください。

なお、ここで紹介するカスタマイズは、アクセス毎に CGI が起動されます。サーバのパフォーマンスを考慮した、HTML ファイルを周期的に取得し、それを Ajax で取得する方法につきましては別エントリーで紹介する予定です（お分かりになる方はスクリプトを適宜修正してください）。

１．アーカイブのダウンロード

下記のいずれかのリンクからスクリプト一式をダウンロードしてください。

hatenabookmark.zip

hatenabookmark.lzh

ダウンロードしたアーカイブを解凍してください。中には下記のファイルが含まれています。

ajax-loader.gif（ローディング画像）

hatenabookmark.js（Ajax 起動スクリプト）

hatenabookmark.cgi（HTML 取得スクリプト）

上記の他、Ajax ライブラリの prototype.js が必要です。

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js はブログの任意のディレクトリにアップロードしてください。

２．HTML の修正

script 要素を、リストを表示させたい HTML（あるいはテンプレート）の </head> の直前に設定します。

<script type="text/javascript" src="http://user-domain/prototype.js"></script>
<script type="text/javascript" src="http://user-domain/hatenabookmark.js"></script>

赤色の user-domain は、それぞれのファイルをアップロードした URL を設定してください。

次に、リストを表示したい位置に下記のタグを設定してください。

<div id="hatena"></div>
<script type="text/javascript">
//<![CDATA[
getHatenaBookmark('[人気エントリー/注目エントリーのURL]', '[表示数]', 'hatena');
//]]>
</script>

[人気エントリーまたは注目エントリーのURL] は、下記の手順で取得・設定してください。

1. はてなブックマークのトップページへジャンプ
2. 右上にあるテキストエリアに表示したいサイト（のトップページ）のURLを入力し、ラジオボタンで「URL」を選択して「検索」をクリック
3. 次ページでブラウザに表示された URL をコピー
4. コピーした URL を上記の [人気エントリー/注目エントリーのURL] に設定

エントリーリストからトップページを外したい場合は、検索する時にアーカイブページのURLまで指定すればうまく取得できます。Movable Type を利用している当サイトの場合、

http://www.koikikukan.com/archives/

としています（Movable Type であれば一律可能という訳ではなく、管理画面でアーカイブパスを設定していればこのような取得が可能です）。

[表示数] は表示したい記事数です。HTMLから取得するので最大50件です。

３．Perl スクリプトのアップロード

hatenabookmark.cgi をサーバの任意のディレクトリにアップロードしてください。アップロード後、ファイルのパーミッションを 755 等に変更してください（値はご利用のサーバによって異なりますのでご確認ください）。

４．JavaScript 外部ファイルの修正

hatenabookmark.js を任意のエディタで開き、下記の user-domain を、先程アップロードした hatenabookmark.cgi の URL になるよう、修正してください。

// CGI の URL
var cgiURL = 'http://user-domain/hatenabookmark.cgi';

以下はオプションです（変更は動作確認後の方が良いでしょう）。

// リストに用いるタグ
var htnHeader = '<dl>';
var htnTitle = '<dt>最近の人気エントリー<\/dt>';
var htnListHeader = '<dd>';
var htnListFooter = '<\/dd>';
var htnFooter = '<\/dl>';
  
// ブックマーク数を括る span タグに付与する class 属性値
var htnListClassName = 'hatenaCount';
 
// 記事タイトルから削除したい文字列
var deleteChar = '';
 
// ローディング画像
var htnImage = 'ajax-loader.gif';

生成するリストのデフォルトマークアップは下記のようになっています。上記の「リストに用いるタグ」を変更する際の参考にしてください。

<dl>
<dt>[htnTitle]の内容</dt>
<dd><a href="...">記事タイトル1</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数1</span></a></dd>
<dd><a href="...">記事タイトル2</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数2</span></a></dd>
　　　　　　：
<dd><a href="...">記事タイトル3</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数3</span></a></dd>
</dl>

[記事タイトルから削除したい文字列] は、サイト名等を記事タイトルから削除したい場合に用います。

hatenabookmark.js の修正が終わったら、サーバにアップロードしてください。

５．ローディング画像のアップロード

ajax-loader.gif を hatenabookmark.js と同じディレクトリにアップロードしてください。異なるディレクトリにアップロードした場合は、hatenabookmark.js の、

// ローディング画像
var htnImage = 'ajax-loader.gif';

の赤色部分に ajax-loader.gif を含む URL を入力してください。

６．CSS 追加

下記のようなスタイルを追加すれば、被ブックマーク数部分がいい感じになります。

.hatenaCount a:link,
.hatenaCount a:visited {
    font-size: 10px;
    font-weight: bold;
    color: #ff0000;
    background-color: #ffcccc;
}

公式サイトでは被ブックマーク数によって与えるタグを振り分けてますが、このカスタマイズでは今のところそこまで凝っていません。

６．その他

以下覚え書きです。

Ajax で取得した HTML ファイルは一旦ページに読み込まれ、Opera9 で表示すると HTML ページが一瞬表示されてしまう場合があります。気になる場合はローディング画像の代わりに、display プロパティで加工が終わるまで非表示にした方がいいかもしれません。

また、読み込まれた HTML は img 要素の src 属性をもとに画像ファイルを取得を試みます。この HTML の src 属性はドキュメントルートで記述されているため、Firebug の Net で確認すると取得エラーが表示されてしまいます。
そのため Perl での取得後、故意に他の属性名に変更しています。

2006.02.26 追記
文中およびリストのファイル名に誤りがありましたので修正しました。

アフィリエイトで利用していた Fujisan.co.jp から「デジタル雑誌ストアがオープンしました」というメールが届きました。試しにちょっと触ってみたところ、かなり高機能で好印象でしたのでご紹介したいと思います。
左のスクリーンショットはデジタル雑誌を読むツール「Fujisan Reader」。クリックすると拡大します。

CNET Japan：Fujisan.co.jpが「デジタル雑誌ストア」を正式オープン--R25もデジタルに

富士山マガジンサービス運営の「Fujisan.co.jp」が提供するデジタル雑誌「Fujisan Digital」は、表紙から最後のページまで、雑誌を丸ごとデジタル化して、紙媒体とまったく同様の内容で販売。23日から、Fujisan.co.jpで取り扱う「ニューズウィーク日本版」などの一般誌や「R25」などのフリーペーパーを含む全28誌が、その発行日に合わせ、デジタル版でも購読可能となる。

定期購読者には、今後、発売日に自分のPCに最新号が到着することになり、読者は、雑誌を買い忘れなく入手し、バックナンバーなどを物理的なスペースを取ることなく保存・管理できるようになるとしている。

「Fujisan Reader」はスペースキーを押すだけで自動的にページを送ってくれます。ページをめくる時の表示も実際になかなかいい感じです。

デジタルならではの機能も盛りだくさんで、まず音声サービス機能があります。青色のアイコンが数秒点滅するので、それをクリックします。

黄色のマーカーで好きなところをマーキングできます。マーキングを消すには同じ位置でクリックします。付箋紙機能もあり、付箋はリサイズや折りたたみもできます。うまくキャプチャできず、お見せできないのが非常に残念です。

当然検索も可能です。検索結果は画面右側にページ毎の一覧が表示され、一覧から選択してダブルクリックするとこのように該当箇所を反転表示します。

上記のサンプル「Mainichi Weekly」は見本誌で、無料で購入できますので、以下、見本誌を利用したデジタル雑誌の購入から雑誌の購読までを、一連の流れで説明します。

Fujisan.co.jp トップページ上にある「デジタル雑誌」をクリック。

ここでは「Mainichi Weekly（毎日ウィークリー）」の「見本誌あり」をクリック。

次のページで「ショッピングカートに入れる」をクリック。

次のページで「レジに進む」をクリック。見本誌なので無料です。

「はじめての方はこちら」の「個人の方はこちらから」または「法人の方はこちらから」をクリック（ここでは「個人の方はこちらから」をクリック）。その後、配送先・マイページ情報（メールアドレス・パスワード・氏名・生年月日・性別）を登録します。

次のページで再び「レジに進む」をクリック。

次のページで先程登録したメールアドレスとパスワードを入力して、「確認して次に進む」をクリック。

ここで配送先が表示されます（デジタル雑誌なので実際には配送されませんが）ので、確認して「次に進む」をクリック。

次のページで「注文を確定する」をクリック。

次のページで完了画面に進み、この完了画面で、デジタル雑誌を閲覧するための「Fujisan Reader」をインストールを確認されます。まだインストールしていない場合は「いいえ、インストールされていません」をクリックしてください。

次のページで「ダウンロード」をクリック。あとはダウンロードしたファイルをダブルクリックしてインストールを実行します。

インストールが終わったらご自身がご利用になっているメールソフトを開いてください。事前登録したメールアドレスに先程注文した見本誌のメールが届いているはずです。

メールに書かれているとおり、ここで新着を確認します。[スタート]-[プログラム]-[Fujisan Digital]-[新着を確認]を選択してください。

これで下のような新着確認画面が開き、注文した雑誌のダウンロードが始まります。なお画面にはありませんが、見本の雑誌がすでにひとつ入っています。

ダウンロード完了画面で「はい」をクリック。

これで冒頭の Fujisan Reader 画面が開きます。

昨年夏に発売された書籍で、読み終えてかなり日が経ちましたが、久しぶりの書籍紹介ということで。

検索エンジンがとびっきりの客を連れてきた! 中小企業のWeb2.0革命 佐々木 俊尚 ソフトバンククリエイティブ 2006-08-01 売り上げランキング : 23860 Amazonで詳しく見る by G-Tools

以前「グーグル―Google 既存のビジネスを破壊する」で二つの事例が掲載されていましたが、この本はその事例のみを集めた内容になっています。
個人的にはこのようなドキュメンタリーが好きみたいで、読み応えがありました。

以下、各章のタイトルおよびサブタイトルに、そこで紹介されているサイトのリンクをつけて挙げておきます。

アイデアを駆使する！

• 老舗・鯖寿司の挑戦 … 鯖寿司・萩
• 日本のアートの底力 … 筆文字なび
• パソコン関連のサポートを一手に … パソコン教室 ウォンツ！

戦略を組み立てる！

• 伝統ある金庫店のモデルチェンジ … ひめじや
• 屋形船、電網界を泳ぐ … 屋形船 船清
• モノと情報の流通を読むセンス … 福岡倉庫

顧客層を広げる！

• 客のニーズに応じる弁当 … お弁当配達 萌黄亭
• 伝統の味をネット通販で全国に … 民宿・大原の里
• 注文の絶えない江戸切子 … 江戸切子の店 華硝

どの企業・店舗も、当時の苦境とキーワード広告による見事な躍進の対比が鮮やかに描かれています。

FC2ブログのサイドバーに表示しているコメントリストのリンクをクリックした時、各エントリーの先頭にジャンプするのではなく、該当コメント位置に直接ジャンプさせる方法について数名の方からご質問を頂きましたので、本エントリーにて紹介致します。

１．文書の特定位置へジャンプさせる方法

ご存知の方も多いと思いますが、文書の特定の場所へのリンクは、

• リンク元：URL + # [fragment]
• リンク先：（該当 URLの） id 属性

というフォーマットにしたがって記述します。[fragment] の部分には id 属性値と等しい文字列を指定します。

今回のカスタマイズでは、コメントリスト（リンク元）・エントリーページのコメントリスト（リンク先）に上記フォーマットを適用します。
具体的には、下記リストのように青色部分を追加します。これで該当のコメントに直接ジャンプできるようになります。

コメントリスト（リンク元）

<a href="http://hogehoge.blogxx.fc2.com/blog-entry-1.html#c1">コメント</a>

エントリーページ（blog-entry-1.html）のコメントリスト（リンク先）

<div class="comment" id="c1">
　　　　　　　：
　　　（コメント本文）
　　　　　　　：
</div>

上記のリンク先は div 要素に id 属性を与えていますが、当サイトのテンプレートを例に使っているだけですので、div 要素でなくても構いません。

この id 属性ですが、以前はリンク先に、

<a name="c1">文字列</a>

というタグを記述していたかもしれませんが、XHTML では id 属性による名前付けをすることでリンク先として指定できるようになっています。
厳密に言えば、

• XHTML1.0：互換性を考慮して a 要素に id 属性と name 属性の併記が可能
• XHTML1.1：a 要素の name 属性による名前付けは廃止

となっています。

また、id 属性は a 要素以外でも付与可能ですので、無理に a 要素を作る必要はなくなります。ただし id 属性値はページ内で一意の名称になるように気をつけてください。

２．実例

当サイトで配布している FC2 ブログテンプレートからの抜粋です。
青色部分が先に述べた文書の特定の場所へリンクする指定になります。当サイト以外のテンプレートをお使いの場合は対応を考えて設定してみてください。

コメントリスト（リンク元）

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side" id="commentlist">
<!--rcomment-->
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>

エントリーページのコメントリスト（リンク先）

<!-- コメント -->
<!--comment_area-->
 
<div id="comments" class="comments">
   <div class="comments-content">
 
      <!-- コメントタイトル -->
      <h3 class="comments-header">コメント</h3>
 
      <!--comment-->
      <div class="comment" id="c<%comment_no>">
 
         <!-- コメント本文 -->
         <div class="comment-content">●<%comment_title><br /><%comment_body></div>
 
         <!-- コメント投稿者情報 -->
         <p class="comment-footer">
            Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
         </p>
      </div>
      <!--/comment-->
 
   </div>
 
   <!-- コメント投稿 -->
   <form method="post" action="./" name="comment_form">
　　　：
　　（略）
　　　：
   </form>
 
</div>
<!--/comment_area-->

id 属性値には FC2 ブログとして一意となる %comment_no （数字）を利用しています。ただし id 属性値は数字から開始することはできないので、先頭に任意のアルファベット、ここではコメントを表す「c」を付与しています。

昨年ダメ元でエントリーしていた「Movable Type コンテスト 2006」で "準優秀賞" に選ばれました。
思いがけなく素晴らしい賞を頂くことができ、大変光栄です。

• 個人サイト 準優秀賞 No.434 「小粋空間」

Movable Type でブログを始め、Movable Type を中心としたテンプレートの配布、そしてカスタマイズ記事を書き続け、あっという間の3年近くでした。
Movable Type でブログを始めたこと、そして私のサイトを訪れて下さった多くの方からのご質問やご指導・ご支援のおかげでここまで継続でき、また今回の受賞に至ることができたと、心より感謝しております。

これからも皆様のお役に立てるエントリーを提供すると同時に、一ブロガーとして精進したいと思います。
最後に、本コンテストを開催くださった関係者の皆様に御礼申し上げます。
今回は本当にありがとうございました。 （以上、「コンテスト喜びの声」より）

という訳で、昨日行われた授賞式（場所：青山TEPIA）にも参加してきました。

審査概要

授賞式前半に Six Apart 代表取締役の関信浩氏の特別講演がありました。その話の中で

「全470サイトから1次審査で50サイトまで絞り込み、そこから各賞を選考しました」

とのこと。また

「グランプリ・準グランプリ・優秀賞・準優秀賞は審査員の総意で選ばれたサイト」

ということで、大変栄誉ある賞を頂けたと喜びをかみしめておりました。これだけ多くのサイトの中から選んでくださったことを感謝しています。

ハプニング

授賞式は10時開始だったのですが、実は会場への到着が少し遅れてしまい、その結果授賞式で当サイトの名前が呼ばれないというハプニングが発生し、呼んでもらうために会場後方でスタッフの方を探しに一人ドタバタしてました。参加する旨はメールで事前連絡済でしたが、おそらく会場入場時に出席確認があったのでしょうね（私が着いた時には何もなかった）。
私のサイトが一番最後に呼ばれたのはそういう事情があったためです。

「Movable Type」は何と読む？

進行の方が終始「モバブルタイプ」と言われてましたが、正式には「ムーバブルタイプ」です。

• Six Apart よくある質問：Movable Typeは何と発音するのでしょうか？

関係者の方々は気になっているだろうなと思ったら、やっぱり気にされていたようです。

• Six Apart 広報ブログ：MTコンテスト2007授賞式

これからは和名も時々併記した方がいいかもしれないと思いました。

他の受賞サイト

当サイトのテンプレートを利用くださっているサイトや、記事を参考にされているサイトも入賞されているようで、大変嬉しい限りです。

• Memories of HARADA Family：MovabletTypeコンテスト入賞！
• 全国高校サッカーNavi 管理人ブログ：『Movable Type コンテスト 2006』アスキービジネス賞受賞しました！

各賞の詳細につきましては下記を参照ください。

• 2006-結果発表

おわりに

ということで、これからも引き続き「小粋空間」をどうぞよろしくお願い致します。

Windows でフォルダのウィンドウを開く時、私は「マイコンピュータ」のアイコン、あるいは該当のフォルダのショートカットを右クリックし、左側にフォルダのツリーが表示される「エクスプローラ」として起動するのですが、毎回右クリックするのも面倒だなぁと思って調べたところ、ダブルクリックでエクスプローラを起動する方法をみつけましたので紹介します。

参考サイトは下記です。ありがとうございました。

• デジタルARENA：フォルダウインドウをエクスプローラ表示に

以下、設定方法です。
各スクリーンショットは HighSlide JS を利用しており、画像をクリックすれば拡大・縮小できます。拡大画像はドラッグも可能です。

• 関連記事：Highslide JS でサムネイル画像を拡大表示する

マイコンピュータを起動（任意のフォルダでもOK）。

メニューバーより[ツール]→[フォルダオプション]を選択。

フォルダオプション画面で[ファイルの種類]タブをクリック。

[登録されているファイルの種類]の一覧から「フォルダ」を選択（「ファイルとフォルダ」ではありません）。「フォルダ」は一覧の最初の方にあります。
選択後、[詳細設定]をクリック。

[アクション]で「explore」を選択し、「既定に設定」ボタンをクリック。あとは各画面の[OK]をクリックして元の画面に戻っていきます。

以上です。
デフォルト状態の「タスク」を表示したい時は「フォルダ」をクリックすれば切り替えられます。

変更してみたものの、つい右クリックして起動してしまいます（笑）。

本サイトで適用している、コメントを投稿時にフォームボタンをグレーアウトするためのカスタマイズです。カスタマイズ方法については以前よりリクエストを頂いておりました。公開が遅くなって申し訳ありません。

ここでは Movable Type でのカスタマイズ方法を紹介致します。他のブログツールについては順次公開していきたいと思います。
カスタマイズ元記事は下記です。ありがとうございました。

• naoyaのはてなダイアリー：onsubmit で submit ボタンを disable にしてユーザビリティを良くする
• 同：submit ボタン disable 技の罠

１．本カスタマイズの機能

• コメントフォームの「投稿」ボタンクリック時にフォームボタンをグレーアウトにする
• コメントフォームの「確認」ボタンクリック時はグレーアウトにしない

「確認」ボタンクリック時にグレーアウトしないのは、下記の理由のようにユーザビリティ上好ましくないと思ったためです。

• 「確認」でグレーアウトした場合、ブラウザの「戻る」でグレーアウトのままになる（投稿不能になる）
• 「確認」ボタンをクリックした時に「投稿」ボタンを押してしまったと錯覚する可能性がある

以下、カスタマイズ方法です。動作は Windows XP + IE6.0 / IE7.0 / Firefox2 / Opera9 で確認しています。テンプレートは Movable Type デフォルトテンプレートで確認していますが、当サイトの公開テンプレートでも動作します。
またカスタマイズにあたってはテンプレートにできるだけ手を加えないようにしています。

２．JavaScript 外部ファイルの作成

下記の内容を disabledButton.js という名前で保存し、メインページと同じディレクトリにアップロードしてください。

var disabledFlag = 0;
var isIE = (document.documentElement.getAttribute("style") ==
               document.documentElement.style);
function addFormAttribute(form) {
  isIE ? form.setAttribute("onsubmit", new Function("if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);")) :
         form.setAttribute('onsubmit','if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);');
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' && elements[i].getAttribute('name') == 'post') {
      isIE ? elements[i].setAttribute("onclick", new Function("setHiddenValue(this);")) :
             elements[i].setAttribute('onclick','setHiddenValue(this)');
    }
  }
}
function disableSubmit(form) {
  if(!disabledFlag){
    return;
  }
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' || elements[i].type == 'button') {
      elements[i].disabled = true;
    }
  }
}
function setHiddenValue(button) {
  if (button.name) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = button.name;
    q.value = button.value;
    button.form.appendChild(q);
    disabledFlag = 1;
  }
}

３．テンプレート修正

エントリー・アーカイブ／コメント・プレビューの </head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>disabledButton.js"></script>

また、同じテンプレートの body 要素に下記の青色部分を追加します。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);addFormAttribute(document.comments_form);">

addFormAttribute の直前のセミコロン ";" もお忘れなく。

４．注意事項

コメント・プレビュー画面に本カスタマイズを適用する場合、コメント・プレビュー・テンプレートに必ず下記のタグ（青色部分）をフォームに追加してください。これを追加しないとグレーアウトしません。

　　：
<p>
   <label for="comment-url">URL:</label>
   <input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
   <label for="comment-bake-cookie"><input type="checkbox"
      id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
      この情報を登録しますか?</label>
</p>
<p id="comments-open-text">
　　：

５．補足

グレーアウトする仕組み

「投稿」ボタンのクリックにより onclick イベントハンドラを起動します。ハンドラから起動された setHiddenValue でクリックされたボタンを hidden 型の input 要素として追加します。続いて onsubmitイベントハンドラが起動され、ハンドラから起動された disableSubmit でフォームボタンを disabled にします。

「確認」ボタンクリック時にグレーアウトしない仕組み

setHiddenValue の中で、変数 disabledFlag に 1 を設定し、disableSubmit の処理で、disabledFlag フラグが 1 の場合のみ button 要素を disabled にします（もっと良い実装があると思いますが）。

onsubmit 属性の再書き込み

form 要素の onsubmit 属性を用いて disableSubmit 関数を起動していますが、属性値には "if (this.bakecookie.checked) rememberMe(this)" が元から設定されているため、追加スクリプトで元関数と新たに加えた関数の両方を起動するように上書きしています。

IE の不具合対処

IE では、JavaScript の getAttribute / setAttribute で class ・style・イベント属性などを操作できないというバグがあり、その対処を施しています。IE 不具合対処の参考サイトは下記です。ありがとうございました。

• Days on the Moon：IE の getAttribute / setAttribute

Movable Type デフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

１．スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▼';
var closeMarkForSubCategories = '▲';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

• 名称：カテゴリーリスト数計算方法
• 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
• 設定値： true：li タグで計数／false：a タグで計数

subCategory

• 名称：サブカテゴリーの折りたたみ有効フラグ
• 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
• 設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

• 名称：サブカテゴリーの折りたたみマーク
• 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
• 設定値：任意の文字（設定したマークを''で括るように）

offsetForTitleAndMarkOfSubcategory

• サブカテゴリーのタイトルとマークのスペース
• 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
• 設定値：0以上

３．スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は１．１項、ツリー化する場合は１．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１ ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２ ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

• 名称：初期状態
• 用途：ページを最初に表示した時の折りたたみ状態を指定します
• 設定値： on：開いた状態／off：閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

６．スタイルシート変更

ツリー化しない場合は２．１項、ツリー化する場合は２．２項の CSS をスタイルシートに追加してください。

６．１ ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

６．２ ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

７．ツリー画像のダウンロード

ツリー化する場合は、７項・８項を実施してください。

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。

８．画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

Serene Bach の管理画面左にあるメニューリストを IE6 で操作する時、文字にカーソルを重ねないとリンクが機能しないという不具合があります（Firefox 2/ Opera9 等では正常に動作します）。
本エントリーでは、スクリーンショットのように、IE6 で文字以外の部分にカーソルを重ねた時にリンクとして機能させる方法を紹介します。

１．リンクにならない原因

文字以外の部分にカーソルを重ねてリンクが機能しないのは IE6 のバグのためです。IE7 ではこの問題が修正されています。

• CSS実装徹底検証! そこが知りたいInternet Explorer 7：ブロック要素化したリンク範囲が機能するように修正

２．変更方法

lib/resource/ja/style.css をダウンロードし、任意のエディタで開きます。
そしてファイルの一番最後に、下記の 1 行

.mainmenu .menu a:link {
    _width: 100%;
}

を追加してください。

３．注意事項

• 一般的なお作法として、追加した一番最後の行の末尾 "}" の後ろには改行を入れましょう。
• 上記リストにある ".menu" の直前の半角空白をなくすと別の場所にあるメニューが崩れます。
• width プロパティの前のアンダースコアを外すと Firefox で表示が崩れます（が、IE しか使わないのであれば問題なし）。

１．ユーザはウェブを読んでいない？

「ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-」によると、「ユーザはウェブを読んでいない」ようです。言い換えると、「ユーザはウェブを流し読みする傾向がある」とのこと。

個人差はあると思いますが、私自身の場合、たしかに記事を最初から最後までしっかり読むという機会があまり多くないかもしれません。

そういえば、当サイトのカスタマイズの質問で、

「同じ記事の×項に書いておりますので、そちらを参照ください」

という回答をする場合がまれにあります。こういった例も原因の一端でしょうか。

２．ユーザが読みやすくするためには

結論から申し上げると、書籍の元記事である「Jakob Nielsen博士のAlertbox：ユーザはウェブをどう読んでいるか」では、流し読みしやすいテキストとして、次のような手法を推奨しています。

Jakob Nielsen博士のAlertbox：ユーザはウェブをどう読んでいるか

• キーワードの強調
• 意味のある小見出し
• 箇条書きのリスト
• 1段落1アイデア
• 逆ピラミッド型の文体（結論を先に）
• 通常の文章に比べ、語数を半分あるいはそれ以下

この事実を知ってから、手法のひとつである「箇条書きのリスト形式」をエントリーに用いるようにしています。
またカスタマイズ記事の場合、

• 完成イメージの掲載
• 見出しによる作業の細分化
• 簡潔な文章

にこころがけ、ミスが起こらない内容にできればと思いつつ、書いてます。

３．変更例

下記は、流し読みしにくいテキストから流し読みしやすいテキストへの変更例です（「Column Resizer」の説明をサンプルとして用いています）。
もっと詳細で適切な例は「ユーザはウェブをどう読んでいるか」に掲載されてますので、そちらをご覧ください。

流し読みしにくい例

まず最初にカラムレイアウトを選択します。左上のラジオボタンでカラムレイアウトを選択してください。サポートしているカラムレイアウトは、3カラム固定レイアウト・2カラム（左サイドバー）固定レイアウト・2カラム（右サイドバー）固定レイアウトの3種類です。

（多分）流し読みしやすい例

１．カラムレイアウト選択

左上のラジオボタンでカラムレイアウトを選択します。
サポートしているカラムレイアウトは、

• 3カラム固定レイアウト
• 2カラム（左サイドバー）固定レイアウト
• 2カラム（右サイドバー）固定レイアウト

の3種類です。

あと個人的には、パラグラフ（p）を多くても5行程度に収め、パラグラフ内も必要に応じて改行を挿入しています。

４．その他

この手法はブログのスタイルや記事内容にもよると思いますので、一意に推奨している訳ではありません。

また、このエントリー自体が「流し読みしにくい」とツッこまれるのも本意ではありませんので、Alertbox の手法を取り入れてみました（読みにくかったらすいません）が、こうやって改めて書いてみると普段はあまり実践できていないようです。

ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます- Jakob Nielsen 舩井 淳 奥泉 直子 RBB PRESS 2006-07-12 売り上げランキング : 20683 Amazonで詳しく見る by G-Tools