Garoon ポータルテンプレート：行き先案内板 ver.2（HTML） – cybozu developer network

Index

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

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

このテンプレートでは、案内板のパネルのタイトルや説明文、クリックしたときのリンク先、パネルの背景/枠線の色や、アイコンの色を変更できます。

パネルの文言やクリックしたときのリンク先や色を変更できる

操作手順

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

書き換えポイント

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

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

パネルの背景/枠線の色や、アイコンの背景/枠線の色を変更する

「ポートレットの内容」からを探します。
からまでがひとつのパネルを表しています。このテンプレートには9つあります。
パネルの背景/枠線の色の変更：
のすぐ下の行の<li class="link_item_guide_2_grn_tpl" style="background-color: #e6f1fc; border-color: #0e74dd;">に注目します。
パネルの背景/枠線の色は、style="background-color: #6桁の英数字; border-color: #6桁の英数字;" の「#6桁の英数字」部分を書き換えることで変更できます。
- 色はカラーコードで指定します。カラーコードは、 https://www.colordic.org/ （外部サイト）のような、カラーコードを調べるサイトを使って調べます。
  変更前
  変更後（例：背景色を■に、枠線の色を■に変更）
アイコンの背景/枠線の色の変更：
のすぐ下の行の<div class="link_item_left_guide_2_grn_tpl" style="background-color: #0e74dd; border-color: #0e74dd;">に注目します。
アイコンの背景/枠線の色は、style="background-color: #6桁の英数字; border-color: #6桁の英数字;" の「#6桁の英数字」部分を書き換えることで変更できます。
- 色は上記と同じ、カラーコードで指定します。
  変更前
  変更後（例：背景と枠線の色を■に変更）
他のパネルについても、同様の手順で色を変更してください。

おわりに

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

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