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

目次

はじめに

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

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

動作環境と注意事項

  • テンプレートを使ってポータルを追加する機能は、クラウド版 Garoon の環境が必要です。
  • HTML を編集するときの注意点は、 Garoon ヘルプサイト (External link) を確認してください。

カスタマイズ

変更できる箇所

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

操作手順

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

書き換えポイント

  1. 「ポートレットの内容」から <!-- リンク --> を探します。
    <!-- リンク --> から <!-- リンク 終了 --> までが箇条書きになっているリンクを表しています。
    このテンプレートには、2 つのリンクがあります。

    22
    23
    24
    25
    26
    27
    
    <!-- リンク -->
    <ul class="link_ul_information_2_grn_tpl">
      <li class="link_li_information_2_grn_tpl"><a href="/g/">詳細を表示する</a></li>
      <li class="link_li_information_2_grn_tpl"><a href="https://r.cybozu.com/g/garoon/portal/detail18.html?utm_source=system-portal&utm_medium=gr_cloud&utm_campaign=portaltemplate" target="_blank" rel="noopener noreferrer">画像の変更方法を確認する(外部リンク)</a></li>
    </ul>
    <!-- リンク 終了 -->
  2. <!-- リンク --> から <!-- リンク 終了 --> で囲われている <a href="/g/" ...>...</a> に注目します。
    <a href="/g/" ...> の「/g/」部分を書き換えるとリンク先を変更できます。

    • Garoon 内のページにリンクしたい場合は、「/g/」をページ URL の「/g/」以降の文字列に差し替えます。 変更前

      1
      
      <li class="link_li_information_2_grn_tpl"><a href="/g/">詳細を表示する</a></li>

      変更後(例:Garoon 掲示板へのリンクに変更)

      1
      
      <li class="link_li_information_2_grn_tpl"><a href="/g/bulletin/view.csp?">詳細を表示する</a></li>
    • 外部サイトにリンクしたい場合は、「/g/」を「http」または「https」から始まる URL に差し替えます。
      変更前

      1
      
      <li class="link_li_information_2_grn_tpl"><a href="https://r.cybozu.com/g/garoon/portal/detail18.html?utm_source=system-portal&utm_medium=gr_cloud&utm_campaign=portaltemplate" target="_blank" rel="noopener noreferrer">画像の変更方法を確認する(外部リンク)</a></li>

      変更後(例:サイボウズの Web サイトに変更)

      1
      
      <li class="link_li_information_2_grn_tpl"><a href="https://cybozu.co.jp/" target="_blank" rel="noopener noreferrer">画像の変更方法を確認する(外部リンク)</a></li>
  3. 他のリンクについても、同様の手順でリンク先を変更してください。

表示する画像を変更する

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

  1. 画像アセットに表示したい画像を追加します。

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

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


      操作方法の詳細はヘルプページ「 画像アセットの追加 (External link) 」を参照してください。
  2. 「HTML ポートレットの編集」画面で、「ポートレットの内容」から <!-- 画像エリア --> を探します。
    <!-- 画像エリア --> から <!-- 画像エリア 終了 --> までが画像の部分を表しています。

    29
    30
    31
    32
    33
    34
    35
    
    <!-- 画像エリア -->
    <div class="img_base_information_2_grn_tpl">
      <!-- 置き換え画像 -->
      <div class="img_sample_information_2_grn_tpl"></div>
      <!-- 置き換え画像 終了 -->
    </div>
    <!-- 画像エリア 終了 -->
  3. <!-- 置き換え画像 --> のすぐ下の行に注目します。
    <div class="img_sample_information_2_grn_tpl"></div> の部分を書き換えると、画像を変更できます。

    1
    2
    3
    
    <!-- 置き換え画像 -->
    <div class="img_sample_information_2_grn_tpl"></div>
    <!-- 置き換え画像 終了 -->

    変更前

    1
    2
    3
    
    <!-- 置き換え画像 -->
    <div class="img_sample_information_2_grn_tpl"></div>
    <!-- 置き換え画像 終了 -->

    変更後
    <div>...</div><script>...</script> に書き換えます。
    また、手順 1. で設定した画像アセットのファイルキー(「president」)は
    3 行目の garoon.assets.images.getUrl('...') の括弧内に設定します。

    1
    2
    3
    4
    5
    
    <!-- 置き換え画像 -->
    <script type="text/javascript">
    document.write("<img src='" + garoon.assets.images.getUrl('president') + "' width='240px' alt='画像' />");
    </script>
    <!-- 置き換え画像 終了 -->

おわりに

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

information

この Tips は、2021 年 5 月版 Garoon で動作を確認しています。