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

Garoon 開発 Tips

Garoon ポータルテンプレート：行き先案内板 ver.2（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_2_grn_tpl" style="background-color: #e6f1fc; border-color: #0e74dd;">
      <!-- リンクURL -->
      <a href="#" class="link_item_a_guide_2_grn_tpl">
      <!-- リンクURL 終了 -->
        <div class="link_item_left_guide_2_grn_tpl" style="background-color: #0e74dd; border-color: #0e74dd;">
          <div class="link_item_icon_base_guide_2_grn_tpl">
            <!-- アイコン -->
            <div class="link_item_icon_guide_2_grn_tpl"></div>
            <!-- アイコン 終了 -->
          </div>
        </div><div class="link_item_right_guide_2_grn_tpl">
          <!-- リンクタイトル -->
          <h5 class="link_item_title_guide_2_grn_tpl">出張申請</h5>
          <!-- リンクタイトル 終了 -->
          <div class="partition_guide_2_grn_tpl"></div>
          <!-- 説明 -->
          <div class="link_item_text_guide_2_grn_tpl">出張する際に必要な手続きやルールを掲載しています</div>
          <!-- 説明 終了 -->
        </div>
      </a>
    </li>
    <!-- リンクブロック 終了 -->

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

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

 <a href="#" class="link_item_a_guide_2_grn_tpl"> 
- 外部サイトにリンクしたい場合は、「#」を「http」または「https」から始まるURLに差し替えます。
  
  変更前
  1
  
  <a href="#" class="link_item_a_guide_2_grn_tpl">
  変更後（例：サイボウズのWebサイトに変更）
  1
  
  <a href="https://cybozu.co.jp/" class="link_item_a_guide_2_grn_tpl">
- Garoon内のページにリンクしたい場合は、「#」を「/g/」以降の文字列に差し替えます。
  
  変更前
  1
  
  <a href="#" class="link_item_a_guide_2_grn_tpl">
  変更後（例：Garoon掲示板へのリンクに変更）
  1
  
  <a href="/g/bulletin/view.csp?cid=3&aid=6" class="link_item_a_guide_2_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_2_grn_tpl" style="background-color: #e6f1fc; border-color: #0e74dd;">
      <!-- リンクURL -->
      <a href="#" class="link_item_a_guide_2_grn_tpl">
      <!-- リンクURL 終了 -->
        <div class="link_item_left_guide_2_grn_tpl" style="background-color: #0e74dd; border-color: #0e74dd;">
          <div class="link_item_icon_base_guide_2_grn_tpl">
            <!-- アイコン -->
            <div class="link_item_icon_guide_2_grn_tpl"></div>
            <!-- アイコン 終了 -->
          </div>
        </div><div class="link_item_right_guide_2_grn_tpl">
          <!-- リンクタイトル -->
          <h5 class="link_item_title_guide_2_grn_tpl">出張申請</h5>
          <!-- リンクタイトル 終了 -->
          <div class="partition_guide_2_grn_tpl"></div>
          <!-- 説明 -->
          <div class="link_item_text_guide_2_grn_tpl">出張する際に必要な手続きやルールを掲載しています</div>
          <!-- 説明 終了 -->
        </div>
      </a>
    </li>
    <!-- リンクブロック 終了 -->

パネルの背景/枠線の色の変更

のすぐ下の行に注目します。

パネルの背景/枠線の色は、style="background-color: # 6桁の英数字; border-color: # 6桁の英数字;"の「6桁の英数字」部分を書き換えることで変更できます。
17 18

 <li class="link_item_guide_2_grn_tpl" style="background-color: #e6f1fc; border-color: #0e74dd;">
- 色はカラーコードで指定します。カラーコードは、 WEB色見本原色大辞典 - HTMLカラーコードのような、カラーコードを調べるサイトを使って調べます。
  
  変更前
  1 2
  
   <li class="link_item_guide_2_grn_tpl" style="background-color: #e6f1fc; border-color: #0e74dd;">
  変更後（例：背景色をピンクに、枠線の色を紫に変更）
  1 2
  
   <li class="link_item_guide_2_grn_tpl" style="background-color: #f5e7f5; border-color: #b72ab5;">
アイコンの背景/枠線の色の変更

のすぐ下の行に注目します。

アイコンの背景/枠線の色は、style="background-color: #6 桁の英数字; border-color: #6 桁の英数字;"の「6桁の英数字」部分を書き換えることで変更できます。
21 22

 <div class="link_item_left_guide_2_grn_tpl" style="background-color: #0e74dd; border-color: #0e74dd;">
- 色は上記と同じ、カラーコードで指定します。
  
  変更前
  1
  
  <div class="link_item_left_guide_2_grn_tpl" style="background-color: #0e74dd; border-color: #0e74dd;">
  変更後（例：背景と枠線の色を紫に変更）
  1
  
  <div class="link_item_left_guide_2_grn_tpl" style="background-color: #b72ab5; border-color: #b72ab5;">
他のパネルについても、同様の手順で色を変更してください。

おわりに

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

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

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

Garoon 開発 Tips