English Here


木村家へ
  ようこそ

Welcome!To the Kimura family





エクラのプロフィールや掲示板などに文字を書き込んだりするCSSの紹介です。
expression()はCSSの中でJavaScriptを使えるようにするダイナミックプロパティで、
IE5以上で作動する独自拡張です。
JavaScript部分はHTML内の文字をターゲットにしてターゲットの前後に縮小または拡大した
HTMLで書かれた文章を注入するものです。

以下が基本形です。 #○○○部分を書き換えることによって各ページに使えます。
青文字のところを書き換えて使います。赤文字の部分は書き換えたり消したりしないように注意してください。
特に最初の文章が入る後の "  を消さないように注意してくださいね。

#○○○ {
zoom: expression(this.style.zoom || (
this.innerHTML =
"
ここにターゲットの前に入るHTMLで書かれた文章が入ります。" +
"" +
this.innerHTML +
"
ここにターゲットの後ろに入るHTMLで書かれた文章が入ります。", 1));white-space:normal;}

#○○○部分をプロフィールやリンク集、友達リストは、 #back_link 
掲示板は、 #write
日記は、 #site_title
足跡は、 #messages caption または、 #counter に変えます。
また最後の行の 1 は、縮小も拡大もしないという意味です。

それぞれターゲットになる文字は、
プロフィール、リンク集、友達リストは「メインページへ戻る」
掲示板は、「新規投稿」
日記は、「日記のタイトル」
足跡は、「最近30人の足跡」または「総アクセス数○○HIT(since・・・)」です。
以下が「最近30人の足跡」をターゲットにした足跡の応用例です。
足跡のCSS編集画面に貼り付けてみてください。

#messages caption {
zoom: expression(this.style.zoom || (
this.innerHTML =
"

足跡ありがとうございま~す(*^-^*)

" +
"" +
this.innerHTML +
"
", 1));white-space:normal;}


総アクセス数: 16819 HIT (since 2007 12/04 11:14)

足跡ありがとうございま~す(*^-^*)

最近30人の足跡

2008 03/07 16:22 noren ポエムの投稿お待ちしています♪
2008 03/07 16:23 noren ポエムの投稿お待ちしています♪
2008 03/07 16:24 noren ポエムの投稿お待ちしています♪


上のような感じになります。
対象が入ります
は対象になるものを動かすタグです。

expression()のHTML文章の中で表示場所を指定しなければ、
表示場所はターゲットとなる文字の表示場所に従います。
この場合「最近30人の足跡」は、タグで書かれています。
はテーブルにタイトルをつけるタグで、
テーブルに対しセンタリングします。
よってexpression()で注入されたHTML文章もセンタリングします。


は改行の意味です。
「総アクセス数○○HIT(since・・・)」はもともと
で囲まれています。
は前後の文字を改行して表示するタグです。
expression()ではタグを使っています。
は前後の文字を改行しないで表示するタグです。
ですからターゲットになる文字が改行を意味するタグで囲まれてないとき、
expression()のHTML文章の中に
を使用しなければ同じ行に表示されます。
上の場合
は、3つ使われてますが、
3つとも削除すると「最近30人の足跡」と同じ行に表示されます。
「総アクセス数○○HIT(since・・・)」とは1段落差で表示されます。
ターゲットがどのようなタグで囲まれてるかによって、
改行タグの
を使い分けてくださいね。


ターゲットを、 #counter 「総アクセス数○○HIT(since・・・)」にした場合は以下のようになります。
足跡のCSS編集画面に貼り付けてみてくださいね。

#counter {
zoom: expression(this.style.zoom || (
this.innerHTML =
"

足跡ありがとうございま~す(*^-^*)
" +
"" +
this.innerHTML +
"
", 1));white-space:normal;}


下のような感じになります。

足跡ありがとうございま~す(*^-^*)
総アクセス数: 16819 HIT (since 2007 12/04 11:14)
最近30人の足跡

2008 03/07 16:22 noren ポエムの投稿お待ちしています♪
2008 03/07 16:23 noren ポエムの投稿お待ちしています♪
2008 03/07 16:24 noren ポエムの投稿お待ちしています♪


最後に注意点としては HTMLタグを書くときに " は、使えません。 ' に書き換えてください。
参考サイト
http://useyan.x0.com/s/html/expression/
expression()の使用上の注意点も下のほうに書いてありますので参考にしてくださいね。
その他の応用例は、こちら