flTopImageを使ってみよう

ここでは、a-blog cms 1.0.1に同梱されているflTopImageについて解説します。

※この解説は、a-blog cms 1.0.1をもとに説明しています。ご利用のバージョンによっては画面表示や内容が若干異なる場合があります。ご了承ください。

a-blog cmsをインストールしていただくと、以下のURLでflTopImageのサンプルファイルを見ていただくことができます。

http://www.example.com/flTopImage/sample.html

flTopImageはプラグインライセンスが必要ですがトライアル期間中はご利用いただけます。詳しくはライセンス体系をご覧ください。トライアル期間が終了するとイメージにSampleの文字が表示されます。

flTopImageはHTMLからFlashにパラメータを渡して、表示の制御をカスタマイズすることができます。管理画面のコンフィグ、フラッシュトップイメージから以下のパラメータを変更することができます。

パラメータ

表示数

出力するXMLの表示数を設定します。

表示順

表示する順番を日付（昇順）、日付（降順）、ランダムから選択します。

幅

flTopImageの幅を設定します。

高さ

flTopImageの高さを設定します。

xmlのテンプレート

xmlのテンプレートのパスです。flTopImage.xmlファイルのファイル名を変更したい場合などに設定してください。

最前面に表示するイメージ

flTopImageは最前面にイメージを読み込むことができます。（※サンプルのa-blog cmsのロゴの部分）最前面に表示するイメージの項目に読み込ませたいイメージをパスを入力します。

最前面のイメージのX座標

最前面に表示するイメージのX座標を設定します。

最前面のイメージのY座標

最前面に表示するイメージのY座標を設定します。

フェードイン時間

フェードインの時間を設定します。

表示時間

表示する時間を設定します。

フェードアウト時間

フェードアウトの時間を設定します。

フェードイン、フェードアウト時のカラー

flTopImageは#000000か#FFFFFFにフェードアウトします。どちらかを設定してください。

読み込んだイメージのモーション設定

読み込んだイメージがflTopImageの表示サイズより大きかった場合にパンもしくはチルトをします。

読み込んだイメージのリンク設定

読み込んだイメージへリンクさせるかどうかを設定することができます。

swfファイル

swfファイルのパスです。flTopImage.swfファイルのファイル名を変更したい場合などに設定してください。

あとはテンプレートをカスタマイズ

sample.htmlの<!-- BEGIN_MODULE Plugin_FlTopImage_Vars -->から<!-- END_MODULE Plugin_FlTopImage_Vars -->をflTopImageを貼りたいテンプレートに追記してください。

<!-- BEGIN_MODULE Plugin_FlTopImage_Vars -->
<div id="flTopImage" class="swfobject" style="visibility:hidden;width:{width}px;height:{height}px;">
<dl class="flashvars">
<dt>xmlAddress</dt><dd>{xmlAddress}</dd>
<dt>coverImageSrc</dt><dd>%{THEMES_DIR}system/{coverImageSrc}</dd>
<dt>coverImageX</dt><dd>{coverImageX}</dd>
<dt>coverImageY</dt><dd>{coverImageY}</dd>
<dt>fadeinTime</dt><dd>{fadeinTime}</dd>
<dt>displayTime</dt><dd>{displayTime}</dd>
<dt>fadeoutTime</dt><dd>{fadeoutTime}</dd>
<dt>width</dt><dd>{width}</dd>
<dt>height</dt><dd>{height}</dd>
<dt>fadeinoutColor</dt><dd>#{fadeinoutColor}</dd>
<dt>moveflg</dt><dd>{moveflg}</dd>
<dt>linkflg</dt><dd>{linkflg}</dd>
</dl>
<dl class="params">
<dt>align</dt><dd>middle</dd>
<dt>scale</dt><dd>noscale</dd>
<dt>wmode</dt><dd>window</dd>
<dt>bgcolor</dt><dd>#{fadeinoutColor}</dd>
<dt>salign</dt><dd>lt</dd>
</dl>
<dl class="embed">
<dt>swfUrlStr</dt><dd>%{THEMES_DIR}system/{swfUrlStr}</dd>
<dt>widthStr</dt><dd>{width}</dd>
<dt>heightStr</dt><dd>{height}</dd>
<dt>swfVersionStr</dt><dd>9.0.0</dd>
</dl>
</div><!-- END_MODULE Plugin_FlTopImage_Vars -->

特定のユーザーやカテゴリーなどを表示したい場合

モジュールIDから設定を行います。<!-- BEGIN_MODULE Plugin_FlTopImage_Vars id="hoge"-->と記述してモジュールの設定を行ってください。

ブログやカテゴリーの階層の設定についても、モジュールIDから設定を行います。

---