カテゴリー内の他の記事

Garoon ポータルテンプレート:画像付きお知らせ(HTML)

Index

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

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

image-asset-1.png

操作手順

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

書き換えポイント

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

表示する画像を変更する

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

  1. 画像アセットに表示したい画像を追加します。
    1. Garoon システム管理 > 各アプリケーションの管理 > 画像アセット一覧 を開きます。
    2. 「画像アセットを追加する」をクリックし、画像アセットに表示したい画像を追加します。
    3. 「ファイルキー」のフィールドに、ファイルキーの値を設定します。
      このとき、ファイルキーには半角英数字、ハイフン(-)、アンダーバー(_)、ピリオド(.)、チルダ(~)のみを使用します。
      本記事では、追加した画像のファイルキーを「president」に設定しています。
      image-assets-5.png

    4. ファイルキーの入力が完了したら、一番下の「追加する」をクリックします。
    5. 画像アセットに画像が追加されました。
      image-assets-4.png

    操作方法の詳細はヘルプページ「画像アセットの追加」をご参照ください。
  2. 「HTMLポートレットの編集」画面で、「ポートレットの内容」から<!-- 画像エリア -->を探します。
    <!-- 画像エリア -->から<!-- 画像エリア 終了 -->までが画像の部分を表しています。
  3. <!-- 置き換え画像 -->のすぐ下の行に注目します。
    <div class="img_sample_information_2_grn_tpl"></div>の部分を書き換えると、画像を変更できます。
    • 変更前
      変更後
      <div>...</div><script>...</script>に書き換えます。
      また、手順 1. で設定した画像アセットのファイルキー(「president」)は
      3 行目の garoon.assets.images.getUrl('...') の括弧内に設定します。

おわりに

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

 

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

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

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

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