bingo!CMS v1.7 マニュアルサイト

bingo!CMSのデフォルトでは、スマートフォンのアニメーションは非対応です。
しかし、下記に該当する場合は、本Tipsにより動作させることができます。

• 対象となるbingo!CMSのバージョン：bingo!CMS1.7.0以上
• 対象となるスマートフォン用スキン：「sp-SP1-ON-01-7」、「sp-SP1-ON-02-7」、「sp-SP1-NN-01-7」
  ※使用したいスキンをあらかじめ上記リンクよりダウンロードしてください。

1. 当該スキンのzipファイルを解凍し、適宜テキストエディター等で「js」> 「skin.js」を開きます。
2. 記述最後の、

   　})(jQuery)

   の直前に以下のJavaScriptを追記し、「skin.js」を保存してから再度当該スキンファイルをzip化します。

JavaScript 記述例

/**
 * animate.css用。
 */
if (j$("#items").length == 0) {
    j$("[class*=attach_anim]").addClass("anim");
    j$("[class*=attach_anim]").on("inview", function(e, view) {
        if (view && j$(this).hasClass("attach_anim")) {
            var match = j$(this).attr('class').match(/(attach_[a-zA-Z]+)/g);
            if (match) {
                for (var i = 0; i < match.length; i++) {
                    j$(this).addClass(match[i].replace('attach_', ''));
                }
                j$(this).addClass('animated');
            }
        }
    });
}

1. bingo!CMS管理画面上部より「デザイン管理」>「スキン管理」と進み、「新規スキンをインストール」の「ファイルを選択」をクリックして、当該スキンのzipファイルを選択します。
2. 「登録」ボタンをクリックし、インストールします。
3. インストールされたスキンは「スマートフォン用」タブに表示されます。

1. bingo!CMS管理画面より「デザイン管理」>「スキン管理」>「スマートフォン用」> 当該スキンの「CSS編集」と進み、CSS編集のウィンドウを開きます。
2. CSSファイル一覧の中から「index.tpl」をクリックします。
3. headタグ内の、

   　{$_LINK}

   の直下に以下のコードを追記し、「保存」をクリックします。保存後にこのウィンドウを閉じます。

CSS 記述例

<link rel="stylesheet" href="{$BINGOTOPURL}/css/animate.min.css">

4. 適宜、当該スキンを使用してテンプレートを作成します。詳細は以下マニュアルをご参照ください。
   サイトのつくりかた - （2）テンプレートを設定しよう

1. bingo!CMS管理画面上部より「メニュー&ページ管理」をクリックします。
2. アニメーションを動作させたいページがあるメニューのチェックボックスにチェックを入れます。
3. 「メニュー操作」のプルダウンをクリックし、「スマートフォンテンプレートを変更する」を選択します。
4. テンプレート選択画面の「公開用」「編集用」タブを適宜切り替え、当該テンプレートを選択し「保存」をクリックします。

1. bingo!CMS管理画面上部より「メニュー&ページ管理」をクリックします。
2. アニメーションを動作させたいページの「ページ編集」をクリックし、ページ編集画面を開きます。
3. コンテンツエリアに任意のユニットをドラッグ&ドロップで配置し、ユニット編集画面を開きます。
4. ユニット編集画面上部にある「アニメーション用クラス」および「速度」を任意の設定へ変更します。
5. 適宜、ユニットを設定し「保存」をクリックします。
   アニメーションの動作は「スマートフォン画面のプレビュー」でご確認ください。

補足

「アニメーション用クラス」が無いユニット、またはより高度なアニメーションの設定を行いたい場合は、以下のTipsをご参照ください。
Tips - アニメーションの設定まとめ