May 2008 Archive

ひょっとしたら意外と知られていない機能かも？と思ってエントリーしてみました。

Dreamweaverで作業を続けてると気づけばファイルパネル内でたくさんのディレクトリが開きっぱなし！てな事になってることも多いかと思います。

これを一気に閉じるにはMacの場合はOptionキー、WinだとCtrlキーを押しながらディレクトリをクリックすると、クリックしたディレクトリに含まれるサブディレクトリも一気に閉じてくれます。閉じてるディレクトリに対してOption(Ctrl)キー+クリックすればサブディレクトリを含め、一気に開いてくれます。

ちなみにPhotoshopやIllustrator、Fireworksなども同様に一括で閉じたり開いてしてくれます。

Movable Typeで特定のタグがついている場合にのみ実行しようとした時の条件分岐としては<mt:EntryIfTagged>タグがあります。

例えば"イベント"なんてタグが付いている時にクラスを当てて表示方法を変えたい場合なんかに有効。

<mt:Entries>
<mt:EntryIfTagged tag="イベント">
<div class="event">
<p><$mt:Entryate format="%x(%a)"&></p>
<$mt:EntryBody$>
</div>

<mt:Else>
<div class="normal">
<p><$mt:Entryate format="%x(%a)"&></p>
<$mt:EntryBody$>
</div>
</mt:EntryIfTagged>
</mt:Entries>

Read more

iTunesの曲名が表示されるウィンドウライクなデザインをdivとp、spanタグでマークアップしてデザインしてみました。(X)HTMLコードは以下のようなシンプルなものです。

<div id="window">
<p><span>You Never Give Me Your Money / The Beatles</span></p>
</div>

CSS側はこんな感じです。

div#window {
	height: 46px;
	background: url(../img/bg01) repeat-x left top;
}
div#window p {
	margin-top: 5px;
	margin-left: 300px;
	background: url(../img/left.gif) no-repeat;
	line-height: 36px;
	float: left;
	display: inline; /* for win ie6 bugfix */
}
div#window p span {
	margin-left: 12px;
	padding-right: 12px;
	background: url(../img/right.gif) no-repeat right top;
	line-height: 36px;
	float: left;
}

仕組みはpタグには左のウィンドウ画像、spanタグに右のウィンドウ画像を背景に表示させています。pとspanのline-heightにウィンドウ画像の高さを指定して上下のセンタリングをします。pにfloat:leftを指定し、spanにもfloat:leftを指定しspanでくるんだ文字をpに追従させる形にします。さらにspanに左のウィンドウ画像分の幅をpadding-rightに指定します。

floatを使ってるためセンタリングが出来ないのでpタグの左マージンで位置は調整します。

定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。

まず次のような(X)HTMLがあります。

<dl>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dd class="test">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

この(X)HTMLを次のようなCSSで整形します。

dt {
	width: 7em;
	float: left;
	clear: left;
	line-height: 1.3;
}
dd {
	margin-bottom: 0.3em;
	margin-left: 7em;
	line-height: 1.3;
}
dd p { margin-bottom: 0.3em; }

するとWindows IE6では左のようにdtの直後に出現するddの先頭の文字が右に0.3emほどずれて表示されてしまいます。

これを回避するにはIE6用にheight: 1%;を適用させると頭文字がそろいます。IE6だけに適用させるため* htmlハックでCSSを記述します。

* html dd { height: 1%; }

さてとりあえずそろいましたが、height: 1%;の記述は右に0.3emほどずれたものに合わせることになるので、1つのdtに複数のddを記述した場合、2番目以降のddは正しいddの位置に表示されるので、当然のようにずれてしまいます。

結局これを回避するためには2番目以降のddに同じく* htmlハックで右に0.3emほどマージンを多くとる事になってしまいます。

正確なマークアップの意味合いから外れてしまうかもしれませんが、1つのdtに対してddを1つにし、dd内にpタグを含めてマークアップすると、クラスを作らなくても右に0.3em分ずれて表示してくれるので、とりあえず見た目の確保は出来ます。

<dl>
<dt>定義リスト1</dt>
<dd>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章</p>
</dd>
</dl>

Fireworks CS3の機能でPhotoshopファイルを開く時にPhotoshopのエフェクトを再現するPhotoshopライブエフェクトと言う機能があります。

ところがこいつが結構くせ者でして、Photoshopライブエフェクトがかかったファイルをpng形式で保存してしまうとFireworksがクラッシュして二度と開く事が出来ません(psd形式で保存すれば開けます。)。Flashで開こうとしても同様にFlashがクラッシュします。

そんな訳でpng形式で保存する必要性がある場合はPhotoshopライブエフェクトがかかっているオブジェクトをビットマップ化する必要があるのですが、PIXEL LABさんでこれを一発でやってくれるFireworksパネルを配布してくれています。

Read more

テンプレートを変更してからトラブル続きでした。検索結果の不具合に続き、Windows IE6/7でカテゴリーアーカイブがなぜか真っ白で表示されない不具合が出ました。ソースコードを見るときっちり生成されているので、コードをコピーして1カ所ずつ削除したりして確認しました。

どうやら<title></title>タグ周りがおかしいらしいので元のヘッダーモジュールのテンプレートと見比べてみると、元のテンプレートは以下のような記述になってました。

<title>
<$mt:var name="title"$>
</title>

僕の書いていたテンプレートの記述は以下の通り

<title><$mt:var name="title"$></title>

そう、改行が入っていなかったのです。たったこれだけで表示されました。恐るべしMTタグ...

GW最終日、少しずつ作ってたテンプレートを反映させました。今までは青を基調としたものだったけど、イメージをがらりと変えて緑にしてみました。

順調に...と思ったら、検索フォームとタグ関連が使用不可になってしまいました（鬱）以前のコードから変えてないはずなのに全く検索結果が反映されません。検索結果のテンプレートバックアップを使用してもダメです。

時間のある時に調べようと思うけど、こいつは中々手強そうです...

2008/5/8追記 解決したー！

Read more