Joomla!でバナー広告をスライド表示させる

標準のバナーコンポーネントは、

• バナー情報
• カテゴリ情報
• クライアント情報

からなります。

普通の記事を書くときの

• セクション（クライアント情報）
• カテゴリ（カテゴリ情報）
• 記事（バナー情報）

のような関係と思えば、大きくは違わないと思います。

では、早速、バナーを２つほど、作成してみましょう。

メニューから [コンポーネント] - [バナー] - [クライアント] をクリックします。

パラメータ名	説明
クライアント名:	今から作成するバナーのクライアント名を入力します。
担当者名:	クライアントの担当者名を入力します。
連絡先メールアドレス:	連絡先メールアドレスを入力します。

この情報は、基本的に表示されることはありませんので、覚書程度に入力されると良いと思います。

メニューから [コンポーネント] - [バナー] - [カテゴリ] をクリックします。

パラメータ名	説明
タイトル:	今から作成するバナーのカテゴリ名を入力します。
エイリアス:	カテゴリ名の別名（英名）を入力します。
公開:	いいえ ●はい
セクション:	N/A （これは、何かの名残か残骸か・・・昔は、クライアント情報をセクションとしていたのかもしれませんね。）
カテゴリ表示順:	新規アイテムはデフォルトでは最後に置かれます。順番はこのアイテムを保存した後に変更できます。
アクセス レベル:	このカテゴリのバナーをどのレベルのユーザへ公開するかを指定します。
イメージ:	カテゴリのイメージ画像があれば指定します。
イメージ位置:	カテゴリのイメージ画像の表示位置を指定します。

イメージは、あとで、スライドさせて表示したいので、ここでは、なしで設定しておきます。

メニューから [コンポーネント] - [バナー] - [バナー] をクリックします。

パラメータ名	説明
名前:	バナー名を入力します。
エイリアス:	バナー名の別名（英名）を入力します。
バナー表示:	いいえ ●はい
固定:	●いいえ はい
表示順:	新規アイテムはデフォルトでは最後に置かれます。順番はこのアイテムを保存した後に変更できます。
カテゴリ:	所属するカテゴリを指定します。
クライアント名:	所属するクライアント名を指定します。
表示回数制限:	ある一定回数で、表示するのをやめたい場合に指定します。やめない場合は、無制限を選択します。
クリックURL:	クリックされたときの飛び先を指定します。特に必要ない場合は、ここは、何も設定しません。
クリック数:	このバナーのクリック数です。初期化できます。
カスタムバナーコード:	バナーのHTMLを記述します。
説明/メモ:	覚書を記述しておきます。
バナーを選択:	バナーの画像を選択します。(画像を表示しない場合は何も指定しません)
幅:	バナーの画像の表示幅を指定します。
高さ:	バナーの画像の表示高さを指定します。
バナーイメージ:	？？残骸だと思います。
タグ:	このバナーのタグ名を指定します。

カスタムHTMLを作成する要領で作成すれば、とりあえず、作成できると思います。 あえて、イメージやクリックURLなどを使用する場合は、別途、チュートリアルを読んでください。 クリックURLなどを指定しておけば、カスタムバナーコード: で {CLICKURL }と指定できるようです。名前も同じようにできるみたいです。


メニューから [エクステンション] - [モジュール管理] をクリックします。

画面右上の"新規"ボタンをクリックします。

登録されているモジュール一覧が表示されますので、その中から、"バナー"をクリックします。

バナーモジュール固有のパラメータについて記述します。

パラメータ名	説明
ターゲット :	クリックしたときの動作を指定します。 ・ブラウザナビゲーション付きの親ウィンドウ ・ブラウザナビゲーション付きの新規ウィンドウ ・ブラウザナビゲーションなしの新規ウィンドウ
カウント:	表示するバナー数を指定します。デフォルト５になっていますが、ここでは、１を指定しておきます。
バナークライアント:	表示するバナーのクライアント名を指定します。
カテゴリ:	表示するバナーのカテゴリを指定します。
タグ検索:	"はい"を指定するとバナーのタグと表示しているタグとが一致しているものを表示します。
ランダム:	表示切り替え時に、ランダムに選択するか、表示順で選択するかを指定します。
ヘッダー テキスト:	バナー表示の先頭文字列を指定します。何も表示しないときは、何も指定しません。
フッター テキスト:	バナー表示の最後尾文字列を指定します。何も表示しないときは、何も指定しません。
モジュールクラス:	モジュールのサフィックス名です。

テストで作成したモジュールを以下に表示してみます。
作成した表示形式は、単純にランダムに表示するものです。（何度か更新してみると、バナーが切り替わると思います）

表示イメージは、 こちらへ移動しました。
先のダウンロードサイトから、ZIPファイルをダウンロードし、インストールを行います。 (メニューの [エクステンション] - [インストール/アンインストール] から行ってください。)

インストールを終えると、デフォルトの"Banner Slider Module"が作成されますので、それを編集しましょう。
(メニューの [エクステンション] - [モジュール管理] から"Banner Slider"を探してください。)

Banner Slider Module固有のパラメータについて記述します。

パラメータ名	説明
モジュールクラス:	モジュールのサフィックス名です。
Banner ID(s) :	バナーのIDを指定します。複数の場合は、カンマで区切ります。
Category ID(s):	バナーのカテゴリIDを指定します。複数の場合は、カンマで区切ります。
Client ID(s):	バナーのクライアントIDを指定します。複数の場合は、カンマで区切ります。
Display only:	Image/Custom BannerCode/Both のいずれかです。（バナーで設定されている情報のどれを表示しますか？） 各バナーでは、バナーイメージ:とカスタムバナーコード:を設定できました。(前頁参照) バナーイメージ:の設定のみを表示する場合は、Imageを選択します。 カスタムバナーコード:の設定のみを表示する場合は、Custom BannerCodeを選択します。 両方ともに表示のする場合は、Bothを選択します。
Effect :	どのようにスライド表示をさせまるか指定します。 Fade -- フェードイン/フェードアウトでバナーを切り替えます。 Scroll Left -- 左へスクロールしてバナーを切り替えます。 Scroll Up -- 上へスクロールしてバナーを切り替えます。 Scroll Right -- 右へスクロールしてバナーを切り替えます。 Scroll Down -- 下へスクロールしてバナーを切り替えます。 none -- 何もしません。すぐにバナーを切り替えます。
幅 :	バナー表示の幅をピクセルサイズにします。
Height :	バナー表示の高さをピクセルサイズにします。
Delay :	スライドさせる間隔（時間）をmsで指定します。3000=3秒です。
Random Display :	バナーの入れ替えをランダムに行うか指定します。
Resize Images :	イメージ表示の時にそのイメージをバナー表示にあわせるかを指定します。
Center Images :	イメージ表示の時にそのイメージをセンターリングして表示するかを指定します。
Open In New Window :	クリックされたときに新しいブラウザに表示するかを指定します。
Force Using Cache :	キャッシュを強制的に使用するかを指定します。
TRACK BANNER IMPRESSION LABEL :	バナー表示回数を記録します。

テストで作成したモジュールを以下に表示してみます。
作成した表示形式は、単純にランダムに表示で、スライド効果をFadeにしたものです。

表示イメージは、 こちらへ移動しました。

コメント