expression()

【木村家へようこそ　Welcome!To the Kimura family】

★プロフィール、リンク集、友達リストの応用例です。
プロフィールを例にとって説明します。

#back_link {
zoom: expression(this.style.zoom || (
this.innerHTML =
"プロフィール " +
"" +
this.innerHTML +
"", 1));white-space:normal;}

上をプロフィールのCSS編集画面に貼り付けプロフィールを確認すると、
ターゲットとなる「メインページに戻る」の上に表示されます。
下のような感じになります。

ID noren

IDの由来ジョン・レノンからです

プロフィール
メインページへ戻る

プロフィールというタイトルはプロフィールが書かれた上に表示したいもの。
そこで以下の方法でポジション指定してあげます。

ポジション指定したい対象が入ります

ポジション指定したexpression()が以下の通りです。

#back_link {
zoom: expression(this.style.zoom || (
this.innerHTML =
"プロフィール " +
"" +
this.innerHTML +
"", 1));white-space:normal;}

先ほど貼り付けたものを削除して、
上をプロフィールのCSS編集画面に貼り付けてみてください。
上では任意の数字を　３（トップからどのくらいの位置）　と、
２５０（左側からどのくらいの位置）　にしましたが、
プロフィールの文字がプロフィールの文章の位置に合うように任意の数字を
適当に変えてみてください。
この時プロフィールの文章の位置も

body { margin-left:任意の数字px; }
body { margin-top:任意の数字px; }

を使って調整してあげます。
expression()内で使うスタイルシートはインラインstyle属性を使ってください。
それだけで完結するスタイルシートです。
<○○　style="～～～～">　のように書かれています。
マージン指定やCSS編集画面で使ってるスタイルシートはhead要素内のスタイルシートです。
ポジション指定したときは、 は、削除して結構です。

          プロフィール
      ID   noren

      IDの由来   ジョン・レノンからです。



      メインページへ戻る

ポジション指定とマージンで調整したプロフィールのイメージが上です。

★以下は掲示板の応用例です。　掲示板のCSS編集画面に貼り付けてみてくださいね。

#write {
zoom: expression(this.style.zoom || (
this.innerHTML =
"BBS " +
"" +
this.innerHTML +
" <marquee behavior='alternate'width='270px'>一言お願いしま～す（*＾-＾*） </marquee> ", 1));white-space:normal;}

以下が掲示板のイメージです。

BBS
新規投稿

一言お願いしま～す（*＾-＾*）

＜＜過去の記事 (総件数: １件) ＞＞

No.1 From ノレン at 2008 02/08 20:19 編集返信

見本です

＜＜過去の記事 (総件数: １件) ＞＞
メインページへ戻る

掲示板ではターゲットの後ろの部分にもHTMLで書かれた文章を注入してみました。
以降の青文字が
ターゲットの後ろに来るHTML文章です。
ターゲットととなる「新規投稿」は<DIV>で囲まれています。
 を使ってターゲットとの段落を決めてくださいね。

★以下は日記の応用例です。　日記のCSS編集画面に貼り付けてみてくださいね。

#site_title {
zoom: expression(this.style.zoom || (
this.innerHTML =
"<marquee behavior='alternate'width='270px'>日々思うこと（*＾-＾*） </marquee> " +
"" +
this.innerHTML +
"", 1));white-space:normal;}

下が日記のイメージです

日々思うこと（*＾-＾*）

ノレン日記

・メインページへ戻る

2008 03/07 22:22
○×△・・・・・・・・・
・・・・・・・・・・・・・・・

ターゲットとなる日記のタイトルは<H1>で囲まれています
<H1>は一番大きな見出しをつけるという意味です
expression()で注入する文字の大きさは日記のタイトルの大きさと同じになります
応用例では注入する文字の大きさを指定しています

★画像・写真を貼り付けるには

expression()の基本形の青文字部分に
<img src='画像・写真URL'>
を使用します

応用例です　以下を掲示板のCSS編集画面に貼り付けてみてください

#write {
zoom: expression(this.style.zoom || (
this.innerHTML =
"<img src='http://jnoren.hp.infoseek.co.jp/candy74.gif'> " +
"" +
this.innerHTML +
" <marquee behavior='alternate'width='270px'>一言お願いしま～す（*＾-＾*） </marquee> ", 1));white-space:normal;}

下が上のexpression()を貼り付けた時のイメージです

新規投稿

一言お願いしま～す（*＾-＾*）

＜＜過去の記事 (総件数: １件) ＞＞

No.1 From ノレン at 2008 02/08 20:19 編集返信

見本です

＜＜過去の記事 (総件数: １件) ＞＞
メインページへ戻る

★BGMをつけるには

expression()の基本形の青文字部分に
<EMBED SRC='BGMのURL' autostart='true' width='140' height='30' loop='true'>
を使用します　数字などは好みで変えてくださいね

応用例です　以下を掲示板のCSS編集画面に貼り付けてみてください

#write {
zoom: expression(this.style.zoom || (
this.innerHTML =
"<EMBED SRC='http://norenj.hp.infoseek.co.jp/BGM/yoakemae.mid' autostart='true' width='140' height='30' loop='true'> " +
"" +
this.innerHTML +
" <marquee behavior='alternate'width='270px'>一言お願いしま～す（*＾-＾*） </marquee> ", 1));white-space:normal;}

下が上のexpression()を貼り付けた時のイメージです

イメージではautostart='flase'にしているので再生を押さないと音が鳴らないようになっています

★フラッシュ素材をつけるには

expression()の基本形の青文字部分に
<embed src='ファイルのURL' quality='high' bgcolor='背景色'width='素材の横のサイズ' height='素材の縦のサイズ'type='application/x-shockwave-flash'pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'></embed>
を使用します

応用例です　以下を掲示板のCSS編集画面に貼り付けてみてください

#write {
zoom: expression(this.style.zoom || (
this.innerHTML =
"<embed src='http://jnoren.hp.infoseek.co.jp/moji12dl.swf' quality='high' bgcolor='#FFFFFF'width='420' height='60'type='application/x-shockwave-flash'pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'></embed> " +
"" +
this.innerHTML +
" <marquee behavior='alternate'width='270px'>一言お願いしま～す（*＾-＾*） </marquee> ", 1));white-space:normal;}

下が上のexpression()を貼り付けた時のイメージです

フラッシュ素材提供は→フラッシュの素材屋さん

最後のほうは掲示板の応用例しかありませんが
管理人~~めんどうに~~多忙のため以上です
組み合わせを変えてみて色々試してくださいね
HTMLでかかれた文章内では　"　は使えませんので注意してくださいね
またHTML講座などのサイトでコピーしたタグはメモ帳に貼り付け
改行やスペースを取り除いてから使うことをお勧めします
またCSSの中に（）が使われてるものはエラーになります
HTML参考サイト
スタイルシート参考サイト
音楽を流す参考サイト
フラッシュ表示お助けサイト
カラーサンプル

★応用へのヒント・・その１

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

上は基本形ですが、オレンジ色の部分「" + this.innerHTML + "」がターゲットの文章部分です。
そして緑の部分「", 1));white-space:normal;}」が注入された文章の後に来る部分です。

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

上はターゲットを消すために「」を使ってます。
「」の代わりに、ポジション指定などしてみるのも面白いかもです。

★応用へのヒント・・その２

プロフィール

このような文字が作れる、虹色テキストメーカーで作ったタグがキラキラ以外は、そのまま使えます。
キラキラ文字は、エラーになってしまいます。

★応用へのヒント・・その３

足跡のページにキリ番ボードを作ってみてはいかがでしょうか。以下を足跡のCSS編集画面に貼り付けてみてください。

#messages caption {
zoom: expression(this.style.zoom || (
this.innerHTML =
" キリ番のご報告お待ちしています。 <TABLE border='1'bgcolor='yellow'bordercolor='green'> <TR><TD width='150'height='120' > <MARQUEE height='120'behavior='scroll'direction='up'> ３３３番・・○○さん ５００番・・○○さん １０００番・・自爆 </MARQUEE></TD></TR></TABLE> " +
"" +
this.innerHTML +
"", 1));white-space:normal;}

下が上のexpression()を貼り付けた時のイメージです。

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

キリ番のご報告お待ちしています。

３３３番・・○○さん
５００番・・○○さん
１０００番・・自爆

最近３０人の足跡
2008 03/07 16:22 noren　ポエムの投稿お待ちしています♪
2008 03/07 16:23 noren　ポエムの投稿お待ちしています♪
2008 03/07 16:24 noren　ポエムの投稿お待ちしています♪
・
・

解説です。

<TABLE border='テーブルの囲い線'bgcolor='テーブルの背景色'bordercolor='囲い線の色'> <TR><TD width='テーブルの幅'height='テーブルの高さ' > <MARQUEE height='スクロールする高さ'behavior='scroll'direction='up'> 文章が入ります 文章が入ります </MARQUEE></TD></TR></TABLE>

好みで色や数字は変えてくださいね。

楽しいHP作りの参考になれば幸いです。

HOME＞応用例