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

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

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

このテンプレートでは、箇条書きの説明文や、末尾の「リンク」をクリックしたときのリンク先を変更できます。

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

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

1. 「ポートレットの内容」から<!-- 内容-->を探します。
   以下のように、<!-- 内容 -->から<!-- 内容 終了 -->までが、ポートレットの内容（箇条書きの項目）を表しています。このテンプレートでは、3つの項目があります。

   16 17 18 19 20

   <!-- 内容 --> <li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="#">リンク</a>）</li> <li class="item_information_grn_tpl">【経理部より】先月の交通費申請は明日までに実施してください。（<a href="#">リンク</a>）</li> <li class="item_information_grn_tpl">【情報システム部より】グループウェアの使い方に迷ったら「グループウェア活用情報」の掲示板へ！（<a href="#">リンク</a>）</li> <!-- 内容 終了 -->

2. 項目を表す<li> ... </li>で囲われている<a href="#" ...>リンク</a>に注目します。
   <a href="#" ...>の「#」部分を書き換えるとリンク先を変更できます。

   17	<li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="#">リンク</a>）</li>

   • 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まるURLに差し替えます。

     変更前

     1	<li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="#">リンク</a>）</li>

     変更後（例：サイボウズのWebサイトに変更）

     1	<li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="https://cybozu.co.jp/">リンク</a>）</li>

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

     変更前

     1	<li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="#">リンク</a>）</li>

     変更後（例：Garoon掲示板へのリンクに変更）

     1	<li class="item_information_grn_tpl">【総務部より】「テレワーク実施ルール」 を公開しました。（<a href="/g/bulletin/view.csp?cid=3&aid=6">リンク</a>）</li>

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

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

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