Garoon ポータルテンプレート：スライド表示（HTML） – cybozu developer network

Index

このページでは、ポータルテンプレートをご利用環境に合わせて、スライド（カルーセル）表示する画像や画像のリンク先を変更する方法を説明します。
その他のテンプレートは、HTML ポータルテンプレートギャラリーをご覧ください。

テンプレートを使ってポータルを追加する手順は、Garoon ヘルプサイトをご確認ください。

このテンプレートでは、スライド表示する画像や画像のリンク先 URL、画像の別名を変更できます。

Garoon システム管理よりテンプレートを追加します。
1. ヘッダーの歯車のアイコンより、Garoon システム管理画面 > 各アプリケーションの管理 > ポータル > ポータルの一覧を開きます。
2. ポータルの一覧画面で、［テンプレートから追加する］を選択します。
3. ポータルの追加画面で、「スライド表示（HTML）のテンプレート」を選択し、[追加]ボタンをクリックします。
ポータルの一覧画面から、テンプレートから追加したポータルを表示します。
ポータルに設置されたポートレットの歯車マークから「HTML ポートレットの変更」をクリックします。HTML ポートレットの変更画面が表示されます。
「ポートレットの内容」を編集します。編集する箇所については、書き換えポイントをご参照ください。
編集が終わったら、[変更する]ボタンをクリックします。

表示する画像は、Garoonの画像アセットで管理します。

画像アセットに表示したい画像を追加します。
1. Garoon システム管理 > 各アプリケーションの管理 > 画像アセット一覧を開きます。
2. 「画像アセットを追加する」をクリックし、画像アセットに表示したい画像を追加します。
3. 「ファイルキー」のフィールドに、ファイルキーの値を設定します。
  このとき、ファイルキーには半角英数字、ハイフン（-）、アンダーバー（_）、ピリオド（.）、チルダ（~）のみを使用します。
  本記事では、追加した画像のファイルキーを「Office_News」に設定しています。
4. ファイルキーの入力が完了したら、一番下の「追加する」をクリックします。
5. 画像アセットに画像が追加されました。
「HTMLポートレットの編集」画面で、「ポートレットの内容」から変更したい画像の carousels.push({filekey：'xxx'}) を探します。
表示したい画像のファイルキーに変更します。
「xxx」部分を手順1. で追加した画像アセットのファイルキー「Office_News」に書き換えます。
変更前 変更後 （例：ファイルキーを「Office_News」に変更）
複数の画像を表示したい場合は、表示したい数だけcarousels.push()を「ポートレットの内容」に追加できます。