カテゴリー内の他の記事

Garoon ポータルテンプレート:スライド表示(HTML)

Index

はじめに

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

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

動作環境と注意事項

  • テンプレートを使ってポータルを追加する機能は、クラウド版 Garoon の環境が必要です。
  • HTML を編集するときの注意点は、Garoon ヘルプサイトをご覧ください。
  • カスタマイズに関する技術的なサポート等は行っておりません。また、カスタマイズを行ったポートレットについては、その動作を保証するものではありません。

カスタマイズ

変更できる箇所

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

slightShow_tips_00.png

操作手順

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

書き換えポイント

スライド表示する画像を変更する

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

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

    複数の画像を表示したい場合は、表示したい数だけcarousels.push()を「ポートレットの内容」に追加できます。

  1. 「ポートレットの内容」からcarousels.push({url: 'xxx'})  を探します。
  2. 「xxx」 の部分を変更したいリンク先の URL に変更します。
    変更前 変更後 (例:リンク先 URL をサイボウズの Web サイトに変更)

 

同じ手順で、carousels.push({alt: 'xxx'})にて画像の別名を変更することもできます。

おわりに

cybozu developer network では、他にも JavaScript を使って HTML ポートレットをカスタマイズする方法も紹介しています。

 

このTipsは、2022年7月版 Garoonで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。