はじめに
このページでは、ポータルテンプレートをご利用環境に合わせて、文言やリンク先を変更する方法を説明します。
その他のテンプレートは、HTML ポータルテンプレートギャラリーをご覧ください。
テンプレートを使ってポータルを追加する手順は、Garoon ヘルプサイトをご確認ください。
動作環境と注意事項
- テンプレートを使ってポータルを追加する機能は、クラウド版 Garoon の環境が必要です。
- HTML を編集するときの注意点は、Garoon ヘルプサイトをご覧ください。
- カスタマイズに関する技術的なサポート等は行っておりません。また、カスタマイズを行ったポートレットについては、その動作を保証するものではありません。
カスタマイズ
変更できる箇所
このテンプレートでは、案内板のパネルのタイトルや説明文、クリックしたときのリンク先やパネルの背景色を変更できます。
操作手順
- ポータルの一覧画面から、テンプレートから追加したポータルを表示します。
- ポータルに設置されたポートレットの歯車マークから「HTMLポートレットの編集」をクリックします。HTMLポートレットの変更画面が表示されます。
- 「ポートレットの内容」を編集します。編集する箇所については、書き換えポイントをご参照ください。
- 編集が終わったら、[変更する]ボタンをクリックします。
書き換えポイント
パネルをクリックしたときのリンク先を変更する
- 「ポートレットの内容」から
<!-- リンクブロック -->
を探します。<!-- リンクブロック -->
から<!-- リンクブロック 終了 -->
までがひとつのパネルを表しています。このテンプレートには9つあります。 <!-- リンクURL -->
から<!-- リンクURL 終了 -->
で囲われている<a href="#" ...>...</a>
に注目します。<a href="#" ...>
の # 部分を書き換えるとリンク先を変更できます。- 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まる URL に差し替えます。
変更前
変更後(例:サイボウズの Web サイトに変更)
- Garoon 内のページにリンクしたい場合は、「#」を「/g/」以降の文字列に差し替えます。
変更前
変更後(例:Garoon 掲示板へのリンクに変更)
- 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まる URL に差し替えます。
- 他のパネルについても、同様の手順でリンク先を変更してください。
パネルの背景色を変更する
- 「ポートレットの内容」から
<!-- リンクブロック -->
を探します。<!-- リンクブロック -->
から<!-- リンクブロック 終了 -->
までがひとつのパネルを表しています。このテンプレートには9つあります。 <!-- リンクブロック -->
のすぐ下の行の<li class="link_item_guide_grn_tpl" style="background: #0e74dd;">
に注目します。style="background: #6桁の英数字"
の 「#6桁の英数字」を書き換えると、パネルの背景色を変更できます。- 色はカラーコードで指定します。カラーコードは、 https://www.colordic.org/ (外部サイト)のような、カラーコードを調べるサイトを使って調べます。
変更前
変更後(例:背景色を■に変更)
- 色はカラーコードで指定します。カラーコードは、 https://www.colordic.org/ (外部サイト)のような、カラーコードを調べるサイトを使って調べます。
- 他のパネルについても、同様の手順でパネルの色を変更してください。
おわりに
cybozu developer network では、他にも JavaScript を使って HTML ポートレットをカスタマイズする方法も紹介しています。
このTipsは、2020年11月版 Garoonで確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。