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

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