So-net無料ブログ作成

背景を装飾する(覚書)。 [管理用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)(※背景サンプル)
nice!(0)  コメント(0) 
共通テーマ:趣味・カルチャー

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。