はじめに
この記事では、ポータルテンプレートをご利用環境に合わせて、文言やリンク先を変更する方法を説明します。
その他のテンプレートは、
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> <!-- リンクブロック 終了 -->
-
<!-- リンク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">
-
-
他のパネルについても、同様の手順でリンク先を変更してください。
パネルの背景色を変更する
-
「ポートレットの内容」から
<!-- リンクブロック -->
を探します。<!-- リンクブロック -->
から<!-- リンクブロック 終了 -->
までがひとつのパネルを表しています。このテンプレートには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で動作を確認しています。