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

Garoon開発Tips

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

固定リンクがコピーされました

更新日：2023年02月01日

はじめに

固定リンクがコピーされました

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

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

動作環境と注意事項

固定リンクがコピーされました

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

カスタマイズ

固定リンクがコピーされました

変更できる箇所

固定リンクがコピーされました

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

操作手順

固定リンクがコピーされました

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

書き換えポイント

固定リンクがコピーされました

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

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

からで囲われている<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>

他のリンクについても、同様の手順でリンク先を変更してください。

表示する画像を変更する

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

画像アセットに表示したい画像を追加します。
1. Garoonシステム管理 > 各アプリケーションの管理 > 画像アセット一覧を開きます。
2. 「画像アセットを追加する」をクリックし、画像アセットに表示したい画像を追加します。
3. 「ファイルキー」のフィールドに、ファイルキーの値を設定します。
  このとき、ファイルキーには半角英数字、ハイフン（-）、アンダーバー（_）、ピリオド（.）、チルダ（~）のみを使用します。
  本記事では、追加した画像のファイルキーを「president」に設定しています。
4. ファイルキーの入力が完了したら、一番下の「追加する」をクリックします。
5. 画像アセットに画像が追加されました。
  
  操作方法の詳細はヘルプページ「画像アセットの追加」を参照してください。

「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>
<!-- 画像エリア 終了 -->

のすぐ下の行に注目します。
<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ポートレットをカスタマイズする方法も紹介しています。

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

Garoon開発Tips