Garoon ポータルテンプレート：画像付きお知らせ（HTML） – cybozu developer network

Index

はじめに
動作環境と注意事項
カスタマイズ
おわりに

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

このテンプレートでは、画像付きお知らせのタイトルや説明文、クリックしたときのリンク先を変更できます。

操作手順

ポータルの一覧画面から、テンプレートから追加したポータルを表示します。
ポータルに設置されたポートレットの歯車マークから「HTMLポートレットの編集」をクリックします。HTMLポートレットの変更画面が表示されます。
「ポートレットの内容」を編集します。編集する箇所については、書き換えポイントをご参照ください。
編集が終わったら、[変更する]ボタンをクリックします。

書き換えポイント

クリックしたときのリンク先を変更する

「ポートレットの内容」からを探します。
からまでが箇条書きになっているリンクを表しています。
このテンプレートには、2 つのリンクがあります。
からで囲われている<a href="/g/" ...>...</a>に注目します。
<a href="/g/" ...> の「/g/」部分を書き換えるとリンク先を変更できます。
- Garoon 内のページにリンクしたい場合は、「/g/」をページ URL の「/g/」以降の文字列に差し替えます。
  変更前
  変更後（例：Garoon 掲示板へのリンクに変更）
- 外部サイトにリンクしたい場合は、「/g/」を「http」または「https」から始まる URL に差し替えます。
  変更前
  変更後（例：サイボウズの Web サイトに変更）
他のリンクについても、同様の手順でリンク先を変更してください。

表示する画像を変更する

この例では、Garoon の画像アセットを使って表示する画像を管理します。

画像アセットに表示したい画像を追加します。
1. Garoon システム管理 > 各アプリケーションの管理 > 画像アセット一覧を開きます。
2. 「画像アセットを追加する」をクリックし、画像アセットに表示したい画像を追加します。
3. 「ファイルキー」のフィールドに、ファイルキーの値を設定します。
  このとき、ファイルキーには半角英数字、ハイフン（-）、アンダーバー（_）、ピリオド（.）、チルダ（~）のみを使用します。
  本記事では、追加した画像のファイルキーを「president」に設定しています。
4. ファイルキーの入力が完了したら、一番下の「追加する」をクリックします。
5. 画像アセットに画像が追加されました。
操作方法の詳細はヘルプページ「画像アセットの追加」をご参照ください。
「HTMLポートレットの編集」画面で、「ポートレットの内容」からを探します。
からまでが画像の部分を表しています。
のすぐ下の行に注目します。
<div class="img_sample_information_2_grn_tpl"></div>の部分を書き換えると、画像を変更できます。
- 変更前
  変更後
  <div>...</div> を <script>...</script>に書き換えます。
  また、手順 1. で設定した画像アセットのファイルキー（「president」）は
  3 行目の garoon.assets.images.getUrl('...') の括弧内に設定します。