ID #1154

Mobify Studioでカルーセルモデルを使うには

Mobify Studioでカルーセルモデルを使うには

Mobifyのカルーセル·モジュールは、あなたのページ内の任意のHTMLブロック要素のスワイプ・フレンドリーなカルーセルを作成することが容易になります。通常これは画像だけですが、そうじゃなくてもいいのです。テキストと画像の両方を含む、全体のDIVをカルーセル化することができます。

 

このガイドでは、画像カルーセルの構成要素を展開する手順を追ったあと、自分のサイトからの選択をカルーセル化する手順を追います。

 

このガイドを完了したら、以下のことを理解しているでしょう:

 

・サイトのテンプレートでのカルーセルを配置

・カルーセルに静止画像を配置

・あなた自身のページからカルーセルにライブ画像を配置

 

前提条件

 

Mobify Studioプロジェクトを作成し、このチュートリアルを使用する前にMobify入門ガイドを通過する必要があります。

HTMLCSSの基本的な知識を持っている必要があります。

JavaScriptを少し知っていても損はないが、我々が出来る限りシンプルに保つようにしてあげましょう!

 

カルーセルCSSJavaScriptを入れる

Mobifyカルーセルモジュールを展開するための最初のステップは、あなたの基本テンプレートにカルーセルCSSJavaScriptを含めることです。これを行うには、HTMLビューに移動し、’base’のテンプレートを選択するために ‘Template’選択ボックスを使用しましょう。’base’のテンプレートをお使いのモバイルサイトの中枢を形成しているテンプレートです。ここがカルーセルに必要なスタイルが含める場所です。画像例の下にコードを見つけることができます。

 

以下のコードを</head>タグのすぐ後にペーストしてください

 

 

パート1:ボイラープレート静止画像を使用して

 

最初のカルーセルには、ボイラープレート静止画像を使用しましょう。Homeテンプレートに戻り、 {/ contentBlock} テンプレートディレクティブのHTMLを貼り付けてください。画像例の下にコードが置いてあります。

 

 

これで、完全に機能するボイラープレートスライダーの完成です!プレビューウィンドウで体験することができるはずです。あなたの作品を保存して、’Finish’をクリックした場合は、サイト管理コンソールのプレビューセクションに移動して、あなたの携帯電話で表示できるリンクを生成することができます。

 

パート2:あなたのサイトからライブ要素を使用

コンテンツの選択

カルーセルに独自のイメージを入れるには、イメージのためのセレクタを作成することから始めます。例としてwww.mobify.comを使用しています。 ‘Select’ビューに戻ってください。まずは単一の画像を選ぶことから始めます。次にCSSセレクタを微調整して3つの一連の画像を選択します。

 

セレクタの編集

コンテンツを選択したあと、複数の項目を選択してくれるように、インベントリにある編集ボタンを使ってセレクタを編集します。

 

 

スライドショーでコンテンツをロードさせる

セレクタを拡大したら、HTMLビューに戻りましょう。ボイラープレート画像をイテレータと置き換えると、セレクタにマッチしたコンテンツの各部分を反復処理し、HTMLの小さなビットだけでなく、我々の選択の内容を書き出してくれます。

 

 

これであなたの選択したコンテンツのカルーセルが動作するはずです。見た目や感じを完璧にするには多少スタイリングが必要かもしれません

 

 

カルーセルモジュールのオープンソース(non-Studio)バージョンは我々のオープンソースサイトからダウンロード出来ます。

 

タグ: -

関連エントリー:

この FAQ にコメントする