Garoon ポータルテンプレート：デザインリンク集（HTML）

Index

• はじめに
• 動作環境と注意事項
• カスタマイズ
  • 変更できる箇所
  • 操作手順
  • 書き換えポイント
• おわりに

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

このテンプレートでは、項目名やその説明文、項目をクリックしたときのリンク先を変更できます。

操作手順

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

書き換えポイント

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

1. 「ポートレットの内容」から<!-- リンクエリア -->を探します。
   その中で、<!-- 各リンク -->から<!-- 各リンク 終了-->、または<!-- 各子階層リンク -->から<!-- 各子階層リンク 終了 -->が、ひとつの項目を表しています。
   このテンプレートでは、左エリアに5つ、右エリアに4つの項目があります。
2. 項目を表す<li>下の<div> ... </div>で囲われている<a href="#" ...>...</a>に注目します。
   <a href="#" ...>の # 部分を書き換えるとリンク先を変更できます。
   • 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まる URL に差し替えます。
     変更前
     変更後（例：サイボウズの Web サイトに変更）
     
   • Garoon 内のページにリンクしたい場合は、「#」を「/g/」以降の文字列に差し替えます。 
     変更前
     変更後（例：Garoon 掲示板へのリンクに変更）
     
3. 他の項目についても、同様の手順でリンク先を変更してください。

おわりに

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

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