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