Garoon ポータルテンプレート：行き先案内板（HTML）

Garoon 開発 Tips

Garoon ポータルテンプレート：行き先案内板（HTML）

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

はじめに

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

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

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

動作環境と注意事項

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

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

カスタマイズ

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

変更できる箇所

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

このテンプレートでは、案内板のパネルのタイトルや説明文、クリックしたときのリンク先やパネルの背景色を変更できます。

操作手順

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

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

書き換えポイント

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

パネルをクリックしたときのリンク先を変更する

「ポートレットの内容」から  を探します。
 から  までがひとつのパネルを表しています。このテンプレートには 9 つあります。

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


    <!-- リンクブロック -->
    <li class="link_item_guide_grn_tpl" style="background: #0e74dd;">
      <!-- リンクURL -->
      <a href="#" class="link_item_a_guide_grn_tpl">
      <!-- リンクURL 終了 -->
        <div class="link_item_left_guide_grn_tpl">
          <div class="link_item_icon_base_guide_grn_tpl">
            <!-- アイコン -->
            <div class="link_item_icon_guide_grn_tpl"></div>
            <!-- アイコン 終了 -->
          </div>
        </div><div class="link_item_right_guide_grn_tpl">
          <!-- リンクタイトル -->
          <h5 class="link_item_title_guide_grn_tpl">出張申請</h5>
          <!-- リンクタイトル 終了 -->
          <div class="partition_guide_grn_tpl"></div>
          <!-- 説明 -->
          <div class="link_item_text_guide_grn_tpl">出張する際に必要な手続きやルールを掲載しています</div>
          <!-- 説明 終了 -->
        </div>
      </a>
    </li>
    <!-- リンクブロック 終了 -->

 から  で囲われている <a href="#" ...>...</a> に注目します。

<a href="#" ...> の「#」部分を書き換えるとリンク先を変更できます。
19 20 21

 <a href="#" class="link_item_a_guide_grn_tpl"> 
- 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まる URL に差し替えます。
  
  変更前
  1
  
  <a href="#" class="link_item_a_guide_grn_tpl">
  変更後（例：サイボウズの Web サイトに変更）
  1
  
  <a href="https://cybozu.co.jp/" class="link_item_a_guide_grn_tpl">
- Garoon 内のページにリンクしたい場合は、「#」を「/g/」以降の文字列に差し替えます。
  
  変更前
  1
  
  <a href="#" class="link_item_a_guide_grn_tpl">
  変更後（例：Garoon 掲示板へのリンクに変更）
  1
  
  <a href="/g/bulletin/view.csp?cid=3&aid=6" class="link_item_a_guide_grn_tpl">
他のパネルについても、同様の手順でリンク先を変更してください。

パネルの背景色を変更する

「ポートレットの内容」から  を探します。

 から  までがひとつのパネルを表しています。このテンプレートには 9 つあります。

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


    <!-- リンクブロック -->
    <li class="link_item_guide_grn_tpl" style="background: #0e74dd;">
      <!-- リンクURL -->
      <a href="#" class="link_item_a_guide_grn_tpl">
      <!-- リンクURL 終了 -->
        <div class="link_item_left_guide_grn_tpl">
          <div class="link_item_icon_base_guide_grn_tpl">
            <!-- アイコン -->
            <div class="link_item_icon_guide_grn_tpl"></div>
            <!-- アイコン 終了 -->
          </div>
        </div><div class="link_item_right_guide_grn_tpl">
          <!-- リンクタイトル -->
          <h5 class="link_item_title_guide_grn_tpl">出張申請</h5>
          <!-- リンクタイトル 終了 -->
          <div class="partition_guide_grn_tpl"></div>
          <!-- 説明 -->
          <div class="link_item_text_guide_grn_tpl">出張する際に必要な手続きやルールを掲載しています</div>
          <!-- 説明 終了 -->
        </div>
      </a>
    </li>
    <!-- リンクブロック 終了 -->

 のすぐ下の行の <li class="link_item_guide_grn_tpl" style="background: #0e74dd;"> に注目します。

style="background: #6 桁の英数字" の「6 桁の英数字」を書き換えると、パネルの背景色を変更できます。
17 18

 <li class="link_item_guide_grn_tpl" style="background: #0e74dd;">
- 色はカラーコードで指定します。カラーコードは、 WEB色見本原色大辞典 - HTMLカラーコードのような、カラーコードを調べるサイトを使って調べます。
  
  変更前
  1 2
  
   <li class="link_item_guide_grn_tpl" style="background: #0e74dd;">
  変更後（例：背景色を緑に変更）
  1 2
  
   <li class="link_item_guide_grn_tpl" style="background: #008080;">
他のパネルについても、同様の手順でパネルの色を変更してください。

おわりに

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

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

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

Garoon 開発 Tips