リキッドイメージ、エラスティックイメージ

リキッドレイアウトやエラスティックレイアウトにおいて、コンテンツのイメージも一緒に拡大縮小するようにする方法です。文字をデカくしたい人は図もデカくしたいでしょうから。
図は実際にやってみたスクリーンショットです。リキッドレイアウトなので、フォントサイズは変わっていませんが、画像が縮小しているのが分かるかと思います。

• 実際見せるより大きい画像（幅500pxとか）を用意する。
• HTMLのimgタグにwidth, height属性を書かない。
• CSSでimgにwidthを％かemで指定する（25%(=125px)とか）。
• 一応max-widthに最大幅を指定（max-width:500pxとか）しておき、モザイクにならないようにする¹ 。
• imgのpaddingも%かemで付けるべきでしょう。

CSSの例

div#content p img {
   width: 25%;
   max-width: 500px;
   float: left;
   padding: 2%;
}

Faux columnsをリキッドレイアウトに適用する

今度は拡大縮小の話ではありません。

Faux columnsとは？

通常、サイドバーとメインコンテンツの高さは違いますので、サイドバーに当サイトのようにグレーに色を塗ると、ボックスが途中で切れているのがよく分かってしまいます。

これの例えばサイドバーを、下まで全部グレーに塗ろうと思うと、wrapperになっているボックス要素の背景にグレー帯の縦1ピクセルの背景画像をCSSでrepeat-yするのが一般的でしょう。

CSS

div#wrapper {
   background: #fff url(images/bgbar.gif) repeat-y left top;
}

これをFaux columnsと言うそうです。良くやる手だと思います。当サイトはやってませんがｗ。

background-postionに％を指定するとは？

background-postionにpx（ピクセル）を指定した場合は、適用するボックスの左上から数えて指定したピクセルのところにbackground-imageの左上角が来るように配置されます。

ところが、%を指定した時は、「background-imageについて指定した%にあたる点が、適用するボックスについて指定した%に当たる点に来るように」配置されます（図）。

リキッドレイアウトの背景をずらさないように配置する

上記の背景位置に%を指定した時の挙動を、水平方向だけ使用して、リキッドレイアウトで画面を広げていって、サイドバーが広がっても、背景も広がるように見せます。

• とても長い、高さ1ピクセルの背景画像を作る（1000pxとか）。
• サイドバーの背景部分に色を塗って、コンテンツの部分は透過させます（透過GIFを作る）。透明でも長さは必要です。
  
• サイドバー部分の色を塗る長さは、リキッドレイアウト時に、上記の例ではdiv#menuにあたるところが何%になっているかをそのまま適用します。例えば背景画像を1000pxとし、div#menuのwidthが25%だったら、250pxの長さまで塗ります。
• CSSで背景の水平位置に指定した%を記述して、repeat-yします。

CSS

div#wrapper {
   background: #fff url(images/bg-liquid.gif) repeat-y 25% 0;
}

上記の例のように両側にサイドバーがある場合は、HTML構造上、もう一つ#wrapperを作るしかありません。

それと、上記の例でも同じですが、#wrapperの中身が全部フロートするとボックスの高さが無くなってしまいますので、footerとかを#wrapperに入れて、CSSでclear: both;とかしておかないと、背景も出なくなりますので、念のため。

そして、反対向きの上記のような透過GIFを作成して、今度は例えば75%から右を塗ります。CSSは以下のようになります。透過GIFを重ねているので左右どちらの背景も表示されます。

CSS

div#wrapper1 {
   background: #fff url(images/bg-liquid-left) repeat-y 25% 0;
}
div#wrapper2 {
   background: #fff url(images/bg-liquid-right) repeat-y 75% 0;
}

最後は図を作るのが嫌になりました．．．

1. IE6ではmax-widthは効きません。モザイクにしたくない場合は巨大な画像にすればOKです

先般、ある人が、CSSファイルをPHPとしてApacheに読み込ませることにより、サーバにはコメント入りCSSなのに、クライアントにはコメント無しのCSSを送るという技を使っていました。
.htaccessファイルにCSSのMIME typeを以下のように記述するだけです。

.htaccess

addtype application/x-httpd-php .css

コメントを消すだけではなく、CSSの中でphpで条件分岐してCSSコードを吐き出すことが出来るようになるので、ユーザーエージェントを判別して検索ボットさんだったらdisplay:none;を消す．．．とか出来るんですが、これは批判が来そうなので、機会があれば書くことにします。

最後に、コメントを除去したからクライアント側の表示が早くなるかというと、キャッシュするしくみ（XCacheやeAccerelator、phpモジュールなど）が無ければ、早くなることはないでしょう。早さを求めるならGZIPで送る等を考えた方がいいようです。

• CSS 2 : Box model
• CSS 2.1 WD : Box model

A.基本

• 垂直方向のマージンは相殺されて、長い方のマージンになる。フロートしたボックス、及びposition: absoluteのボックスは相殺されない。
  
• あるボックスがボックスに内包されている場合、かつ外側のボックスにpaddingとborderが無い場合、垂直方向のマージンは相殺されて長い方のマージンになる。
  
• ボックス内が空の場合は、自分自身の上下マージンも相殺されて長い方のマージンにまとまる。
  

B.Tips

Tipsというほどではありませんが、垂直マージンの相殺は、複数パラグラフの最初と最後のマージンと途中のマージンを同じにする効果があります。マージンを同じにするだけなら、最初のパラグラフにmargin-topでいくらとか、計算する必要はありません。

また、よくある

HTML

<div id="box">
   <p>このパラはmargin 20pxです。</p>
</div>

包含div#boxにmargin:10pxをして、

CSS

div#box {
   margin: 10px;
   background-color:#d5d5d5;
}

p{
   margin: 20px;
   background-color:#6699FF;
}

以下のような結果を期待しても、

以下のようになってしまいます。

これを期待したようにするためには、垂直方向のpaddingかborderを包含ボックスに入れれば良いです。

CSS

div#box {
   margin: 9px;
   padding: 1px;
   background-color:#d5d5d5;
}

p{
   margin: 20px;
   background-color:#6699FF;
}

これで、期待したとおり（上の方の例）の結果になります。

A.フロートの基本（フロートしたボックスとしないボックスの関係）

良くあるHTML構造でフロートしてみます。div#wrapperの中のp#content1だけをフロートさせます。content1とcontent2にmarginを設定し、paddingとborderは全てゼロです。

HTML

<div id="wrapper">
  <p id="content1">
     ・・・
  </p>
  <p id="content2">
     ・・・
  </p>
  <p id="content3">
     ・・・
  </p>
</div>

CSS

#wrapper {
   width: 450px;
   border: dotted 1px;
}
#content1 {
   float: left;
   width: 160px;
   margin: 20px;
}
#content2 {
   margin: 10px;
}
#content3 {
   margin: 0px;
}

• 要素のボックスをフロートするので、何らかの形で幅（通常width）が指定されていること。
• フロートされたボックスは外側のボックスの上、端（左右）に、マージンを縁として配置される¹
• テキスト：先行するフロートされたボックスに続くテキストは隣接する。隣接しなければ回り込む。
• ボックス：フロートされたボックスに続くフロートじゃないボックスは、フロートボックスは無かったかのように配置される。重なる場合はフロートされたボックスの背面にボックスの背景とボーダーが隠れる。

外側のボックスの高さについて

フロートボックスは、それを内包しているボックスの高さを広げてくれません。従って、上記の例で、#container2も（つまり内包ブロック全て）フロートさせると、以下のようにdiv#wrapperの高さはゼロになります。これを何とかするのがclearfixハックですが、他にも、ボックスの最後にカラの要素（フロートしてない）を入れてclear:bothすれば高さが出ます。

B.ボックスのフロート基本（フロートボックス同士の挙動）

• 内側のフロートボックスのマージンが、外側のボックスの端につっかかるまで移動する。
  
• 次のフロートボックスのマージン外縁は、最初のフロートボックスの端に突っかかるまで移動する。
• カラム落ち：外側のボックスに入りきらないと、フロートボックスは下段におちて外側のボックス端まで移動する。
  
• 上記の際に途中にフロートボックスの端があると、そこでつっかかって止まる。
  

C.ネガティブマージンによるフロート

通常HTMLの記述ではsidebarは以下のようにdiv#sidebarはdiv#maincontentの後にあります。
これをマイナスマージンでsidebarをmaincontentの左に持っていくやり方の考え方です。実際のレイアウト（fixed, liquid, elasticなど）については別途記事にする予定です。

HTML

<div id="wrapper">
  <p id="maincontent">
     ・・・
  </p>
  <p id="sidebar">
     ・・・
  </p>
</div>

float: left；の場合で説明します。

• 基本：左にフロートされたボックスの後に、さらに左にフロートされたボックスがある場合、後のボックスのマージン左辺が、前のボックスのマージン右辺より左にあってはならない。同じ事が右にフロートされたボックスにも当てはまる。
  
• 最初のボックスのマージン右辺を左側に大きく振ります（margin-right: -200pxとか）。
  
• 次のフロートされたボックスの左辺が、前のボックスの右辺を探しながら、右からやってくる。2007/5/24追記：下の図では外側の縁（#wrapper）に、前のボックスの右辺がつっかかって止まっているようになっていますが、実際には引っ掛かるのは左辺なので、最初のボックスのmargin-left:100pxとかがないとこのようになりません。すみませんでした
  
• 最初のボックスは、次のフロートボックスを左へ受け流し、左に振ったマージン右辺のところまで、次のボックスがフロートして配置される。
  
• 別のケースで、最初のボックスの左マージンを大きくとって、次のボックスの左辺を大きく右に振ります（margin-left: -200pxとか）。
  
• 後にフロートされたボックスの左辺が、前のボックスの右辺にぶつかるまで左へ流れて止まる。
  

D.IE6様対策

ここではフロートレイアウトに影響するバグと対策だけ記述します。

1.widthの解釈

有名なwidthの解釈の違いです。レイアウト上は致命的です。「widthのある属性にpaddingやborderを使わない」ということにつきます。
「floatにはwidthを指定する」「widthとpadding, borderを使わない」を合わせると、

floatした要素にはpadding, borderを使わない。

になります。paddingしたい場合はHTML構造で中にもう一つコンテナを作ってそこでpaddingやborderを指定するようにします。そうすればレイアウト上の苦労は少なくなります。

2.”have layout”問題

“have layout”プロパティを持つ要素はサイズや位置がコントロールされます。持ってない要素では親要素に従ってレイアウトされます。
“have layout”になるのは以下のような場合です。

1. body, table, tr, td, img, hr, input, select, textarea, button, iframe, embed, object, applet, marqueeの各要素
2. position: absolute; が指定された要素
3. float: が指定された要
4. display: inline-block; が指定された要素
5. width, height が指定された要素

“have layout”にはいろんな問題があります。以下は一部です。

テキストが回り込まずにボックスになる。

本来（フロートしてない）テキストに関しては、フロートしたボックスの周りに回り込むべきですが、haslayoutの場合、ボックス型になってしまいます。これを避けるには、haslayoutにならないようにするしかないようです。

widthを指定していても、幅が勝手に広がる。

widthを指定しているボックスは大きくしないであふれたテキストは次行に送って欲しいところですが、haslayoutの場合、はみ出したテキスト分だけwidthを無視して幅を広げてしまいます。これも、has layoutにならないようにするか、widthのあるボックスの内側にボックスを作ってそこにテキストを流すことで回避できます。

3. margin double 問題

私はこのマージンが二倍になってしまう問題に良く出くわします。ただ、見てすぐわかるのと、解決方法が簡単なので、覚えるだけです。フロートしている要素にdisplay:inline;を足すだけです。他のブラウザには影響しません。

4. その他のバグ

duplicate character　問題

ボックスの最後の数文字が、ボックスの下に重複して出現するバグです。連続する2つ以上のコメントが、フロートした要素のあいだに入っていることが2回以上あると発生します。
このような現象が出たら、連続するHTMLコメントを疑ってください。

peek-a-boo バグ

フロートした要素の後の、フロートしていない要素が、消えてしまう現象で、なぜかページをリロードすると出現します。この現象の発生条件は、①フロート要素の後にフロートしていない要素があり、②その後にclearした要素があり、それがフロートした要素に接触していて、③これらを内包する親ボックス要素にwidthやheightが設定されいない、かつ背景の色かイメージが設定されている。です。
解決するにはフロートした要素にposition: relative;を付け加えるだけです。

結局FirefoxかOperaでレイアウトを確認して、正しくレイアウトされてから、IE6で確認し、おかしかったら同じ現象のバグを検索するしかないでしょう。

1. 「垂直マージンの相殺」については別途記事にする予定ですが、フロートとは関係ありません。

同様のプラグインにhiromasa.zone :o) » wp-tegaki をつくってみる, Image Replacement WordPress Plugin - Development on a Shoestrin などが既にあるので、いまさら感がありますし、こっちはコードも汚いです（直し途中です）。基本的にやっていることは同じです。仕様は違いますが。

機能・仕様

• 関数（wp-djtr()）により、テンプレートでテキストを変換。
• インライン変換により、投稿中で変換するテキストを指定。
• 画像は背景透過（PNG-8形式なのでIEでもハックなしで透明になります）、背景色指定も可。
• widthで画像を分割するピクセル数を指定することによる、複数行にわたるテキストの画像化。
• ffamilyでフォントファイルを指定することによる複数のフォントの使い分け。
• 一度生成した画像はキャッシュして高速(?)表示

インストール

1. 以下よりzipファイルをダウンロードし解凍、wp-DJTRフォルダごとpluginsフォルダにアップロードして、activateしてください。
2. true typeフォント(ttf)は同梱していません。ttfファイルをwp-DJTRフォルダに入れてください。
3. cacheフォルダとconfig_djtr.phpに書込み属性を与えてください（７００でイケるはずですが）。
4. 'DJTRというメニューから、アップロードしたttfファイルを指定して保存（Update Options）、同ページ下部に文字画像が出ていることを確認してください。

ダウンロード　:　 wp-DJTR 0.5.5.zip (1591)

使用方法

1. インライン変換：投稿中の下記フォーマットを画像（imgタグ）に変換します。

   <!-- djtr [options] -->変換対象テキスト<!-- any text -->

   例：<!-- djtr fsize=20&fcol=#F30&width=400 -->ほげほげ<!-- -->

   

2. タグ変換：このブログの記事タイトルのようにテンプレート中で記述する際の関数です。

   wp_djtr( string text, [string options]);

   例： wp_djtr( get_the_title(), "ffamily=sazanami-gothic.ttf&width=500&bcol=#050" );

3. options

   フォーマット：　option1=value1&option2=value2&...

   fcol	フォントの色	fcol=#FOFOFO / fcol=#A0B
   fsize	フォントの大きさ(pt)	fsize=12 (12ポイント)
   bcol	背景色（transbgがfalseの場合）	bcol=#FAFAFA / bcol=#FFF
   transbg	背景色透明	transbg=true / transbg=false
   width	折り返しの幅(px) (imgタグを分割生成し、並べて出力)	width=400
   ffamily	フォントファイル名	ffamily=sazanami_gothic.ttf (大文字小文字を区別)

テンプレート変更の具体例

テンプレートを変更して記事のタイトルを画像化する場合の変更の例です。

記事タイトルを表示する、the_title();を探します。記事を表示するテンプレート（index.php, single.php, archive.phpなど）には必ずあるはずです。デフォルトテーマのindex.phpでは以下のような記述です。

PHP

<h2><a href="<?php the_permalink() ?>" ..(中略).. <?php the_title(); ?></a></h2>

上記の<?php the_title(); />の部分を、以下のように変更します。

PHP

<?php wp_djtr( get_the_title(), "ffamily=hoge.ttf&width=500" ); ?>

注意点等

• 描画スピードを得るため、ＤＢではなく、デフォルト設定をファイル(config_djtr.php)で渡します。同ファイルが書込み可能であれば、optionsメニューから設定するとこのファイルが変更されるはずです。変更できない場合は直接ファイル内容を変更してください。
• フォントファイル(.ttf)を直接ダウンロードさせないように.htaccessファイルを同梱しています。
• GPLライセンスです。改変、再配布は自由です。ただしコードは作者の意図に反して非常に分かりにくくなっています
• インライン変換は２つのコメントに挟まれたテキストを２つのコメントごとimgタグに変換します。プラグインを外すと普通のテキストとして表示されます。
• 簡単な禁則処理をします。処理されない文字があれば、djtr.phpの行頭／行末禁則文字（コメントしてあります）に追加してください。
• テストは不十分です。おそらく不具合も一部有るかと思います。使って不具合があれば、コメントでご報告いただけると助かります。

変更履歴

• 2007/4/19: Ver0.3.9 リリース
• 2007/4/20: Ver0.4.0 基本的な禁則処理をするようにしました。追い出し処理します。字間は調節しません（できてません）。
• 2007/5/1: Ver0.4.3 PHP4でエラーが出るバグを修正。ファイルをUTF-8で保存。
• 2007/5/9: Ver0.4.9 初期設定時のバグを修正。get_wp_djtr関数を追加。プラグイン説明からのリンク修正。
• 2007/5/30:Ver0.5.0 stripos（PHP4でエラー）を使わないように変更。
• 2007/5/31:Ver0.5.5 オプション画面での動作を変更。エラー処理のバグを修正。

(1)the_tagをサポート今回はサポートしない?代わりにWidget対応。
(2)core JSをjQueryへ変更

の２つが気になります。

(1)については、UTW(Ultimate Tag Warrior)の立場がどうなっちゃうのか？ということで、(2)については、過去のprototypeをベースにしていたプラグインが動かなくなる可能性があるということです。

(1)はUTWとは共存可能なような気がするので、いいのですが(2)がより深刻で、確かprototype.jsとjQuery.jsは今でも共存できないのではないでしょうか。
出来れば問題ないのですが、例えば私が使用してるプラグインだとshare thisは、WPに付属しているprototype.jsを読み込んでいますので、しWPに付属しなくなったら当然動きません。

ただ、ここら辺何かしらサポートがあるかも知れませんので、対処はver2.2が出てから考えるということでしょうかね。

1. 遅延を発表
2. 5/1現在、1週間以上のリリース遅れ

う～ん、透過背景がまだちょっとおかしいか？

• dojoが呼び込むファイル（srcファイル群）が多いせいか、表示までに時間がかかり、重くなること
• dojoが作成するコードがXHTMLバリデータでしかられまくること

dojo.jsの導入が簡単なだけに、ちょっと残念です。以下は導入のメモ。

ライブラリ名称：　Dojo 0.4.2　AJAX Edition
配布元：　The Dojo Toolkit | The JavaScript Toolkit

ファイルのアップロード

圧縮ファイルをダウンロードして解凍すると、中にデモとか説明とかいろいろ入っていて、何が必要なのか分からんが、とりあえず全部まとめてdojoとかのディレクトリとしてアップロード。なぜか、”src”フォルダ全部と”dojo.js”だけでは動かなかった。他にも必要なファイルがあるらしい。

javascript の記述

<head>に下の javascript コードを記述。

HTML

<script type="text/javascript" src="path-to-dojo/dojo.js"></script>
<script type="text/javascript">
    dojo.require("dojo.widget.*");
    function load_app(sURL){ location.href=sURL; }
</script>

「function load_app()」は、アイコンをクリックしたときの動作を設定しますので適当に変えます。

<body>のアイコンを表示させるところに下記タグを記述。

HTML

<div dojoType="FisheyeList"
   itemWidth="100"
   itemHeight="100"
   itemMaxWidth="200"
   itemMaxHeight="200"
   orientation="horizontal"
   effectUnits="2"
   itemPadding="10"
   attachEdge="top"
   labelEdge="top"
   enableCrappySvgSupport="true">
<div dojoType="FisheyeListItem"
   onclick="load_app('リンクURL');"
   iconsrc="path-to-img.png"
   caption="タイトル">
</div>
<div dojoType="FisheyeListItem"
   onclick="load_app('リンクURL');"
   iconsrc="path-to-img.jpg"
   caption="タイトル">
</div>
...
</div>

FisheyeListの設定項目

1. itemWidth, itemHeight : 縮小時の画像サイズ
2. itemMaxWidth, itemMaxHeight : マウスオーバー時の画像サイズ
3. orientation ： “horizontal”が横並びで”vertical”が縦
4. effectUnits : 拡大／縮小するアイコンの範囲
5. itemPadding ： アイコンの間隔
6. attachEdge ： アイコンが拡大する方向（固定する端）
7. labelEdge ： タイトルを表示させる位置
8. enableCrappySvgSupport : svgを利用した拡大縮小

dojo:Fisheyeが変更した後のHTML

Fisheyeがロードされると前出のHTMLは以下のようになります。場合によってはCSSで見た目を設定してあげます。

HTML

<div class="dojoHtmlFisheyeListBar" style=" ">
   <div class="dojoHtmlFisheyeListItem" style=" " dojoinsertionindex="0">
      <img dojoattachevent="onMouseOver;onMouseOut;onClick"
         dojoattachpoint="imgNode"
         class="dojoHtmlFisheyeListItemImage"
         src="path-to-image.png"
         style=" "/>
   <div dojoattachpoint="lblNode"
      class="dojoHtmlFisheyeListItemLabel"
      style=" ">タイトル</div>
   </div>
</div></div>

1. もうちょっとしたら

ところが先日、 個人的に勝手に私のCSSの師匠（？）と思っている大藤幹さんが、

多くのサイトでは、このハックが必要となる要素に対して「clearfix」というクラス名をそのまま追加指定して使用していることが多いが、それではXHTML側に表示に関する指示を組み込むのと同じだ。クラス名はハックと切り離して考え、構造的にその要素にふさわしいものを指定し、その名前をハックのセレクタ部分で指定するようにしよう。

出典：Web Designing 2007年4月号 p115

と書いていらっしゃるのを見て、ごもっともと思ったと同時に、このことについて考えてみたくなりました。というのも、私がclearfixを記事にしたとき、同氏の本「スタイルシート　サンプル＆リファレンス」の「ボックスの最後でfloatをクリアする」というサンプルを参考にしたからです。そこではclass名に「clearfix」を使っていました。

「構造とプレゼンテーションの分離」の前提

構造（structure）とプレゼンテーションの分離は「そうしようとする」ことを前提とします。構造とプレゼンテーションについてはW3CのWeb Content Accessibility Guidelines 1.0を参照してください。また、ここでは「idを使用するかclassを使用するか」という議論は別の機会にすることとします。

文書は、適切な構造を表す要素でタグ付けし、見栄えなどの表示方法を制御するためには、表示を制御するための要素や属性を使用せずに、スタイルシートを利用する。

Class名はsemantics（意味論、記号論）に配慮して付ける

Class名に”red”とかはまずいです。W3Cの”Use class with semantics in mind - Quality Web Tips“によれば、

良いClass名
“warning”, “important”, “downloadableImage”, “submenu”は良い名前です。これらはその要素が意味することを説明しており、変えることはなさそうです。”warning”は見た目がどう変わろうとwarningでしょうから。

悪いClass名
“border4px”, “lighttext”,”prettybackground”は悪い名前です。borderは5pxにするかもしれないし、backgroundはしばらくすれば「pretty」じゃなくなるかもしれません。lighttextをCSSでdarkなtextに変えたら、HTMLのClass名もdarktextに変えたくなるでしょうし、その際に漏れが発生しそうです。

となっています。要すれば、

CSSが適用されなかったとして、それでも意味を持っているか？

という事だと思いますが、いかがでしょうか？

ちなみに最新のCSS3のCSS3 module: W3C Selectorsにおけるclassの説明箇所ではclass=”pastoral blue aqua marine”という例が（正しい使用法として）出てきます（笑）。

微妙な例

微妙だと私が思うのは以下のような、実際のCSSで見かけるClass名です。

1. “oddline”,”evenline”,”lastline”
2. “flex”
3. “thumbnail”
4. “noprint”
5. “priority1″
6. “hide”

あまり沢山は思いつきませんでした。すべてCSSでどうにかすることを前提にしてClassを付けているという意図において、表現に関するClass名ではないでしょうか。

例えば”oddline”,”evenline”は良くある、奇数行と偶数行で交互に背景色を変えて見やすくするためだと思われます。現状（CSS2.1では）Class名を付けずにCSSで交互に背景色を指定することは簡単ではない（？）でしょう。なので、このClass名は肯定され得ると考えます。また”oddline”は構造的な意味を表していると考える人もいるでしょう。

class=”hide”というのは完全に表現に関する指示になるのでよろしくないということになるかと思いますが、構造上、読者に見せるつもりはないという意味(semantics)も成り立つのではないかと思えてなりません。

問題のclass=”clearfix”について

例えば、（HTML）文書に「左図のように、．．．」と書いてあるとき、厳密には「CSSはユーザー側でも変えられるから必ずしも左に図があるとは限らない」となり、従ってこの文章がよろしくないということになるのでしょうか。だとすれば、「以下のように．．．」「次の．．．」も同じようによろしくないということになります。しかし、「左に図がある」ことを意図するため、その図の要素にclass=”alignleft”と記述することはsemanticと言えなくもない？と思うわけです。

同様にclass=”clearfix”は、floatしている要素があって、そのブロックでclearしたい、しなければ（HTMLに）書いてあることが正しく理解できない、ということを表すために使用するなら良いような気がします。

理屈上はclearfixすることを前提としてHTMLを記述するのがいけないのです。わかってます。本音は、要するに（class=”clearfix”などは）便利なので、これから出てくるであろう、「これは悪」みたいな風潮を出来るだけ「ゆるく」したいだけなのです

• ・レイアウトのCSS変更は、WordPressのテーマ”Sandbox“の”skin”という方法を利用しています。
• ・スライドバーのアイデアはWordPressのテーマ”Hemingway Ex“から拝借しました。実装スクリプトはオリジナルです。
• ・開閉ボタン（？）の明滅、およびスライドバーの開閉は、JavaScriptライブラリ”byteFX“を使用しています。
• ・macのdockのようなレイアウト選択の動作は、JavaScriptライブラリ”dojo widget“の”fisheye”を利用しています。¹

結局使いやすいレイアウトは見ている環境や人の好みによって違うので、ユーザーに選択してもらうのが一番ではないかということです。

但し．．．

• ・一部のレイアウトはIEでは正しく表示されていません。修正中です。
• ・さすがにこれだけライブラリを読み込むと重くなりすぎるのでdojoについては（使ってみたかっただけなので）しばらくしたら外そうと思います。²

なので、スライドバー開閉ボタンは分かりにくくしてあります。

1. 現在は使用していません。
2. 外しました。

１．水滴を乗せる画像を用意して、新規レイヤーを作成。

すみません適当な画像がありませんでした。

２．新規レイヤーに楕円を描画

分かり易くするため、黒で描画します。また、ここではシェイプレイヤーを使っていますが普通の図形で構いません。

３．レイヤースタイル→「スクリーン」を適用

レイヤーをダブルクリックしてレイヤースタイルボックスを表示します。そして、全体の描画モードをスクリーンにして、下絵を透過させます。

４．ベベルとエンボス→「ベベル（内側）」を適用

水滴のふくらみと光沢を出します。ここで重要なのは「シャドウモード」で「比較（明）」を選ぶことにより、影を薄くすること。あと「高度」を高め（私は45°以上を推奨します）にすることです。サイズを変えることによって水滴のふくらみが変わりますので調整してください。

５．ドロップシャドウ→「乗算」「10～15%」を適用

水滴の下の影を出します。

６．光彩（内側）→「乗算」「20%程度」「灰～黒」を適用

水滴の内側に出来る影を出します。影の線が強く出ないようにします。チョークは「0」、この水滴の大きさだとサイズは「10px以上」にした方が良いでしょう。

立体感を出すためにさらにシャドウ（内側）を微量適用しました。

【完成（その１）】

一応完成です。このレイヤースタイルを新規スタイルに登録して、ブラシで書いてあげるといろんな形の水滴が出来ます。水飴みたいですね。すみません。

本当は下絵が水の屈折で歪んでなければいけませんね。それをちょっとやってみたいと思います。

1.クリッピングマスクを作成

下絵（レイヤー1）のレイヤーをaltキーを押しながら、楕円（シェイプレイヤー）の上へ持っていき、コピーを作成。「レイヤー1のコピー」を右クリック→「クリッピングマスクを作成」。
これで、楕円で切り取られたレイヤーができました（一番下のレイヤーを不可視にすると分かります）。ただ、「スクリーン」モードで描画しているので覆い焼きのようになってしまいました。

2.描画モードの修正

このままでは上のレイヤーと下のレイヤーが「スクリーン」モードで2重に描画されるので、修正します。
まず、楕円のレイヤーを選択、「描画モード」→「比較（明）」に変更。

3.水滴の球状感を出す

一番上の「レイヤー1のコピー」を選択、メニュー→「フィルター」→「変形」→「レンズ補正…」を選択。「歪みを補正」スライドを樽状方向へ少し移動させる（劇的に歪ませると変です）。下絵が残ってぶれたようになりました。

4.下絵を消す

楕円のレイヤーをダブルクリックしてレイヤースタイルパネルを表示。「ノックアウト（抜き）」を「浅い」に変更。

【完成（その２）】

一番上のレイヤーに軽くブラー（ガウス）をかけました。

元ネタはこちら：Howstuffworks “How Invisibility Cloaks Work”
元ネタにはハリーポッターの透明マント？を思い出すと書いてあるが、私はドラえもんの「透明マント」を思い出した（世代の差か？）。

これ以外にも、ちょっとだけすごい技術があったけど、そういうブログじゃないのでこのくらいにしておきます。

ネタバレ：実はそんなに大した技術じゃなかった．．．

Howstuffworks “The Complete System”

画像置換にはいくつかの手法があるのですが、どれも長所と短所があり、方法の選択に悩まされました。画像置換の方法について私なりの分類でまとめておきます。

なお、画像置換以前にテキスト画像の動的（自動）生成の方法にも種類があるのですが、これについては「PHS+CSS Dynamic Text Replacement(改）」をご参照下さい。ここではDTR（Dynamic Text Replacement）という手法を使っています。

まず、テキストを画像に置換する方法により、以下の2種類に分類できるかと思います。一般に画像置換というと１を指している場合が多いです。

1. CSSの背景画像（background-image）に置換する
2. <img>タグで置換（挿入）する

初めにまとめますが、以下を含む「全てのブラウザーで正しく表示できる方法」はありません。

1. Mac版IEやWin版IE5などの古いブラウザ
2. テキストブラウザ
3. 音声ブラウザ

また、一般にCSSオン＆画像表示オフのブラウザでテキストをどう表示するかが問題になります。JavaScriptで対処するという手もありますが、その場合はJavaScriptオフだったらダメです。一般にブラウザ設定で問題になるのは以下の点です。

1. CSSがオンかオフか
2. 画像表示がオンかオフか
3. JavaScriptがオンかオフか
4. テキストの大きさ設定

1. CSSの背景画像に置換する方法。

テキストをCSSで非表示にして、背景画像を代わりに表示する方法。背景画像を使用しつつ、CSSが切られていたりCSS非対応なブラウザには相応のテキストを表示する。

1-A. CSSオフの時はテキストを表示する。CSSオン＆画像オフの時は何も表示されない方法。

1-A-1.Fahrner Image Replacement(FIR) :
最も初期の画像置換方法。無意味な<span>タグが入る。CSSオン＆Imageオフの状況で何も表示されない。音声ブラウザで読み上げられない。

HTML

<h3 id="header">
    <span>Image Replacement</span>
</h3>

CSS

#header {
   height: 25px;
   background-image: url(header-image.gif);
}
#header span {
   display: none;
}

1-A-2.Phark Method :
text-indent:マイナス値によりテキストを非表示する方法。不要な<span>が無い。CSSオン＆Imageオフで何も表示されない。

HTML

<h3 id="header">
   Image Replacement
</h3>

CSS

#header {
   text-indent: -9999px;
   overflow: hidden;
   background: url(header-image.gif);
   width: auto;
   height: 25px;
}

1-B. CSSオフの時はテキストを表示し、CSSオン＆画像オフの時もテキストを表示させる方法。

1-B-1.single pixel img FIR :
透明な1ｘ1ピクセルのgifを挿入し、そこのaltにテキストを入れることにより、CSSオン＆Imageオフでそのaltを表示させる。無意味な<img>と<span>タグが入る。音声ブラウザで読み上げられない。

HTML

<h3 id="header">
   <img src="transparent1x1.gif" alt="Image Replacement" />
   <span>Image Replacement</span>
</h3>

CSS

#header {
   height: 25px;
   background-image: url(header-image.gif);
}
#header span {
   display: none;
}

1-B-2. Gilder/Levin Method :
背景画像をテキストの前面に持ってきてテキストを見えなくする方法。CSSオン＆Imageオフでは下のテキストが表示される。無意味な<span>タグが入る。また、画像は透過であってはならない。さらにブラウザでテキストを巨大にすると、画像の下からはみ出して見える。現在までのIRの中で最も優れているといわれている（by Web creators 2007年4月号）。

HTML

<h3 id="header">
   <span></span>Image Replacement
</h3>

CSS

#header {
   height: 25px;
   position: relative;
}
#header span {
   background: url(header-image.gif) no-repeat;
   position: absolute;
   width: 100%;
   height: 100%;
}

いろいろな事情があってのことでしょうけれど、「CSSオン＆Imageオフ」という状況に対処するために、空タグを入れたり、透過GIFをあきらめるというのは「？」な気がします。

1-B-3. Thierry Image Placement :
背景画像をテキストの前面に持ってくるために、透明のgifを<img>で配置する、または<a>アンカーを入れる方法。CSSオン＆Imageオフでは下のテキストが表示される。<a>アンカーを入れる場合は無意味ではない（マークアップはおかしい）。画像は透過であってはならない。CSSオン＆Imageオフ状況下でテキストを巨大にすると、はみ出し部分が欠ける。

HTML

<h3>
<a title="hoge" href="#"></a>
Image Replacement
</h3>

CSS

h3 {position:relative}
h3 a {
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	width:500px;
	height:1.7em;
	min-height:25px;
	background:transparent url(header-image.gif) no-repeat;
}

2.imgタグで置換する方法（未完）

<h?><img src=”header-image.gif”></h?>として、置換する方法。CSSのオン、オフに左右されない。Imageオフの場合はalt（=置換対象テキスト）が表示される。（一般にそのままでは）<a>タグのマウスオーバーに反応しない。

1. 既存テキストはimgタグのalt=に入れる方法
   クローラーが<h?>内の「テキスト」を読む場合は正しくクロールされない（？）。一部のtext-browserではaltを表示してくれない。

HTML

<h3>
   <img src="header-image.gif" alt="Image Replacement" />
</h3>

2. 画像を既存テキストの上に持ってきて隠す方法
   クローラーとtext browserの問題に対処。画像が透過であってはならない。altに既存テキストを入れている場合、画像オフで既存テキストが2つ表示される。ブラウザでテキストを大きくすると下からはみ出す。

HTML

<h3>
<img src="header-image.gif" alt="Image Replacement" />
Image Replacement
</h3>

２は調査中です。CSSによる方法を詳しく調べたわりに、実際採用さいようしているのは「2-1.既存テキストをimgタグのaltに入れる」というシンプルな方法です。画像を動的に生成するため、CSSの背景画像urlを動的に指定するのが面倒であることと、複数行に分かれる場合、画像も複数に分かれるため、結局<span>で囲まなければいけないことなどから、シンプルな方法を選びました。

今後このまま、<a>のマウスオーバーに反応させる方法を考え、その後に、本当に「クローラーがaltを見てくれないのか？」調べてみようと思います。

１．インストールと初期設定

ブログを公開し、始めの記事を書くまでについて。

MTはDBの選択肢が多く、その設定でとまどいますが、いろんなサイトに導入方法が書いてあるので問題ないでしょう。インストールしてから公開までも短期間で済みます。StyleSwitcherでCSSを選べばそれなりの見栄えになりますので、そこから投稿が開始できます。

WPの場合、まずME（Multilingal Edition）と本家どちらにするか？ですが、本家WPでは日本語が表示できない、または支障が起こるのでは？という疑問があると思います。意外とMEと本家版の違いを説明したサイトがありませんでした。実際には、本家WPでも日本語表示は問題ないといって良いでしょう。管理メニューの一部が（.moを入れても）英語のままになったり、日付表示がおかしくなったりしますが、すぐ修正できます。MEの方は知らないのでコメントできません。

さて、WPのインストールですが、これはMTと同様に簡単だと思います。私の場合、インストール後の設定やテーマの選定がMTより時間がかかりました。これは基本機能とやりたいことの差だと思います。MTの場合は単体で一応最低限の機能は付けてある感じだったのに対して、WPの場合は単体での機能より、プラグインやテーマでカスタマイズしていく設計思想なのだと思います。ただ、

• Tag機能やサイドバーWidgetまでプラグイン対応なのはどうかと思います。というのも、実際にプラグインを導入しようとして検索すると、TagまたはWidgetのプラグインは複数あり、どれが標準のもの（？）なのか迷うからです。
• テーマも、私は初めデザインでテーマを決めましたが、それがプラグインに対応しているかどうかまで見極めないと、自分でカスタマイズしてからでないと思ったような表示にならないということで、最初の投稿までにカスタマイズが必要になってきます。この辺は「WordPressインストールしたら始めにやること」をご覧下さい。
• もう一つ、「ブログロール」という他サイトへのリンクを管理する機能があるのですが、これはなぜプラグインではないのか、ちょっと変な感じがしました。しかも、初期設定でWordPressの開発者の方々のブログにリンクが張られているのも、戸惑いました。どうなんでしょう？

２．再構築時間と表示時間

• MTは基本的にスタティック・パブリッシングで、テンプレート毎にダイナミックパブリッシングにすることも出来ます。ただ、MTのダイナミックパブリッシングでは使用できないプラグインが発生することや、テンプレートの修正を伴うなど、気軽に切り替えられるものではありません。スタティック・パブリッシングでは再構築に相応の時間がかかります。レンタルサーバの環境によっては再構築中にtime outしてしまうこともあるようです。
• WPは動的生成しかありません（静的にページを作るプラグインもあるようです）。再構築には全くストレスがありません。
• 表示時間ですが、環境や記事数などで違うので一概にどちらが早いとは言えません。ただ、あらかじめhtmlを吐き出してあるMTのスタティックより早いということは無いと思います。実際にはブログツールの問題ではなく、ページ内のコンテンツ量、画像、CSS、AJAXなどjsファイルの容量などの方が表示時間に影響すると思います。少なくとも私はWPを使っていると、いろんなプラグインを入れたくなる衝動にかられますので、表示時間は遅くなっていきます
• なお、WPはHTMLヘッダーへの応答開始までの時間（phpを実行しているが出力はしていない時間）があります。以前ちょっとした実験をしたところ大体1000字程度の記事が800を越えると、パフォーマンスが落ち始めました。ただこれも、DBへのアクセス回数が多い（プラグインを入れている）と、その影響の方が大きいと思います。

３．エディター・アップローダ

• 記事を入力するエディターは重要ですが、基本構成ではリッチエディタ（TinyMCE）のあるWPに軍配が上がります。MTもリッチエディタをプラグインで入れられるので、カスタマイズすればどちらも 同じになるでしょう。
• 問題はWPのpタグを取る挙動（wpautop関数に関連）です。慣れましたが、始めはいくらpを入れてもリロードするとキレイに消えるので、面食らいました。Getting Startedなどのドキュメントに書いておいて欲しいと思います。
• アップローダもプラグインでどちらも使いやすくできるので優劣付けがたいです。

４．英語の必要性

• MTは日本語のドキュメント、サイトが充実しており、プラグインでも英語を意識することはほとんどありませんでした。一方WPでは、英語は避けて通れないのではないでしょうか。プラグインは日本語化も進んでいるとはいえ、まだ使えるもので英語のものも多く、当然それらは設定画面も英語です。インストール方法はみんな同じなので問題ないですが、使い方はプラグインによって様々なので、そこは英語を読まないといけない場面も出てきます。ただ、難しい英語ではないので根気よく読むことさえ出来れば問題ないと思います。

５．その他

• ５－１．複数投稿者対応：

  MTもWPもCMSとしても使い方を想定してか、投稿者を複数登録することが出来ます。WPの方は、権限管理もできます。そしてほとんどのテーマが 各記事の下のメタ情報部分に’posted by (author)’を表示します。ただ、大部分の人が個人のブログとしての使い方をしている実情からは、複数投稿者対応こそ拡張機能にして、いちいち posted byを記事の下にデフォルトで入れる必要は無いと思います。

• ５－２．データのインポート・エクスポート：

  データのインポート・エクスポートはWPが様々な他のブログ形式からのインポートやエクスポートをサポートしている点で優れているような気がしますが、バックアップという意味では、MTの方がDB丸ごと保存するのでやや便利です。WPはタグはエクスポートしてくれないのでしょうか（不明）？

• ５－３．シングルページ対応

  WPでは、記事とは独立したページの作成・管理の機能が優れています。MTのようなテンプレートでの独立ページの作成も可能ですし、そのテンプレートを利用して日付とは関係ない固定ページを作ることもWPでは簡単です。

• ５－４．トラックバックの扱い方：

  WPでは、デフォルトではトラックバックとコメントは同じコメント扱いになっていて、管理画面上もブログ上も同じになっています。初め「トラックバック機能がない！」と勘違いしてしまいました。MTでは別扱いです。

• ５－５．マルチバイト文字への対応：

  これもMTでは問題ないのですが、WPの場合、いくつか気をつけなければならない点があります。例を挙げると、パーマリンクのURIの設定（WPでは投稿スラッグという）をタイトルから自動生成するときに、MT→日本語は取る。日本語しかなければエントリーの番号をURIにする。WP→日本語も英語もURLエンコード（”%20%20″みたいな文字がズラーと続く）する。という違いがありますが、MTの方がスマートです。

• ５－６．WPの面白い（すごい）基本機能：

  WPは基本はシンプルみたいに書きましたが、widgetやtagは基本ではないのに対して、以下のような凝った基本機能があります。

  • smilies（ ←これ）は基本機能
  • akismetというスパムフィルタが非常に優秀
  • 管理画面がAJAX（Prototype+Scriptaculous）
  • 管理画面のダッシュボードでブログにリンクしているサイトを自動表示
  • 記事の入力中の自動保存機能

  一方で、akismetのwidgetがxhtml validatorを通らなかったり（マークアップがおかしい）、記事中の<div>を勝手に<p>に変えてくれたり（wpautopの機能）、たまに変なところに<p>を入れ</p>を入れ忘れてくれたりして、荒削りな部分もあります。ただ、頻繁な更新を続けており、今でも使いやすいものが今後さらに使いやすくなっていくことは間違いないでしょう。

６．プラグイン、そして．．．カスタマイズ性

• プラグインの数はどちらが多いか分かりません。とにかくMTもWPも数え切れないほどプラグインが出ています。WPの方がインストールするプラグインが多くなることは確かです。ただ、MTに比べるとプラグインの設定ページへのアクセスは楽です。
• APIについてはMTはモジュールを厳格に（？）分けたPerlのAPIがあり、ドキュメントも日本語でかなり公開されています。一方のWPはPHPのAPIがありますが、ドキュメントはMTに比べると未完で、他人のプラグインを見ていると、適当にWPの内部関数を呼び出して使ったりしていることもあります。MTの本体コードを弄ろうとは思いませんでしたが、WPの場合、本体コードを弄りたくなります。まぁ、それだけフレキシブルだということです。

• 私見ですがカスタマイズの中毒性はWPの方が高いと思います。私などは、ともすればカスタマイズしていて記事を書かない日が増えてしまいます（本末転倒！）。でも、他のWordPressでブログしてる人で、メインは別の話題でもWPカスタマイズ関連カテゴリーもある人や、「WordPressの醍醐味」と言って、プラグインやテーマの入れ替えを好む方がMTよりも多い気がします。
• fc2やlivedoorなどのブログサービスより、MTであれWPであれ、カスタマイズが面白いから、かゆいところに手が届くからやる人が多いのではないでしょうか。だとしたら、WPの方が弄り甲斐があるような気がします。PHPが分からないということで敬遠される方もいるかと思いますが、カスタマイズしたい気持ちがあれば、初めPHPが分からなくても他人のコードをマネしているうちになんとなく何処をどうすると変わるのか分かるようになってきます。そのうちPHPも読めるようになってくると思います。

（未完）

CSS

div#header {…
div#container {…
div#sidebar {…
div#footer {…

みたいな感じでwidthなどのスタイルを入れ、レイアウトを決めてます。問題はその後で、例えば#container内と#sidebar内に”title”というclassがあった場合、これはどこに書くべきなのだろうか。div#container .titleとdiv#sidebar .titleとかに分けて、（同じ記述だったとしても）#containerのグループと#sidebarのグループに分けて記述するのでしょうか。以下は、ある海外サイト（ブログ）のCSSのグループ化の例をCSSのコメントから抜き出したものです。

TEXT

I.  Universal Reset ： aタグなどのリセット

II. html and body　　　　： html要素とbody要素

IV. typography　　　： いわゆる文字スタイルに関する事項

　　1. headings

　　2. header

　　3. sidebar

　　4. footer

　　5. listings

V.  layout　　　　　　　：いわゆるレイアウトに関する事項

VI. navigation　　　　：いわゆるナビゲーション（矢印など）に関する事項

VII.images and gravatars　：画像に関する事項

VIII.comments　　　　：コメント（ブログの）に関する事項

IX. forms 　　　　　　　　：フォームに関する事項

これは「目的別？」にグループ化されている例ですが、これだと、実際には何処に書けば良いのか分からない場合も多いです。次の例です。

TEXT

1. MARGINS, PADDING, ETC., FOR ALL LAYOUT DIVS　　　：レイアウト関連

2. GENERAL TAGS FOR CONTENT, MOSTLY　　　　：一般タグ指定

3. HEADINGS　　　　　　　　　　　　：ヘディング・ヘッダー部分

4. COMMENTS STUFF　　　　　 ：コメント部分

5. SIDEBAR STUFF　　　　　　　　：サイドバー部分

6. FOOTER STUFF　　　　　　　　 ：フッター部分

7. COMMON MULTI-PURPOSE ELEMENTS　：一般的な多目的要素

この例だと、７の一般的な多目的要素に大量に書くことになります（実際そうなっていた）。最後に私がこれかな？と現在思っている分類です。かなり細かいですが。

TEXT

1.Universal Reset

2.Layout blocks　 ：ブロックのレイアウト

3.Blocks inside　　：ブロック毎の指定

　　3-1. Header　　　　：ヘッダー部分

　　3-2. Menu　　　　　：メニューバー

　　3-3. Sidebar　　　 ：サイドバー

　　3-4. Footer　　　　：フッター

　　3-5. Comments　 ：コメント（フォーム含む）

　　3-6. Contents　　：記事関係

　　　　3-6-1. Title　　　　：記事タイトル関係

　　　　3-6-2. Meta　　　 ：記事の日付などの表示

　　　　3-6-3. Article　　 ：記事本文関係

　　　　3-6-4. Nav　　　　 ：ナビゲーション関係

4. Page specific　： 表示ページで特有

5. Browser specific　：ブラウザー毎に特有

２で各ブロック（３の分類による）のレイアウトを決定しているが、レイアウトに関係のないものは全て排除し、３の各ブロック毎の記述に入れる。

３では徹底的にID(#sidebarなど)によるグループ化、その中の細かい設定はそのID（ブロック）内に。

４ではブログで例えればアーカイブページのみの設定など、デフォルトの設定を上書きする形で指定。

５のブラウザー毎の設定は実際には別ファイルを読み込ませるようになっている。hackなども使用。

実際にはこれでも例えば3-6-3Article（記事本文に関する記述）の部分に大量のスタイルが集中してますが、目的のスタイルが何処に記述されているか、大体の検討が付きます。

書き始めるときにルールを作成し、目次を作ってそのグループ内に記述することを心がければ、後の微調整の時に大分やりやすくなるはず。

CSS

@charset "utf-8";
body {
   margin: 0;
   padding: 0;
   background-color: #ababab;
   color:#333;
   font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
   line-height: 1.5;
}

bodyには比較的いろいろ設定します。CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記で語られているので割愛。
font-familyについては、CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキにもあり、Web雑誌でも日本語はこの順序を推奨しているようです。
ユニバーサルセレクタ(*)を使わないのは、*{ margin : 0 }はもう古い！？ | Emotional Web他の最近の流れから。

次に、CSSを見ていると”Universal Reset”というグループ名で出てくる一般的なHTMLタグのデフォルトを変更する関係。設定内容はそのデザインでそれぞれなので、設定する先だけ見ていただければ良いかと思います。設定し忘れていて意図しない表示にならないようにするためのものです。

CSS

h1,h2,h3,h4,h5,h6 { line-height:1.6; }
p,li,dt,dl { line-height:1.6; }
p { margin:0 0 1em 0; }
ul li { list-style-type:none; }
a img { border:0; }
a:link {
   color:#078D00;
   text-decoration:none;
}
a:visited {
   color:#189B12;
   text-decoration:none;
}
a:hover {
   text-decoration:underline;
}
a:active {
   color:#666;
}
blockquote{
   margin-left:1em;
   padding-left:1em;
   border-left:2px solid #CCC;
   color:#CCC;
}
pre{
   width:100%;
   padding:1em 0;
   overflow:auto;
   border-top:1px dotted #333;
   border-bottom:1px dotted #333;
}
table{
   width:100%;
   border-spacing:2px;
   margin:1.5em 0;
}
table th, table td{ padding:0.3em 0.75em }

blockquoteとpreは、ブログに特有かと思います。それ以外は、一般的な内容を設定しておきます。

最後に、classで指定しておくと便利なもの。これらはHTMLの特定要素をCSSで指定するのではなく、逆にHTML上でclassを指定することにより見た目を操作しようとするものです。

CSS

.hidden {
   display: none;
   visibility: hidden;
}
.alignright {
   float: right;
}
.alignleft {
   float: left;
}
.clear {
   clear: both;
}

HTMLを見ていてclass=”hideen”とかなっているだけで、レイアウトが分かるという意味では使い勝手が良いので、私は必ず入れてます。
あとは、clearfixハックも必ず入れてます。自分用のテンプレートとしてこのような設定を一回作っておけば、便利かと。

これで全部です。このリストはテーブルにした方が良さそうですね．．見づらい。

テーマにもよるが、一般にはコメントを表示する”comments.php”か、個別記事を表示する”single.php”のテンプレートに以下のコードを、入れる。

PHP

<?php if ('open' == $post->ping_status) : ?>
   <h3 id="trackback-url"><?php _e('Trackback URL', 'hoge') ?></h3>
   <input onfocus="this.select()" readonly="readonly" value="<?php trackback_url(); ?>"
       class="tb_url" id="tb_url" name="tb_url" accesskey="x"/>
<?php endif; ?>

1行目は記事がトラックバックを受け取る設定になっているかを判断。

2行目はh3ではなくて”<label id=…”の方が普通かもしれない。2行目の後半_eはご存じ翻訳ですが、無しでそのまま普通に<h3>Trackback URL</h3>でもいい。

3行目は入力ボックスを表示してreadonly=”readonly”で変更できないようにしている。ボックスをクリックすると、onfocus=this.select() のJSにより、全選択の状態になる。あとのclassとかidとかはCSSのため。

CSSで背景を暗くしたりしておくと入力ボックスと間違えず、よりよい。 ちなみに私は以下のようにしてます。

CSS

input#tb_url {
   font-family: "courier new", courier, monospace;
   background-color: #CCC;
   font-size: 1em;
   padding: 0.2em;
   width: 50%;
}

１．参照(Reference)

参照は、オブジェクトへのポインター（実態が含まれている番地）を表す。この参照によるオブジェクトへのアクセスは、JavaScriptらしい柔軟なコードの書き方を可能にしている一つの要因だろう。

オブジェクトは複数のプロパティを含み、プロパティ自体がオブジェクトとなりうる。複数の変数が同じオブジェクトを参照している場合には、その内容を変えれば全ての同じ参照をしている変数（内）の値は変わる。

JavaScript

var obj = new Object(); 　　　//空のオブジェクトを生成
var objRef =obj; 　　　　　　　//オブジェクトを参照する
obj.theProperty = true; 　　　//オブジェクトにプロパティを作る
alert( obj.theProperty === objRef.theProperty);　//参照変数にも同じプロパティが。

もう一つの例を。

JavaScript

var items = new Array( "あ","い","う"); //新しいArrayオブジェクトを生成
var itemsRef = items;　　　　　　　　　　//オブジェクトを参照する
items.push("え");　　　　　　　　　　　　　//pushはArrayオブジェクトに定義されているメソッド
alert( items.length  == itemsRef.length); //lengthももとからあるプロパティ

要するに参照されている先のオブジェクトが変更されるのであって、変数自体は変わらない。

最後にこの場合はどうなるだろうか。

JavaScript

var item = "hoge"; //新しいstringオブジェクトを生成
var itemRef  =  item; //オブジェクトを参照
item +=  "baa"; //元のオブジェクトに"baa"を追加
alert( itemRef );

実は3行目の時点で新しいstringオブジェクトが生成されて”hogebaa”となりitemはそれを参照する。itemRefはもとのオブジェクト”hoge”をポイントしたままである。
従って、4行目では”hoge”が表示される。この程度なら分かるけれど、実際にコードしているときはオブジェクトが分かれることを意識しないと、バグが発見できないときがある。

２．クロージャ

JavaScriptでは、「関数の中に関数があるとき、内側の関数は外側の関数のローカル変数を保持する」。訳が分からなかった。例を挙げてみる。

JavaScript

var obj = document.getElementByID("main") // id="main"の要素を見つける
obj.style.border  =  "1px solid red";　　　　　　// そのborderのスタイルを変更
setTimeout( function({ obj.style.display = 'none'; }, 1000); // 1秒後にそのスタイルを消すコールバック関数をセット
//アラートを表示する一般的な関数
function delayedAlert( msg, time ) {
   setTimeout( function({ alert( msg); }, time );
}
delayedAlert( "hoge", 2000 );

3行目のsetTimeoutはJavaScript特有の書き方だ。通常はsetTimeout ( ‘aFunction()’, time);として別のところにaFunctionを書きたくなるはず。上記のような書き方が出来るのは、クロージャのおかげだ。つまり、setTimeoutで定義されているfunction内の変数objは1行目で取得したobjを1秒後に参照する。

後段のdelayedAlertも同じく内部の関数のmsg,timeは外側の関数のmsg, timeの参照を保持している。

このクロージャを使って、グローバルスコープから変数を隠蔽することがある。以下のようなコードは、prototype.jsでも見ることができる。クロージャについて思い及ぶまで、なぜこんな風になっているのか分からなかった。

JavaScript

(function(){　　　　　　　　　　　　　　// 匿名関数でスコープを一段下げる
   var msg = "sage";　　　　　　　　// msgはグローバル変数ではない
   window.onunload = function(){ // グローバルオブジェクトwindow.onloadに関数を付加
      alert( msg );　　　　　　　　　　　// msgはクロージャによる参照
   } 　　　　　　　　　　　　　　　　　　　// close function
}(); 　　　　　　　　　　　　　　　　　　　// close function and execute

３．関数のオーバーロード

JavaScriptでは関数のオーバーロードは簡単にできることではないのだが、いろんな手法によってこれを可能にしている。
関数のオーバーロードのためには（１）引数の数を特定、（２）引数の型を特定、の２つが必要である。（１）についてはarguments変数によって関数内で参照可能である。

JavaScript

function sendMessage( msg, obj ) {
   if (arguments.length == 2) obj.handleMsg( msg );
   else alert( msg );
}
sendMessage( "wwwwwww。");
sendMessage( "orz", {
   handleMsg : function( msg ) {
      alert( "やってしまった" + msg );
   }
});

（２）の引数の型については、typeofステートメントを使う。

An example to be come.

４．スコープ

JavaScript

var foo = "test";
if ( true ) {
   var foo = "hoge";
}
alert( foo );
function test() {
   var foo = "old test";
}
test();
alert( foo );

5行目のalertではfooは”hoge”になり、最終行のalertではfooは”hoge”のままである。
JavaScriptにおける変数のスコープは関数内であり、ブロックは関係ない。ブロックスコープの言語になれた人には厄介な現象が起こるので注意が必要である。

実際にはfoo（グローバル変数）はwindowオブジェクトのプロパティになる（OperaとSafariの一部バージョンを除く）。従って、

JavaScript

var test = "test";
alert( window.test);

は、”test”になる。しかし、グローバルスコープで明示的に宣言されていない変数の場合は、関数内で使用されてもグローバル変数になるから気が抜けない。

JavaScript

function test() {
   foo = "test";
}
test();
alert( window.foo );

このfooは”test”になる。

firebugのコンソールでいろいろやってみると勉強になる。

ちなみに他のWordpressのサイトも確認させてもらったが（失礼！）動的なサイトでは、prototype.jsが2個あるいは3個、読み込まれているところが多かった。これは何とかしたいのだが、プラグインのスクリプトを直接書き換えると、どれで（prototype.jsを）読み込ませて、どれで読み込ませないかの管理が大変になる。また、プラグインのバージョンアップの度に書き直したくない。

そこで、header.phpに修正を加えることにした。どのプラグインも、”wp_header();”が呼び出された際に<script>タグを書いているようなので、書き込んだ後でそこからprototype.jsの読み込み行を削除して、最後にwordpress本体に付随しているprototype.jsを「１つだけ」読み込ませるために書き込んでから、吐き出す。

PHP

<?php
function undup_prototype($contents) {
   $replaced = preg_replace("/<script.*prototype\.js.*>.*<\/script>.*\n/i",'',$contents);
   if($replaced !== $contents) {
      $replaced = '<script type="text/javascript"
         src="'.get_bloginfo('wpurl').'/wp-includes/js/prototype.js"></script>'."\n".$replaced;
   }
   return $replaced;
}
ob_start('undup_prototype');
<strong> wp_head();</strong>
ob_end_flush(); ?>

wp_head()の前後に上記のように追加するだけ。

それで以下のように、prototype.jsは１つだけ読み込まれ、トータル読み込み時間も減ら．．．なかった。読み込み時間にはあまり影響しないみたい。もしかしたらヘッダーから削除している間に垂れ流した方が早いかも？