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

Garoon開発Tips

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

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

更新日：2023年02月01日

はじめに

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

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

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

動作環境と注意事項

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

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

カスタマイズ

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

変更できる箇所

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

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

操作手順

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

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

書き換えポイント

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

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

「ポートレットの内容」からを探します。
その中で、から、またはからが、ひとつの項目を表しています。
このテンプレートでは、左エリアに5つ、右エリアに4つの項目があります。

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


      <!-- リンクエリア -->
      <ul>
        <!-- 各リンク -->
        <li class="item_simple_linklist_grn_tpl">
          <div class="link_simple_linklist_grn_tpl"><a href="#">IT窓口</a></div>
          <div class="item_description_simple_linklist_grn_tpl">システムや機材に関する相談・依頼</div>
        </li>
        <!-- 各リンク 終了 -->  
        <!-- 各リンク -->
        <li class="item_simple_linklist_grn_tpl">
          <div class="link_simple_linklist_grn_tpl"><a href="#">社内システムガイド</a></div>
          <div class="item_description_simple_linklist_grn_tpl">社内システムに関するマニュアル（プリンター設定など）</div>
        </li>
        <!-- 各リンク 終了 -->
      </ul>
      <!-- リンクエリア 終了 -->

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

21
22
23
24
25
26


        <!-- 各リンク -->
        <li class="item_simple_linklist_grn_tpl">
          <div class="link_simple_linklist_grn_tpl"><a href="#">IT窓口</a></div>
          <div class="item_description_simple_linklist_grn_tpl">システムや機材に関する相談・依頼</div>
        </li>
        <!-- 各リンク 終了 -->

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

変更前
1

<div class="link_simple_linklist_grn_tpl"><a href="#">IT窓口</a></div>
変更後（例：サイボウズのWebサイトに変更）
1

<div class="link_simple_linklist_grn_tpl"><a href="https://cybozu.co.jp/">IT窓口</a></div>
Garoon内のページにリンクしたい場合は、「#」を「/g/」以降の文字列に差し替えます。

変更前
1

<div class="link_simple_linklist_grn_tpl"><a href="#">IT窓口</a></div>
変更後（例：Garoon掲示板へのリンクに変更）
1

<div class="link_simple_linklist_grn_tpl"><a href="/g/bulletin/view.csp?cid=3&aid=6">IT窓口</a></div>

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

おわりに

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

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

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

Garoon開発Tips