FLASHのスライドショーCu3erの使用方法とそのポイント

Webサイトの表情を豊かにするFLASHで制作されたオープニングムービーや代用として使用されるスライドショーは、表示に時間がかかったり、表示されるイメージにも意味不明なものも多く、サイト訪問者がイライラさせられる場合も多い。
そんな時、サイトの投稿画像などをFLASHを使用して3Dで効果的に表現する、WordPressのプラグインCu3erはインパクトがあるかと思う。手の込んだFLASHを制作するよりもCu3erを使用すれば、画像を用意するだけで手早くFLASHの効果が得られる。
投稿にアップした画像を回転させたり、表題をスライドしてみせたりと、FLASHでサクサクと動くサイトは、Webサイトを効果的に見せるプラグインとしてお勧めです。

携帯電話やスマートフォンのiPhoneでは残念ながらFLASHはうまく表示がされない不都合もあるが、リッチなサイトの制作には効果的なcu3er。
上に表示しているのは、プラグインのcu3erではなく、オリジナルのcu3erを利用したサンプルです。
最近では、海外サイトで販売されているwordpressのテンプレートには、あらかじめCu3erを組み込んだデザインも多くあり、利用方法によってはビジネスサイトで商品をPRするのにも大いに活用も出来る。
限られたスペースにイメージ画像や紹介文を順次表示することができるばかりでなく、画像データにリンクを貼ることで別サイトに誘導が可能となり利用する効果は大きい。
多くのサイトで利用されているFLASHのトップページは、データの読み込みに時間がかかり、サイト訪問者に緩慢なイメージを与え却ってイメージを損なう可能性も大きいが、cu3erを利用することで素早くサイトのコンテンツを表示することが可能となる。
ここでは、wordpress用に作られたCu3erプラグインの使い方を簡単に以下にまとめてみた。また、導入にあたってはcu3erと比較すると動作がシンプルだがDynamic Content Galleryも併せて検討してみるのも良いかもしれない、ご参考まで

Cu3erプラグインの動作について

  • Cu3erで設定（設定≫Cu3er　Elements）したカテゴリー記事に含まれる画像を回転したり、記事の表題やテキストの表示が可能
  • Cu3erの表示部分、左右両端にある矢印をクリックすることで、前や次の投稿画像に表示を移動
  • Cu3erのアンカーテキストが表示されるグレイの部分をクリックすることで該当ページのサイトを開く
  • WEBサイト訪問者に、直観的な操作の判断を可能とする

Cu3erプラグインについての課題

  • 多くのテンプレートについても言える事だが、wordpressはあくまでもブログシステムの為、プラグインのcu3erを使用した際には表示対象となる記事は、サイトの最新投稿のカテゴリーが画像抽出の対象となるため、オリジナルの画像設定やサイトリンクへの移動設定が自由に出来ないなどの制限がある

Cu3er Post Elements のpluginの導入方法

  • ダッシュボードのプラグインより新規プラグイン≫新規追加でcu3erを検索
  • Cu3er Post Elementsプラグインが表示されたら、いますぐインストールで追加（上図参照）
<?php if (function_exitsts('install_cu3er')){install_cu3er();} ?>
  • プラグイン≫Cu3er≫編集　readme.txtに記載のCu3erのパスをメモ帳などにコピー（上ソースコード参照）
  • 外観≫編集でテンプレートのsidebar.phpやindex.phpなどにCu3erを表示したい部分に、先ほどコピーしておいたパスを貼り付ける
  • 表示したいカテゴリーや表示投稿数などを設定
  • プラグインを有効に

Cu3erのplugin（Cu3er Post Elements） は無料で利用が可能、また、下のCu3erのダウンロードサイトより入手するCu3erのFLASHは、自分で組み込んで利用するタイプで、wordpressのプラグインとは設定方法は異なる。

DEMO的にCu3erを使用したサイトページはこちらになります—≫http://www.japan.gr.jp/

Cu3er－Post Elements Optionの設定方法

  • CATEGORY IDS – 表示したい投稿カテゴリーのID番号をカンマで区切って指定、CATEGORY IDSとは、wordpressのカテゴリーより　表示を希望するカテゴリーを選択≫　右クリック≫　プロパティにて表示されるID番号（下図参照）

  • NUMBER OF POST　- 表示する投稿数を設定
  • CU3ER WIDTH -,CU3ER HIGHT-　CU3ERの表示エリアの高さ、幅サイズを設定
  • CU3ER MAIN COLOR TIMER　- 　矢印、TITLE文字の色指定を一括に設定
  • CU3ER SECONDARY COLOR – TITLE吹き出し部分の背景色などの指定
  • CU3ER ARROW TYPE – 　矢印のデザインを番号にて選択

cu3er内の下から吹き出すtitle部分の設定については以下の図を参照にしてください。


また、タイトルの文字サイズや、文字位置、色、サイズをオリジナルに細かく設定すする場合にはプラグイン≫CU3ER≫で編集を選択し、右端に表示されたcu3er-post-elements/config.phpの内容を直接書き換えることで、設定変更が可能のようです。
PHPの修正は、あらかじめローカルホストの環境で十分にテスト下さい。

cu3er0.92　ライセンス

cu3erのver.092添付されているライセンステキストの一部

  • * You may use CU3ER in personal and / or commercial projects.
  • * You may implement CU3ER in an unlimited number of websites and
    offline presentations, as long as you are acting as the administrator
    and / or developer for those websites and / or presentations.
  • * You may deploy SWFs containing CU3ER as part of hired work for
    a third party as long as the SWF is unique to said party and not
    replicated / resold / redistributed as part of a template,
    application or service to additional parties.

Comments are closed.

t
このページの先頭へ