WordPress で Flash を表示させるときに生じる諸々の問題とその解決方法を説明します。
Flashで生成したソースをコピー＆ペースト
FlashMXで[ファイル｜パブリッシュプレビュー｜HTML]から表示させたページのソースをコピーして、WordPressのHTMLエディタでペーストします。
ソース:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN=""> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>
表示結果（画像）:
貼り付けたソースの一部が表示されてしまいます。
表示したページのソース:
<p><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br /> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"<br /> WIDTH="200" HEIGHT="50" id="flash_sample" ALIGN=""><br /> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="/image/flash_sample.swf" quality=high bgcolor=#FFFFFF WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN=""<br /> TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED><br /> </OBJECT></p>
WordPress のエディタによって p タグと br タグが自動で追加されてしまっています。
Flashで生成したソースを1行にしてコピー＆ペースト
前記のソースの<OBJECT>～</OBJECT>に含まれる改行を無くし、1行にして、WordPressのHTMLエディタへペーストします。
ソース:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="50" id="/image/flash_sample" ALIGN=""> <PARAM NAME=movie VALUE="/image/flash_sample.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="flash_sample.swf" quality=high bgcolor=#FFFFFF WIDTH="200" HEIGHT="50" NAME="flash_sample" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
表示結果（画像）:
正しく表示されています。しかし、見た目はこれで良いのですが、XHTMLをチェックするとエラーになります。
XHTML Validation 結果:
以下の内容が指摘されます。
- OBJECTタグに classid，codebase、WIDTH，HEIGHT，id，ALIGN の属性は無い。
- PARAMタグに NAME，VALUE の属性は無い。
- EMBEDタグに src，quality，bgcolor の属性は無い。
- 属性値は引用符（"）で括る。
- PARAMタグは /> で閉じる。
さらに注意すべきなのは以下の点です。
- タグや属性の表記は小文字にする。
- embed タグは使えない（XHTML で定義されていない）。
XHTML Valid になる記述
以上を踏まえてソースを修正します。
ソース:
<object data="/image/flash_sample.swf" type="application/x-shockwave-flash" width="200" height="50"> <param name="movie" value="/image/flash_sample.swf" /> </object>
表示結果（Flash):
正しく表示されますが、この場合は、Flash Player の自動インストール/アップデートはできません。Express Install を利用すれば可能ですが、閲覧中のブラウザにFlash Player 6 r65 以降がインストールされ JavaScript が有効になっている必要があります。
また、Light Box を使用する場合は、Flash が Light Box の前面に表示されてしまうことがあるようです（このサイトでは WordPress LightBox2 プラグインを使用していますが、現象は再現しません）。これを回避するには、以下の param タグを追加します。
<param name="wmode" value="transparent" />
表示結果（Flash）:
背景が透過になっているのがわかります。ただし、wmode を transparent にした Flash では、以下のような不具合があるので注意してください。
- 日本語のテキスト入力ができない（ペーストは可能）
（FireFox3，Opera9，Safari3 で確認済） - ボタンがクリックできない
（現象再現できず）
入力テスト用（Flash，wmode無し ）:
入力テスト用（Flash，wmode=transparent ）: