Eye Catch - Flash

Forum

Home / documents / Eye Catch - Flash

Vicunaでは、CSSモジュールの読み込みで簡単にページの特定の部分に画像を呼び出すことができるEye Catch モジュールが用意されていますが、これはCSSで指定の画像(gif,png,jpg等)を背景に表示するものです。ここでは、同じ位置に画像ではなく、SWFオブジェクト(FLASH)を表示する方法を解説します。

まず、SWFオブジェクトの表示に関して「お手軽にSWFObjectでswfを埋め込む方法」の解説を参照してください。この記事で解説されているSWFObjectというJSライブラリを使用します。スクリプトの記述方法等、上記の記事に詳しく書かれています。

Headerエリアに表示

div#header内の以下に相当する場所にスクリプトを記述します。(swfobject.jsは読み込まれているものとします。)

<div id="header">

  <p class="siteName"><a href="#">Vicuna Style</a></p>

  <p class="description">Vicuna CMS Template and Skin</p>

<!--追加記述ここから-->
<div id="headerFlash">

swfが表示できない環境では、この文章(または画像)が代替的に表示される。
</div>
<script type="text/javascript">

 var so = new SWFObject("htt://vicuna.jp/flash/header.swf", "header", "800", "180", "7", "#fff");
 so.write("headerFlash");
</script>
<!-- ここまで -->

  <ul id="globalNavi">
    <li><a href="#">About</a></li>

    <li><a href="#">Archives</a></li>
    <li><a href="#">Guest Book</a></li>
    <li><a href="#">Bookmarks</a></li>

  </ul>
</div>

SWFファイルまでのパスは絶対パスで記述してください。

CSSの編集

3-context.cssファイル内のわかりやすいところに、次のCSSコードを貼り付けます。

3-context.css
/*--------------------------------------
    Header SWF
---------------------------------------*/

div#header {
  padding: 0!important;
}

div#header object,
div#header embed {
  margin: 0;
  vertical-align: bottom;
  width: 100%;
}

div#header p.siteName,
div#header p.description {
  display: none;
}

ul#globalNavi {
	margin: 0!important;
}

上記のCSSは、FLASHによって置き換えられるタイトルと概要が非表示にし、余白の調整を行っています。

次に、挿入したSWFファイルの幅に合わせて、3-layout.cssを調整します。

4-layout.css (4-1.Containers Layout)
div#header,
div#content,
div#footer {
	margin: 0 auto; /* 中央寄せ */
	width: 800px;  /* 固定幅に変更可能　例: (800px | 60em) */
	min-width: 40em; /* 可変時の幅の最小値 */
	max-width: 70em; /* 可変時の幅の最大値 */
	text-align: left;
}