背景を装飾する(覚書)。 [管理用Memo]
棋譜再現Flash"フラ盤"に背景画像を挿入する方法が、フラ盤の作者であるFireworksさんのブログに掲載されています。設定の仕方はいくつかあるようですが、<table>~</table>タグで指示するのが一番簡単でしょうか。
----------(ソースサンプル)----------
<table border="0" cellpadding="0" cellspacing="0" background="http://www011.upp.so-net.ne.jp/***/***/xxx.jpg">
<tr>
<td>
<object data="http://www011.upp.so-net.ne.jp/***/***/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www011.upp.so-net.ne.jp/***/***/flaban.swf">
<param name=FlashVars value="kifuName=http://www011.upp.so-net.ne.jp/***/***/xxxxxx.kif">
<param name="wmode" value="transparent">
</object>
</td>
</tr>
</table>
--------------------------------
・<table>タグ内の"border"は枠の太さ、"cellpadding"はセルの余白、"cellspacing"はセルの間隔です。いずれも"0"に設定します。"background"が背景画像の設定で、ここで画像ファイルを指定します。尚、"background"は<td>タグ内でも設定可能です。即ち最初の三行は、
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://www011.upp.so-net.ne.jp/***/***/xxx.jpg">
と書いても同じように描画されます(※table内にセルが1つしかないからです)。
・<param name="wmode" value="transparent">は重要なタグで、このタグによってフラ盤の背景色を透明化しています。このタグがない場合には、背景は(デフォルトの)薄い緑色になります。
他の箇所は、通常の設置手順と同じです。
私はこのブログで、実際に上記の方法で背景画像を指定していますが、<table>タグの代わりに<div>タグを使う方法もあるようです。
----------(ソースサンプル)----------
<div style="background-image: url(http://www011.upp.so-net.ne.jp/***/***/xxx.jpg); background-repeat: no-repeat;">
<object data="http://www011.upp.so-net.ne.jp/***/***/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www011.upp.so-net.ne.jp/***/***/flaban.swf">
<param name=FlashVars value="kifuName=http://www011.upp.so-net.ne.jp/***/***/xxxxxx.kif">
<param name="wmode" value="transparent">
</object>
</div>
--------------------------------
<object>~</object>内は先程と同じ。上下に付属する部分だけが変わります。
※詳しい説明はFireworksさんのブログを参照のこと。
※<table>,<div>等、HTMLのタグに関してはHTMLタグリファレンスなどを参照。
【参考】
・三間飛車のひとくちメモ 更新履歴帳(Fireworksさんのブログ)
・棋譜再生Flashの貼り付け方・参(※通常の設置手順)
・〆( ̄▽ ̄)メモメモ...(6)(※背景サンプル)
・〆( ̄▽ ̄)メモメモ...(7)(※背景サンプル)
----------(ソースサンプル)----------
<table border="0" cellpadding="0" cellspacing="0" background="http://www011.upp.so-net.ne.jp/***/***/xxx.jpg">
<tr>
<td>
<object data="http://www011.upp.so-net.ne.jp/***/***/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www011.upp.so-net.ne.jp/***/***/flaban.swf">
<param name=FlashVars value="kifuName=http://www011.upp.so-net.ne.jp/***/***/xxxxxx.kif">
<param name="wmode" value="transparent">
</object>
</td>
</tr>
</table>
--------------------------------
・<table>タグ内の"border"は枠の太さ、"cellpadding"はセルの余白、"cellspacing"はセルの間隔です。いずれも"0"に設定します。"background"が背景画像の設定で、ここで画像ファイルを指定します。尚、"background"は<td>タグ内でも設定可能です。即ち最初の三行は、
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://www011.upp.so-net.ne.jp/***/***/xxx.jpg">
と書いても同じように描画されます(※table内にセルが1つしかないからです)。
・<param name="wmode" value="transparent">は重要なタグで、このタグによってフラ盤の背景色を透明化しています。このタグがない場合には、背景は(デフォルトの)薄い緑色になります。
他の箇所は、通常の設置手順と同じです。
私はこのブログで、実際に上記の方法で背景画像を指定していますが、<table>タグの代わりに<div>タグを使う方法もあるようです。
----------(ソースサンプル)----------
<div style="background-image: url(http://www011.upp.so-net.ne.jp/***/***/xxx.jpg); background-repeat: no-repeat;">
<object data="http://www011.upp.so-net.ne.jp/***/***/flaban.swf" width="490" height="350" type="application/x-shockwave-flash">
<param name="movie" value="http://www011.upp.so-net.ne.jp/***/***/flaban.swf">
<param name=FlashVars value="kifuName=http://www011.upp.so-net.ne.jp/***/***/xxxxxx.kif">
<param name="wmode" value="transparent">
</object>
</div>
--------------------------------
<object>~</object>内は先程と同じ。上下に付属する部分だけが変わります。
※詳しい説明はFireworksさんのブログを参照のこと。
※<table>,<div>等、HTMLのタグに関してはHTMLタグリファレンスなどを参照。
【参考】
・三間飛車のひとくちメモ 更新履歴帳(Fireworksさんのブログ)
・棋譜再生Flashの貼り付け方・参(※通常の設置手順)
・〆( ̄▽ ̄)メモメモ...(6)(※背景サンプル)
・〆( ̄▽ ̄)メモメモ...(7)(※背景サンプル)
コメント 0