Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

IE でも CSS Sprite を使ってみる

Nov302008
Vote:
http://bizcaz.com/archives/2008/11/30-165843.php
Categories: Tools
Tags: CSS
Social Bookmark

Prev Page: Wowzio
Next Page: まぜまぜモンスター

こんにちわ^^

以前にも同じ質問があったのですが、わたしのサイトのコメントフォームの textarea で、フォーカスインしたときに背景画像を変更する方法を教えて欲しいとのことだったのでご紹介します。

そんなに大したことやってるわけじゃないんですよ。
Firefox や Safari などのモダンブラウザでは CSS Sprite を使って背景画像を変更するだけですみます。

CSS Splite

#comments-open-text textarea {
width: 99%;
height: 320px;
background-color: #3b3b3b url(bg_textarea.gif) no-repeat right top;
}
#comments-open-text textarea:focus {
background-color: #6b6b6b;
background-position: right bottom;
}

CSS Sprite ポイントは赤字の部分で、わたしのサイトでは右のような画像を用意してますので、フォーカス時の背景画像の位置を Y 軸方向にスライドさせます。その際必ず高さを指定するのを忘れてはいけません (￣∇￣)b

モダンブラウザに限っては上記の方法で実現することができますが、ご存知のように IE では hover やら focus といった擬似要素に対応してません。
なので、behavior という拡張機能を使って JavaScript の力に頼るしかありませんね。拡張機能を使う例としてアルファチャンネル付き PNG 画像の表示なんかがメジャーでしょうか。

IE PNG Fix - TwinHelix

拡張機能を使ってもいいのですが、今回は普通に JavaScript で対応します。
具体的には onfocus イベントと onblur イベントで実現します。

イベントを使って CSS Splite

MT4.2 の「コメント」テンプレートモジュール内のコメントフォームをカスタマイズします。

コメントフォーム抜粋

<div id="comments-open-text">
<label for="comment-text"><__trans phrase="Comments">
<mt:IfAllowCommentHTML><__trans phrase="(You may use HTML tags for style)"></mt:IfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comments-open-captcha"></div>
<div id="comments-open-footer">
<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />
<input type="submit" accesskey="s" name="post" id="comment-submit" value="<__trans phrase="Submit">" />
</div>

青字の部分がコメント入力欄にあたるところですが、赤字の部分に見慣れないものがありますね。
これはフォーカスイン時に mtCommentFormOnFocus() が実行するよう指示してます。この mtCommentFormOnFocus() というのは mt.js 内の 144 行目辺りにあります。
これを流用してしまおう (●＞∀＜●)／というのがわたしの実装です。

以下にその手順を記します。

背景画像を作成

CSS Sprite を使って画像表示するので、上記サンプルのような背景画像を各自のお好みで作成します。
たとえば、わたしのサイトの画像は 320 x 320 の画像を縦に 2 つ並べて 1 つの画像ファイル( 320 x 640 )を作成してます。上が通常表示時の画像で下がフォーカスイン時の画像となってます。
ここで大事なのは高さを一定にすることです。Y 軸方向に 320px ずらすことで裏面の画像を表示させる必要があるからです。

また、必ずしも 2 つの画像を 1 つにする必要はありません( 別々に画像ファイルを指定 )が、画像ファイルの読込みが 1 回で済むので最初のフォーカスイン／フォーカスアウト時のチラつきがなくなります。
CSS 追加

上記で説明したスタイルを CSS に追加します。高さは各自で作成した画像サイズに合わせて変更してください。また背景色も各自のサイトに合わせて変更します。
くどいようですが、上記 CSS Sprite は画像イメージを Y 軸方向にスライドさせる場合の例です。X 軸方向にスライドさせる画像ファイルを作成した場合とは異なります。
mt.js 内にフォーカスイン／アウト時の処理追加

まず、mt.js 内にフォーカスインとフォーカスアウト時に背景画像を CSS Sprite するようコードを追加します。具体的には以下のようなかんじに変更します。
mt.js 変更後
1. <mt:Ignore>オリジナルコード
2. function mtCommentFormOnFocus() {
3. // if CAPTCHA is enabled, this causes the captcha image to be
4. // displayed if it hasn't been already.
5. mtShowCaptcha();
6. }
7. </mt:Ignore>
9. function mtCommentFormOnFocus(elem) {
10. if ('object' == typeof(elem)) {
11. var text = document.getElementById('comment-text');
12. text.style.backgroundPosition = 'right bottom';
13. }
14. mtShowCaptcha();
15. }
17. function mtCommentFormOnblur(elem) {
18. if ('object' == typeof(elem)) {
19. var text = document.getElementById('comment-text');
20. text.style.backgroundPosition = 'right top';
21. }
22. }
赤字のようにオリジナルコードを MTIgnore ブロックタグでコメントアウトします。そして青字と緑字を追加します。
ここでは各イベントに合わせて CSS Sprite による画像のスライドを行うだけです。

prototype や jQuery といった JavaScript フレームワークを使ってもいいけど、mt.js 内では依存させないようにしてます。
追加したら保存して再構築してください。
「コメント」テンプレートモジュールを変更

最後に「コメント」テンプレートモジュールを以下のように変更します。
「コメント」テンプレートモジュール変更後
1. <div id="comments-open-text">
2. <label for="comment-text"><__trans phrase="Comments">
3. <mt:IfAllowCommentHTML><__trans phrase="(You may use HTML tags for style)"></mt:IfAllowCommentHTML></label>
4. <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus(this)" onblur="mtCommentFormOnblur(this)"></textarea>
5. </div>
赤字の部分が変更点です。mtCommentFormOnFocus() のパラメータに this と追加し、フォーカスアウト時の処理として onblur イベントに先ほど mt.js に追加した mtCommentFormOnblur() を実行するよう追加してます。

追加したら保存して個別記事アーカイブのみ再構築します。