MTCarousel for MT5 チュートリアル

標準的な横スクロール型のカルーセルを作ってみましょう。

・準備

まずはカルーセルに表示させたい画像を、
ウェブサイト上にアップロードしておきます。

ここでは




この3画像をウェブサーバにアップロードしておきました。


・カルーセルの新規作成

管理画面のメニューで、ブログやウェブサイト、
あるいはシステムに切り替えると、
左メニューに「カルーセル」が表示されます。
メニューを開いて「新規作成」をクリックします。

ss1.jpg

カルーセルの作成画面が表示されます。
各設定項目を入力します。

タイトル(必須)
「タイトル」は、このカルーセルを管理画面上で管理しやすくするために付ける名前となります。
エンドユーザには表示されません。
なるべく分かりやすい名前を付けるとよいでしょう。
「○×ブログ:トップページメイン用」など

アイテムのサイズ(幅)/(高さ) (必須)

「アイテム」とは、カルーセル内に表示させる一つ一つの要素のことです。
ここでは「準備」でアップロードしておいた画像の幅・高さを入力します。

※必ずしも画像のサイズ通りではなくても構いませんが、
その場合は指定された幅・高さに伸縮された形で表示されます。

カルーセルタイプ(必須)
カルーセルのタイプを選択します。
標準タイプは縦スクロール、または横スクロール型の標準的なカルーセルです。
3Dタイプは奥行きのあるカルーセルになります。

各項目入力したら「保存」を押してカルーセルを作成します。

※これらの設定は後から変更することも出来ます。


・アイテムの追加

カルーセルの作成が終わると、アイテム一覧画面に移ります。

ss2.jpg

まだアイテムは何も登録されていない状態です。
「アイテムを追加する」を押してください。
アイテムの設定画面が表示されますので、各項目を入力していきます。

ss3.jpg

画像URL(必須)

表示させたい画像の「URL」をここで指定します。
先ほど準備した画像のURLを指定します。

リンク先(任意)
この画像をクリックされたときに移動するリンク先を設定します。
リンクする必要が無ければ、何も入力しなくてOKです。

画像タイトル(任意)
画像にカーソルを合わせた時に表示されるキャプションを設定します。
必要が無ければ、何も入力しなくてOKです。

スケジュール設定(任意)
開始日時、終了日時、曜日の指定が出来ます。
何も設定しなければ、常に表示となります。

ステータス(必須)
このアイテムを有効にするか無効にするかの切り替えです。
どちらでも構いませんが、ここでは「無効」で作ってみましょう。

「保存」を押すとアイテム一覧へ戻ります。


アイテム一覧に、今作ったアイテムが追加されています。

ss4.jpg

先ほど「無効」で作ったので、左上に「無効」と表示されています。
ここをクリックすると、「有効←→無効」の切り替えができます。
クリックして有効にしてみます。

ss5.jpg

有効になり、背景の色も変わりました。

同様に残りのアイテムも追加していきます。

ss6.jpg

追加できたら、「プレビュー」ボタンを押してみましょう。

ss7.jpg

今追加したアイテムがカルーセルとして表示されました。
標準的なカルーセルが出来ました。
デフォルトでは自動でスクロールするようになっています。
このスクリーンショットはスクロール途中の状態です。


・カルーセルを設置する


つづいてこのカルーセルを設置します。

と、その前にこのカルーセルの「Id確認」および、カルーセル自体の有効化をしておきましょう。
カルーセルメニューの「一覧」でカルーセル一覧へ移動します。

ss8.jpg

カルーセルIdの確認
各カルーセルにはIdが自動で割り振られます。
カルーセル一覧のIdの列にカルーセルのIdが表示されます。
この値をメモしておきます。

カルーセルの有効化
アイテム一つ一つにも有効・無効の切り替えがありましたが、
カルーセル全体に対しても有効・無効の切り替えができます。
「無効」をクリックすると「有効」に変わります。
これで準備OKです。


では、設置したいテンプレート編集画面を開きます。
例としてメインページに設置してみます。

ss9.jpg

設置したい箇所に以下の1行を記述します。

<mt:Carousel id="先ほどメモしたカルーセルId">

例えばカルーセルIdが「3」なら

<mt:Carousel id="3">

これでOKです。
プレビューで確認してみましょう。

ss10.jpg

先ほど作ったカルーセルが表示されました。
テンプレートを保存&再構築すれば、カルーセルの設置が完了です。



・より詳細な設定

より詳細な設定は、カルーセルの設定画面で編集できます。

ss11.jpg

ここで3Dタイプに切り替えてみましょう。
3Dタイプのラジオボタンを選択すると、
下の詳細設定部も3D用に切り替わります。

各項目を入力しプレビューボタンを押します。

ss12.jpg

3Dタイプのカルーセルに切り替わりました。

プレビューボタンでは設定は保存されませんので、
設定をいじりつつ何度でも確認できます。
気にいった設定になったら保存ボタンでセーブします。


再構築は?
再構築は必要ありません。
保存するだけですぐに反映されます。












コメントする

カテゴリ