Garoon ポータルテンプレート:デザインリンク集(HTML)

目次

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

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

操作手順

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

書き換えポイント

項目名をクリックしたときのリンク先を変更する
  1. 「ポートレットの内容」から <!-- リンクエリア --> を探します。
    その中で、<!-- 各リンク --> から <!-- 各リンク 終了-->、または <!-- 各子階層リンク --> から <!-- 各子階層リンク 終了 --> が、ひとつの項目を表しています。
    このテンプレートでは、左エリアに 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>
          <!-- リンクエリア 終了 -->
  2. 項目を表す <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>
  3. 他の項目についても、同様の手順でリンク先を変更してください。

おわりに

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

information

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