Garoonポータルテンプレート:行き先案内板(HTML)

目次

はじめに

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

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

動作環境と注意事項

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

カスタマイズ

変更できる箇所

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

操作手順

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

書き換えポイント

パネルをクリックしたときのリンク先を変更する
  1. 「ポートレットの内容」から<!-- リンクブロック -->を探します。
    <!-- リンクブロック -->から<!-- リンクブロック 終了 -->までがひとつのパネルを表しています。このテンプレートには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>
        <!-- リンクブロック 終了 -->
  2. <!-- リンクURL -->から<!-- リンクURL終了 -->で囲われている<a href="#" ...>...</a>に注目します。

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

    19
    20
    21
    
          <!-- リンクURL -->
          <a href="#" class="link_item_a_guide_grn_tpl">
          <!-- リンクURL終了 -->
    • 外部サイトにリンクしたい場合は、「#」を「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">
  3. 他のパネルについても、同様の手順でリンク先を変更してください。

パネルの背景色を変更する
  1. 「ポートレットの内容」から<!-- リンクブロック -->を探します。

    <!-- リンクブロック -->から<!-- リンクブロック 終了 -->までがひとつのパネルを表しています。このテンプレートには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>
        <!-- リンクブロック 終了 -->
  2. <!-- リンクブロック -->のすぐ下の行の<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カラーコード (External link) のような、カラーコードを調べるサイトを使って調べます。

      変更前

      1
      2
      
      <!-- リンクブロック -->
      <li class="link_item_guide_grn_tpl" style="background: #0e74dd;">

      変更後(例:背景色を緑に変更)

      1
      2
      
      <!-- リンクブロック -->
      <li class="link_item_guide_grn_tpl" style="background: #008080;">
  3. 他のパネルについても、同様の手順でパネルの色を変更してください。

おわりに

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

information

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