小粋空間: 2006年11月アーカイブ

Top ＞ November 2006 [全て開く]

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

November 30,2006 2:20 AM
Category：[CSS]
Tag：[CSS, Photoshop]
Permalink

「CSSでブログに影をつける（ドロップシャドウ）」でドロップシャドウを背景画像として設定する方法を説明しましたが、肝心の背景画像の作り方で悩んでいる（かもしれない）方のために、Photoshop 6（CSは持ってません）を利用した作成方法を紹介します。

[ファイル]-[新規]で（固定レイアウトの場合は）ブログ幅のウィンドウを作成。実際の横幅はもっと広いと思いますが、説明上、ここでは 250px に設定しています。

作成した新規ウィンドウ新規作成のウィンドウはこんな感じになります。

[レイヤー]パレットに表示されている[背景]をダブルクリック。

開いたウィンドウのレイヤー名は「レイヤー0」になっていると思いますので、そのまま[OK]をクリック。これは、[背景]から任意の名前に変更することで、レイヤーのロックを外してドロップシャドウ等の効果を設定できるようにするための操作です。

これで[レイヤー]パレットに表示されているレイヤー名が「レイヤー0」に変更されました。

[イメージ]-[画像サイズ]（CSの場合はカンバスサイズ）を選択。

ドロップシャドウ分の横幅を追加します。サンプルでは左右 25px ずつ追加した合計サイズ 300px に設定しています。変更前のサイズはこのウィンドウの上部に表示されています。
アンカーはどの方向に広げるかを決めるものです。デフォルトは中央から上下左右に広げる設定になっていますので操作しないでください。

設定後のウィンドウこれで最初の画像の左右に余白が出来上がります。この状態では余白は透明ですが、背景色を設定したい場合は以降の背景色の設定を行ってください。必要でない方は、5つ下にあるドロップシャドウ設定に進んでください。

[レイヤー]パレットの下にあるレイヤーの新規作成をクリックして「レイヤー1」を作成。

その状態で[レイヤー]-[新規]-[レイヤーから背景へ]を選択。

これで「レイヤー1」が「背景」に変更されました。

設定後のウィンドウまた画像の左右余白の部分に背景色（ここでは白）が設定されます。背景色は予め設定している背景色が適用されます。

次にドロップシャドウを設定します。[レイヤー]パレットの「レイヤー0」をダブルクリック。

[レイヤースタイル]ウィンドウが開きますので、光彩（外側）を選択し、[構造]-[描画モード]を「通常」、[構造]の左下のラジオボタンを選択して右側のパレットをクリックしてお好きな色を設定（これがドロップシャドウ色になります）。その他、[エレメント]や[画質]でドロップシャドウを微調整します。
ドロップシャドウの具合は、先程のウィンドウ右側にある[プレビュー]をチェックしておけばリアルタイムで表示を確認できます。
決まったら[OK]をクリック。

ドロップシャドウ完成これでドロップシャドウが出来上がりました。あとは画像の高さを短くするだけです。

[イメージ]-[画像サイズ]（CSの場合はカンバスサイズ）を選択。

開いたウィンドウで高さを変更します。ここでは 3px にしてみました。これで[OK}をクリック。

「画像の一部が切り抜かれます」という警告のダイアログが表示されますが、そのまま[OK]をクリック。

完成画面これでドロップシャドウ画像の完成です。

2006.12.02
記事を全面変更しました。

続きを読む ≫

Comments [9] | Trackbacks [1]

CSSでブログに影をつける（ドロップシャドウ）

November 29,2006 1:55 AM
Category：[CSS]
Tag：[CSS, Dropshadow, Template]
Permalink

CSSでブログに影をつける（ドロップシャドウ）ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。

ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。
最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。

このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。

１．ドロップシャドウの仕組み

１．１固定レイアウト

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

背景画像

基本的には、body 要素の背景画像（CSS で言えば body 要素セレクタの background プロパティ）に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。*2

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記にHTMLマークアップのイメージを記します。*3

<body>
  <div>　← ブログの幅を指定
    <div>　← 背景画像を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズ（２項）をご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

１．２リキッドレイアウト

基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。

<body>
  <div>　← 背景画像（左用）を指定
    <div>　← 背景画像（右用）を指定
　　　：
　[ブログ本体のマークアップ]
　　　：
    </div>
  </div>
</body>

こちらもサンプルを用意していますのでご覧ください。

サンプル3：リキッドレイアウト

２．公開テンプレートによるカスタマイズ

２．１共通事項 - テンプレートの修正

固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

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

２．２．１画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

ドロップシャドウ用背景画像

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。

２．２．２スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    width: 870px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}

これでドロップシャドウが表示されればOKです。なお上記のサンプルは、背景画像（back_fixed.gif）がスタイルシートと同じディレクトリにあることを想定しています。

#inner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

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

２．３．１画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

２．３．２スタイルシート修正

スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。（略）と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。

/* タイトルバナー */
#banner {
    margin:0 15px;
    _height: 100%;
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
*:first-child+html #banner {
    height: 100%;
}
　　　　　　：
　　　　　（略）
　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    margin: 0 200px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    left: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    right: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #inner {
    background: url("back_liquid_left.gif") repeat-y top left;
}
.layout-three-column-liquid #box {
    background: url("back_liquid_right.gif") repeat-y top right;
    width:100%;
}

#banner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2007.05.09 追記
CSS に IE7 対応のセレクタを追加しました。

*1：これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2：背景画像の高さは、他のサイトを拝見すると、3px?5pxと、非常に薄いものが多いです。CSS によって繰り返し表示するということはブラウザのレンダリング性能に依存する訳ですが、どの程度の高さが妥当であるかは不明です。個人的にはサンプルで示している高さでも特に問題ないと思ってます。言い換えると、繰り返し表示することでブラウザ下の部分が「はみだす」とか「帳尻が合わない」ということにはならないようです。

*3：div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません（本来はブログ全体を括る要素に与えるのが妥当）が、クロスブラウザ対応のためのテクニックとして記しています。

Comments [36] | Trackbacks [0]

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Category：[サイドメニュー, 最近のエントリー, 最近のコメント, 最近のトラックバック, 月別アーカイブ]
Tag：[Customize, MovableType]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

１．Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

２．スクリプトの追加

「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。

お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

リスト 2.1　追記文章の折りたたみ用スクリプト

３．部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。

３．１最近のエントリー

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.1　「最近のエントリー」用MTタグ

３．２最近のコメント

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.2　「最近のコメント」用MTタグ

３．３最近のトラックバック

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

リスト 3.3　「最近のトラックバック」用MTタグ

３．４月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>

リスト 3.4　「月別アーカイブリスト」用MTタグ

４．CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

.list_more {
   margin:5px 0;
}

リスト 4.1　CSS

５．表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

　　　　　　：
<MTCounterIfEqual value="6">
　　　　　　：
　　　　　（略）
　　　　　　：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
　　　　　　：

リスト 5.1　表示数を変更する場合の変更箇所

「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [4] | Trackbacks [1]

天才クラシックギタリスト・山下和仁の超絶技巧「展覧会の絵」

November 27,2006 12:08 AM
Category：[音楽]
Tag：[Guitar, YouTube]
Permalink

YouTube に山下和仁「展覧会の絵」の演奏がありました。とりあえず聴いてみたい、という方は読み飛ばして、後方ある動画をご覧ください。

山下和仁は20年ほど前に「天才ギタリスト」としてデビュー、若くして世界3大クラシックギターコンクールを制覇し、現在の日本人トップクラシックギタリストの一人です。クラシックギター界はもちろん、他のジャンルのギタリストを含めても、彼の超絶技巧は他に類をみない素晴らしさがあります。

この「展覧会の絵」は20年ほど前の彼自身の編曲によるもので、ギター一本でクラシック音楽に真正面から向き合った作品。最近は演奏されていないので、YouTube で公開されている演奏はその当時のものと推測されます。

この曲は元々ピアノ独奏曲で、ロシアの作曲家・M.ムソルグスキーの代表的作品。「亡き王女のためのパヴァーヌ」等で有名な M.ラヴェルによる管弦楽編曲版の方が有名かもしれません。
クラシックに馴染みがない方でも、冒頭のフレーズ等、どこかで聴いたことがあるでしょう。

彼の演奏の特徴には下記のようなものがあります。

動きが激しい
演奏中に立ち上がりそうになる（普通は立ち上がらない）
演奏中に頻繁にチューニングをする（最近は当たり前になってきました）
この曲に関しては小指を使っている（クラシックギターでは小指は使わない）

「展覧会の絵」は40分ほどの大曲ですので、動画は4つに分割されています。うち3つは冒頭の40秒ほどナレーションが入りますが演奏には関係ありません。
原曲のピアノ版、または管弦楽編曲版を聴いてからこの動画を見るとさらに面白いでしょう。

なお、YouTube のビットレートでは速弾きの音が残念ながらきちんと入ってません。「ちゃんと聴いてみたい」という方は下記の1枚が超お勧めです（というかこの1枚しかありません）。

展覧会の絵&火の鳥

山下和仁ムソルグスキーストラヴィンスキー

おすすめ平均
stars 信じられないくらい凄い演奏
stars 大好きなあなたへ
stars クラッシックギタリスト
stars 「火の鳥」白熱の名演
stars 野性味あふれるギター版「展覧会の絵」

Amazonで詳しく見る by G-Tools

楽譜も販売されてます。腕試しに弾いてみたい、という方は下記のサイトからどうぞ。

現代ギター：ムソルグスキー：展覧会の絵／山下和仁・編

プロムナード - 小人 - プロムナード

古城 - プロムナード - テュイルリーの庭 - ビドロ

プロムナード - 卵の殻をつけた雛の踊り - サムエル・ゴールデンベルクとシュミュイレ - リモージュの市場 - カタコンブ

バーバ・ヤーガの小屋 - キエフの大門

Comments [4] | Trackbacks [0]

バシッと

November 26,2006 1:50 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [6] | Trackbacks [0]

キューステア（Qステア/Q-STEER）・購入レポート

November 25,2006 1:30 AM
Category：[mono]
Tag：[Amazon, Hobby]
Permalink

キューステアワゴンR RR 「ラジコンのような操作ができるチョロQ」として発売された「キューステア（Qステア/Q-STEER）」の記事をエントリーしてから１ヶ月以上経ちまして、ようやく購入しました。
購入した機種は左スクリーンショットの「ワゴンR RR スターターセット」。渋めなワインレッドのボディカラーに精悍な顔つき。なかなか気に入っています。

ということで、以下、キューステアの購入レポートです。職業病からか、ブログカスタマイズのような書き方になってしまっていますが（笑）、付属の説明書が分かりにくかったので、とりあえず「買ってすぐ動かしたい！」という方のために、説明書を読まなくても操作できる内容にしてみました。

まずパッケージはご覧の通り。これは以前の「デジQ-R」をはるかに下回る 100mm（高さ）×140mm（幅）という小さなサイズでした。理由はデジQ-Rのコントローラー（プロポ）が本格的であったのに対し、「ビットチャージー」と同じ（というかさらに）コンパクトなものに変わったためです。

そのコントローラーの大きさは 50mm×35mm。購入時は電池部分に絶縁テープが仕込まれてますので、まずはこれを引き抜きましょう。
コントローラーの左側にスロットル（前進・後進）、右側にハンドルが配置されています。
私が一番気になっていたのは「スピードやハンドルの微調整が可能か？」という点でしたが、スロットル・ハンドルともにカチッという感触で操作するようになっており、要するに ON/OFF のみしかなく、急発進・急停止、回転角度も一定です。
その代わり、右上に見える「ダッシュボタン」を押すと、ボタンを押している間、加速します。

上部中央に見えるのがセンサーで、スロットル下にバンド切り替えスイッチがあります。バンド切り替えは、1台で遊ぶのであればこれを修正する必要はないと思います。

コントローラー＆アジャスタースティックコントローラーの下にある棒状のものは「アジャスタースティック」というもので、これを引っ張り出して（引っ張り出すのがちょっと面倒）、車体の電源 ON/OFF・バンド（周波数）切り替え・直進性の調整・電池交換に用います。
車体の電源を入れる必要がありますので、とりあえず引っ張り出しておきましょう。

車体の電源 ON/OFF は、赤色で囲った位置にあるスイッチを切り替えることで行ないます。スクリーンショットのように進行方向と垂直になっている状態が「OFF」です。先程引っ張り出した「アジャスタースティック」の先端の凹んでいる部分を電源スイッチの凸部にあてて、90度回転させます（これは説明書の図を見た方が良いでしょう）。

スイッチを進行方向と水平にすると「ON」になり、これでコントローラーから操作可能になります。
コントローラー・車体ともボタン電池を使っているので、走行時間が数分という制限があった前世代のものよりもたっぷり楽しめるようになりました。ただし1回の交換で何時間動作するかは不明です。

3分間操作しないと、車体の電源が ON の状態でも自動的に OFF になるようです。その際は一旦 OFF に戻し、再び ON にしてください。コントローラーの電源の ON/OFF はありません。

複数台で遊ぶ時は、それぞれ異なるバンドを使用します。車体のバンドを切り替えて、コントローラー全面下部にあるバンドを車体のバンドに合わせます。

コントローラーにはA?Dの計4バンドが用意されていますが、車体自体は「A・Bバンド用」と「C・Dバンド用」の2種類しかありませんのでご注意ください。ちなみに私の購入した車種は「C・Dバンド用」で、スクリーンショットは「Dバンド」を指しています（上のスクリーンショットは「Cバンド」の状態）。バンドは「アジャスタースティック」を用いて切り替えます。

直進性は前評判通り、結構いい感じす。が、バックに関してはあまり期待しない方がいいでしょう（笑）。
前進の直進性を修正する場合は左の赤枠部分にある「トリムスイッチ」で調整します。私の場合、特に調整する必要はありませんでした。

総合的には、約1000円という値段で充分楽しめる内容ではないでしょうか。金額の細かい話をすると、使用されているボタン電池（LR44）4つで、すでに350円位します。

キューステアの現在の（多分）フルラインナップは下記のページにまとめてます。

キューステア（Q-STEER）

今回購入したのは次の商品です。

Qステア QSS10 ワゴンR RR スターターセット　（C/D）

タカラトミー 2006-11-23
売り上げランキング : 1214

Amazonで詳しく見る by G-Tools

Comments [7] | Trackbacks [0]

JavaScript 不要なサイドメニューのツリー化 for Serene Bach

November 24,2006 1:30 AM
Category：[ツリー化]
Tag：[Customize, SereneBach, Tree]
Permalink

ブログツールのひとつとして有名な Serene Bach は現在 2.08D（開発途上版）がリリース中ですが、プラグインを用いて JavaScript 不要なコメント・トラックバックのツリー化を行うカスタマイズを紹介します。

Serene Bach on the Prairie：コメント・トラックバック指定ジャンプ

具体的には、「最近のコメント」「最近のトラックバック」ともに、コメントまたはトラックバック単位に表示されていたものが、記事単位およびコメント投稿日順・トラックバック受信順にまとめて表示されるようになります。

またHTMLマークアップは下記のように class 属性が追加されるようになります。また href 属性に "#"+部分識別子が付与されますので、個別記事ページの該当コメントまたは該当トラックバックの表示位置にジャンプできるようになります。

<ul class="tree">
<li><a href="http://?/eidx.html">記事タイトル1</a></li>
<li class="lst"><a href="http://?/eidx.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://?/eidx.html#com1">投稿者2 (mm/dd)</a></li>
<li class="end"><a href="http://?/eidx.html#com2">投稿者3 (mm/dd)</a></li>
<li><a href="http://?/eidy.html">記事タイトル2</a></li>
<li class="lst"><a href="http://?/eidy.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://?/eidy.html#com1">投稿者2 (mm/dd)</a></li>
　　　　　：
</ul>

青色部分の class 属性が追加されるので、これに対応するCSSを与えるだけでツリー表示が可能になります。

以下、カスタマイズ方法です。プラグインは配布サイトより入手し、利用可能状態にしてください。プラグインを利用可能にした後、管理画面左の「追加機能」に「コメント・トラックバック指定ジャンプ」が表示されますので、そのリンクをクリックして、表示された画面で「ツリー表示を使う」にチェックをして「変更する」をクリックしてください。

注：本カスタマイズと「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

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

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

実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
なおファイル名は３項の CSS で設定している tree_lst.gif および tree_end.gif に修正してください。

２．ツリー画像のアップロード

ダウンロードした画像をサーバの任意のディレクトリ（例えば img 配下）にアップロードしてください。

３．CSS設定

リスト3.1 のCSSをスタイルシートに追加します。

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree li.lst {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_lst.gif);
}
ul.tree li.end {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_end.gif);
}

リスト 3.1　CSS

上記はスクリーンショットのように当サイトのテンプレートに合わせたものですが、他のテンプレートでも適用可能と思います。レイアウトについては適宜修正してください。

なお、background-image プロパティの画像ファイルは、img ディレクトリに画像をアップロードしている場合を想定しています。例えば hogehoge というディレクトリの配下にツリー画像をアップロードした場合は、

background-image: url(hogehoge/tree_lst.gif);

という風に修正してください。

４．テンプレート修正

リストに付与された href 属性の"#"＋部分識別子を有効にしたい場合、個別記事のコメントリスト（リスト 4.1）・トラックバックリスト（リスト 4.2）に id 属性（青色）を追加します。

<!-- BEGIN comment -->
<div class="comment" id="{comment_id}">
<div class="comment-content">{comment_description}</div>
<p class="comment-footer">Posted by {comment_name} at {comment_time}</p>
</div>
<!-- END comment -->

リスト 4.1　コメントリストへ id 属性を追加

<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback" id="{trackback_id}">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
<!-- END trackback -->

リスト 4.2　トラックバックリストへ id 属性を追加

2007.02.06 追記
「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合の注意書きを追加しました。

Comments [10] | Trackbacks [1]

BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）

November 23,2006 3:33 AM
Category：[Ajax, BlogPeople]
Tag：[Ajax, BlogPeople, Customize]
Permalink

BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。

しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
このタイムラグはHTMLページの表示に大きく影響します。その理由は次の通りです。

例えばIEでサイトを閲覧する場合、そのサイトのページはHTMLソースの先頭から記述された順番に表示されるようになっています *1。つまり、ページの最初や途中にこのリンクリストを表示するタグが記述されている場合、サーバの応答が返ってくるまでそれ以降のHTMLソースの内容が表示されないという問題があります。
サーバからの応答がある場合はまだ良いのですが、サーバダウン等といった不測の事態が発生すると、それ以降のページがしばらく表示されなくなる可能性もあり、閲覧者にとってはかなりのストレスになります。

したがって、リンクリストを表示する位置についてはページの（少なくとも本文より）後方やリンクリスト専用のページに配置したり、あるいは「中継君（関連記事）」を利用されているのではないでしょうか。

このエントリーは、その解消策として、以前公開した「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」の第2弾で、Ajax と CGI の組み合わせでリンクリスト表示のタイムラグを解消する方法です（下記のスクリーンショットは表示イメージ）。

BlogPeople リンクリストの Ajax 化

仕組みは、リンクリストの表示用タグ（リスト 3.1）はお好きな位置に埋め込み、そこから Ajax（bp.js）を起動し、さらに CGI（bp.cgi）を起動し、CGI 経由で BlogPeople のリンクリストを取得します。Ajax 起動なので、HTMLページ表示と BlogPeople のリンクリスト取得は並列に処理され、リンクリストが取得できた時点で HTMLに反映されます。

上記の基本的な動作に加え、ここでは下記の動作も加えた、少し凝った作りにしています。

リンクリストが表示されるまではローディング画像を表示（IE6では初回しか表示されないようです）
リンクリスト取得に失敗した場合は、ローディング画像を消去して、リスト表示位置に "Server Error" または非表示

下記にサンプルを用意してますので、動作をご確認ください。なお Ajax の特徴を分かりやすくするよう、リンクリスト表示までに1秒かかるよう、スクリプトを改変しています。Firefox で閲覧されると良く分かります。

BlogPeole の Ajax 化サンプル

このカスタマイズは設定がやや複雑ですので、自信がない方は前述した下記の方法をお勧めします。

BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）

それでは以下、設定方法です。CGI および外部ファイルが扱えるブログやホームページであれば利用可能と思われます。また特定のブログに依存する記述ではありませんので、予めご了承ください。

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

下記のファイルをダウンロードしてください（右クリックして「対象を保存」を選択してください）。

bp.zip/ bp.lzh （リンクリスト取得スクリプト）
bp.js （Ajax起動スクリプト）
ajax-loader.gif （ローディング画像）

bp.zip（または bp.lzh）は解凍した中にある bp.cgi を使用します。

また、上記の他、Ajax ライブラリの prototype.js をダウンロードしてください。

Prototype JavaScript Framework

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

また、ajax-loader.gif はお好きな画像に変更して構いません。配布しているローディング画像は下記のサイトで作成したものです。

Ajaxload

２．bp.js の修正

ダウンロードした bp.js を任意のエディタで開き、1行目・2行目（リスト 2.1）を修正します。

var script = 'bp.cgi';
var image = 'ajax-loader.gif';

リスト 2.1　bp.js 変更箇所

bp.cgi の部分は URL 記述に変更してください。当サイトを例にすると、メインページと同じディレクトリに bp.cgi をアップロードしたのであれば、

var script = 'http://www.koikikukan.com/bp.cgi';

リスト 2.2　bp.js 変更例

という風に書き換えます。

ajax-loader.gif の部分も同じ要領で変更しますが、bp.js と異なるパスにアップロードする場合のみ、URL 記述に変更してください。bp.js と同じディレクトリであればこのままで問題ありません。

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

１項でダウンロードしたファイルをサーバにアップロードします。bp.cgi はアップロード後、パーミッションを 755 または 777 に変更します（パーミッションの値はレンタルサーバによって異なる場合がありますので適宜確認してください）。

各ファイルのアップロードディレクトリは任意ですが、例えば Movable Type であれば、メインページと同じディレクトリが良いでしょう。CGI スクリプト（bp.cgi）はレンタルサーバによって実行可能ディレクトリの制限があるので、例えば cgi-bin ディレクトリ等になる場合があります。

４．リンクリスト表示用タグの追加

リスト 4.1 の内容を、リンクリストを表示したい位置へ設定します。

<div id="linklist"></div>
<script type="text/javascript">
getLinkList('[BlogPeopleリンクリストのURL]');
</script>

リスト 4.1　リンクリスト表示用タグ

[BlogPeopleリンクリストのURL] には、リンクリストのコード生成で出力された script 要素の src 属性の内容（リスト 4.2 の青色部分）を設定します。

<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxxxxxxxxxxxx.js"></script>

リスト 4.2　BlogPeopleリンクリスト表示コード

５．スクリプトのインクルード

リスト 5.1 の script 要素を、リスト 4.1 を設定したテンプレート（またはHTML）の <head>～</head> 部分に設定します。

<script type="text/javascript" src="http://domain/path/prototype.js"></script>
<script type="text/javascript" src="http://domain/path/bp.js"></script>

リスト 5.1　script 要素

赤色の src 属性値は環境に合わせて適宜変更してください。

６．スタイルシート設定

リスト 6.1 をスタイルシートに追加します。

#linklist {
    margin: 5px 1px 15px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}
.bp_loading {
    border: 1px solid #999999;
    padding: 83px 0;
    text-align: center;
}
.bp_loaded {
}
.blogpeople-main {
    height:162px;
    overflow: auto;
}
.blogpeople-powered-by {
    text-align: left;
}
.bp_error {
    padding: 83px 0 84px;
    text-align: center;
}

リスト 6.1　CSS

以下、CSS の各セレクタの説明です。

#linklist はリンクリスト全体のスタイルを設定しています。

.bp_loading はローディング画像を表示中のスタイルです。padding プロパティは、ローディング画像表示中の高さと、実際にリンクリストが表示されたときの高さを一致させるためのものです。ローディング画像のサイズによって高さが微妙に変わりますので、気になる場合は padding の値を適宜変更してください（Firefox で閲覧して高さが一致するようにしています）。

.bp_loaded はリンクリストが表示された時のリンクリスト全体のスタイルです。お好みに応じてプロパティを追加してください。

.blogpeople-main と .blogpeople-powered-by は「BlogPeople のリンクリストにスクロールバーをつける」のCSSと重複しています。すでにリンクリストのスクロール設定をされている場合はご注意ください。

.bp_error はリンクリスト取得失敗時のスタイルです。

７．リンクリストが表示されない場合

このカスタマイズのキモは「リンクリストが取得できるかどうか」ですが、それを確認するために、bp.cgi の下記の部分を変更して、bp.cgi をブラウザから直接実行してみると良いでしょう。

my $url = $query->param('url');
　　　　　　↓
my $url = '[BlogPeopleリンクリストのURL]';

リスト 7.1　bp.cgi 変更箇所

[BlogPeopleリンクリストのURL]は３項と同じものです。成功すればブラウザ上にリンクリストが表示されます。

上記でリンクリストが表示された後、bp.cgi の内容を元に戻します。それで表示できない場合は、

bp.js および prototype.js のパス誤り
bp.js に記述した bp.cgi のパスが誤り

等が考えられます。

*1：全てのブラウザが同じ動作であるかについては未確認です。実際、Firefox／Opera ではストレスなく表示されます。

Comments [6] | Trackbacks [2]

Ignore プラグイン

November 22,2006 12:03 AM
Category：[プラグイン]
Tag：[Ignore, MovableType, Plugin]
Permalink

先日エントリーした「MTIgnore タグ」を Movable Type 3.2 で利用するためのプラグインです。

「タグで括られた部分を処理しない」というものですので、「プラグイン」というのはおこがましいのですが、テンプレートに色々なカスタマイズ、特に MTタグをそのまま残せるのがかなり便利と感じました。

実は、不要なMTタグにHTMLコメントアウト（）を施ししても、再構築時点ではそのMTタグは処理対象となってしまいます（Movable Type はHTMLコメントアウトを認識しないため）。つまりその分パフォーマンスに影響し、さらにHTMLソースに展開されたMTタグが残ってしまいますのでファイルサイズにも影響します。

このプラグインを用いることで、再構築対象にならず、HTMLソースにも残らないため、これらの欠点を一気に解消することができます。まだ 3.2 をお使いの方で興味のある方はお試しになってください。

なお、3.3 では MTIgnore タグがデフォルト機能としてサポートされますので、アップグレード後、本プラグインを無効にすればテンプレートに記述した MTIgnore をそのまま使うことができます。

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

下記のリンクよりプラグインアーカイブをダウンロードしてください。

Ignore.zip
Ignore.lzh

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

プラグインアーカイブを解凍して、中にある Ignore.pl を plugins ディレクトリにアップロードしてください。
管理画面の

メイン・メニュー > システム・メニュー > プラグイン

で使用中のプラグイン一覧が表示されますので、その中に「Ignore バージョンx.xx」と表示されていればOKです。

３．タグ

このプラグインが提供するMTタグは

<MTIgnore>

です。

例えば、リスト1.1のように、一部分を MTIgnore で括ります。

コメント１
<MTIgnore>コメント２</MTIgnore>
コメント３

リスト1.1　MTIgnore タグの使用例1

この場合、MTIgnore で括られた部分は HTML に現われず、リスト1.2 のように

コメント１
コメント３

リスト1.2　リスト1.1 のHTMLソース

という表示になります。

コメント文字列だけでなく、MTタグを MTIgnore で括ることも可能です。リスト1.3 のように括れば、生成された HTML ページに MTEntries タグの内容は何も表示されません。

<MTIgnore>
  <MTEntries> 
    <$MTEntryTitle$><br />
  </MTEntries> 
</MTIgnore>

リスト1.3　MTIgnore タグの使用例2

４．エントリーの中で使いたい場合

「書いた記事をエントリーに残しておきたいけれども見られたくない」という場合は、エントリーの中で MTIgnore を利用することで、生成されたHTMLに表示されなくなります。この技を実現するには「エントリーの中でMTタグを使う」をご覧ください。*1

*1：記事の概要にあたる部分で用いた場合、MTEntryTrackbackData が展開された内容に記述が残る場合があります。

Comments [2] | Trackbacks [0]

Movable Typeでつくる！最強のブログサイトプラグイン＆カスタマイズ編

November 21,2006 12:05 AM
Category：[書籍]
Tag：[Amazon, Book, MovableType]
Permalink

ブログ界では Movable Type カスタマイズ本の著者として有名な The blog of H.Fujimoto の壱さんが、また新たに執筆されました。

Movable Typeでつくる！最強のブログサイトプラグイン＆カスタマイズ編
藤本壱

ソーテック社 2006-11
売り上げランキング : 68073

Amazonで詳しく見る by G-Tools

今回はカスタマイズ、特にプラグインを利用した Movable Type のメジャーなカスタマイズを中心とした内容です。以下、主な内容です。

ブログのデザインを簡単操作で変える: Style Catcher でブログデザインを変える; Widget Manager でサイドバーのパーツを入れ替える

定番のカスタマイズ: カテゴリーを並べ替える; リストをのツリー表示にする; サイドバーの各項目の折りたたみ

ブログを強化するカスタマイズ: mt4i による携帯からの投稿・閲覧; エントリー内の写真をアルバムのように表示する; ポッドキャスティングを行う; メールフォームを設置する; コメントに返信した時にメールで通知する

ブログに出力する内容をカスタマイズする: トラックバック先のエントリー表示; 最近のコメント／トラックバックをエントリーごとにまとめて表示; エントリー内に地図を表示; QRコードを表示; 2ちゃんねる風のコメント; 同一カテゴリー内の前後の記事のリンク表示; エントリーアーカイブに同一カテゴリーのエントリー一覧表示; 正規表現による検索・置換; 複数ブログをまとめて表示; 特定カテゴリーを除外して表示; タグの値で処理を変える

管理ページのカスタマイズ: リンク挿入機能の改善; ファイルのアップロード先ディレクトリを追加; エントリーに絵文字を入れる; エントリープレビューの改善; エントリーフィールドを追加する; エントリー入力」画面に書式設定機能をつける

PHP化と再構築の軽量化: モジュール化; ページ分割; Perl版ダイナミック・パブリッシング; Perl版ダイナミック・パブリッシングのページ分割

スパムへの対策: 日本語を含まないコメント／トラックバックをスパムとみなす; 言及リンクのないトラックバックをスパムとみなす; コメントスパマーにブログを見せない; コメント投稿時に画像認証する

便利な機能を追加する: エントリー日時を公開日時・現在日時に変更; 指定日投稿・ほぼ指定日投稿; トラックバック重複を防ぐ; 秘密のコメント機能; コメント入力で絵文字を使う; アクセス解析を行う; 改

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