こんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。中でも、CSS3のtransform やドロップシャドウ系は、ブログで写真を見せる場合などに凝った演出が出来るので、仕様が正式に決まるのが待ち遠しいですね(そう言えば、ボックスのドロップシャドウ box-shadowですが、CSS3の勧告候補から消えた のかなぁ)。便利な仕様だとは思うのですが。

　ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。で、例によってIE系はCSS3の対応は遅れています。とは言っても（これまたいつものように）transformに関しては、IEは実にIE5.5の時から似たようなものを実装していました ！　なので、それらを駆使すれば、CSS3相当のtransformが実装できそうです。

　transformが使えると何がうれしいって、例えば以下のようなポラロイド写真みたいなギャラリーがCSSのみで簡単に出来ます。実は下のショットはIE8でのものです。

　画像の回転に関して、FirefoxやWebKit系は、画像の中心を回転軸として回転させます(なので回転軸は移動しない)。これは直感的で分かりやすいです。これに対して、IEは回転軸が指定した回転角度によって刻々と移動します。なので、標準仕様に似せようと思うと、回転軸を動かさない様にするための補正計算が必要になります。この計算にちょっとてこずりましたが、何とか回転軸が動かないような補正をすることが出来ました。

　で、とりあえずモノになりそうなものが出来たのでデモサイトを挙げておきます。画像へのマウスオーバーで拡大なんてのもCSSのみで出来るのですが、それもIEで動くようにしています。

　

→「CSS3 Transformを使ったギャラリー(IE互換) 」

　FirefoxやSafariでは、完全にCSS3のみで実現していて、IEでは、IE特有のフィルター機能をJavaScirptを通して操作しています。ボックス要素のドロップシャドウについては、以前、まぁまぁ凝ったスクリプトを書きました が、新たに要素を追加しないといけないなど、あまり納得のいくものではありませんでした。今回ドロップシャドウに関しては、あまり凝ることはせずに、IEのフィルター機能を素直にそのまま使っています。

progid:DXImageTransform.Microsoft.dropshadow(enable=true,OffX=3, OffY=7, Color='#11000000', Positive='true');

　実は最近知ったのですが、フィルターのColorには通常のRGB形式だけでなく、透明度も指定できる#AARRGGBBの形式が使えるので、黒色の透明度を高くすればより影っぽくなります。CSS3レベルのぼやけた感じまでは出ませんが、まぁ、これで良しとしましょう。

　使い方は、簡単で、形はHTCファイルですが、JavaScriptの外部ファイルとして動作するようにしてます。これは、以前のドロップシャドウのスクリプトと同じです。それをIEのみが解釈する条件コメントの中に書いています。

<!--[if IE]>
 <script type="text/javascript" src="js/css3transform.htc"></script>
<![endif]-->

　これを書いておくだけで、スタイルシートに記された

     -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);

などを解釈して、IEのフィルター機能(Matrix Filter)で同等のことを表現します。デモページにあるように、IEでもCSS3のtransformはおよそ実現できるみたいです(まぁ、そもそもがIEのMatrix仕様を参考に実装したのでしょうけど)。

　このスクリプトを添付しておきます。

CSS3  

---

　こんばんは。コメントで、タグエントリーを総表示するときの仕様についてアドバイスがあり、確かにそうだなと思ったので。現状では、タグモードのとき(このサイトに表示されているタグのアイコンをクリックした時)、下のショットのように、縦にリスト表示されます。

　これは、アーカイブ表示に準じてそうしたのですが数が増えてくると縦表示は見辛いですね。もっとも、スタイルシートの制御で横に並べることは出来ますが、タグクラウドの特徴のひとつである「エントリー数に応じて文字の大きさを制御する」というところまではしていませんで(PHPプログラムのmodules/tags.inc.phpの方で)。

　なので、modules/tags.inc.phpをタグクラウド表示に見合うように修正しました。適切にスタイルシートを設定すると以下のような表示になります。このショットはこのサイトでの例なのですが、タグ数が少ないのであまり雲って感じではないんですが、増えてくると見栄えも違ってくるでしょう。これよりもうちょいタグ数が多い、個人ブログの方はこんな感じ です。

　ちなみに、テーマ「ベーシック」での、この部分の表示は以下のようにしています。参考になれば。クラス名などは従来通りです。

/*---------------------------[ タグ 一覧表示用 ]----------------------*/
div.tags-list {
  width: 450px;
  margin: 30px auto;
  background: url(Images/clouds96.png) right top no-repeat;
}
div.tags-list ul {
  list-style: none;
  margin-top: 60px;
}
div.tags-list ul li{
  margin: 0 6px 3px 6px;
  white-space: nowrap; /* 日本語ワードの改行を適切にするための指定 */
  display: inline;
  text-align: center;
  zoom: 1;
}
div.tags-list h3 {
  margin: 2em auto;
  color: navy;
}

　これに対応したmodules/tags.inc.phpを添付しておきます。

　あ、追記ですが、この添付ファイルの最初の方に、

$minFontSize = 13;  // 最小文字サイズ(ピクセル)
$maxFontSize = 36;  // 最大文字サイズ(ピクセル)

という2行があります。これはタグ表示の文字サイズを制御するためのものです。エントリー数に応じて、タグの文字が大きくなっていきますが、際限なく大きくなっても困るので、上限を設けています。ピクセル指定です。適宜、調整して下さい。

---

　タイトルだけだと何のことやら分からないと思いますが、ppBlogの「テーマ管理」では、テンプレートのHTMLやスタイルシートを修正した際に、どういう風に変更が反映されるか、実際にプレビューボタンで確認することが出来ます。そのプレビュー画面では、以下のように「戻る」のリンクでもとの編集画面に戻ります。

　従来だと、この戻るリンクで戻ると、マウスのカーソルは長々しいテキストエリアの先頭に戻っているので、再度編集部位を探しつつ、そこまでスクロールする必要がありました(Ctrl+Fで検索するのが常套手段ですが)。スタイルシートの編集では、テキスト量が多い傾向にあり、直前の編集部位を探し出すのは大変です。

　なのでその辺を改善してみました。やりたいのは以下のことです。

　テキストエリアのスクロールバーの位置はJavaScriptから制御することが出来ます。具体的には、scrollTop を使います。流れとしては、プレビューボタンを押したタイミングで、スクロール量を取得(scrollTopで可能)、プレビューから戻ったときに、取得した値を指定すれば良いわけです(指定もscrollTopです)。実際には、テキストエリアだけではなく、ブラウザのスクロールバーもscrollTopで制御できるので、この２つのスクロール量を保持するようにしています。

　やってみると意外と簡単に実装できました。もっと早くやっておけば良かったです。試されたい方は、以下のutils.phpとmodules/theme.inc.phpでどうぞ。

　こんばんは。普段はブラウザとしてFirefoxを使っています。で、先ほどブログの方で記事を投稿したら、Firefoxだけ(厳密にはGeckoエンジンブラウザ)に読み込ませるツールチップのスクリプトが動作していないことに気付きました。

　Firefoxは、画像などで多用されるTITLE属性内の改行や改行コードを無視します。実は仕様としては正しい振る舞いです。でも、TITLE属性の改行が有効な方がブラウザの使い手には優しいと思うので、ppBlogでは、FirefoxでもTITLE属性内の改行が有効になるようなスクリプトを用意しています。

　で、その読み込ませる際に、次のようにしています。

 if(client.Gecko) oParts.loadScript(baseURL + 'js/firefoxtooltip.js');

　このブラウザ判定は、window.GeckoActiveXObject でやっていたんですが、これがいつの間にやら認識されなくなったようです。実は、今日Firefoxの自動アップデートがありバージョンが3.5.6になりました。で、リリースノートを見てみると、どうやら

http://www.mozilla-japan.org/security/announce/2009/mfsa2009-71.html

が関係している模様。でも、これで認識しなくなるのかなという疑問もありつつ、この部分を修正しました。最新のoParts.jsを添付しておきます。