TOPページに下記デザインのショートカットリンク（青囲み部分）を設置する方法を紹介します。

①ポータル管理 ＞ ページテンプレート（トップページ）

テンプレートがデフォルトの状態であれば12行目から、それ以外の場合は

 <div class="container pt-4 px-md-0 pt-md-5 pb-md-4">

の直後に、下記のHTMLコードを記述します。

<!-- TOPページバナー ※後で分かるよう任意の名前を付けておくと良いです -->
<div class="row mb-3 mb-md-5">
   <div class="col-12 col-md-4 mb-1 mb-md-0">
       <div class="p-1 h-100">
           <a href="リンクURL" class="row align-items-center no-gutters h-100 bg-white rounded bp-Explore_ItemLink">
               <div class="col-3 h-100">
                   <div class="h-100 text-center p-1">
                       <div class="d-flex h-100 py-4 align-content-center justify-content-center text-white text-decoration-none rounded bp-Explore_ItemIcon"><i class="fal fa-rocket"></i></div>
                   </div>
               </div>
               <div class="col-9">
                   <div class="d-block p-3">
                       <div class="font-weight-bold">使い方ガイド</div>
                       <div class="small">まずはここからスタート</div>
                   </div>
               </div>
           </a>
       </div>
   </div>
   <div class="col-12 col-md-4 mb-1 mb-md-0">
       <div class="p-1 h-100">
           <a href="リンクURL" class="row align-items-center no-gutters h-100 bg-white rounded bp-Explore_ItemLink">
               <div class="col-3 h-100">
                   <div class="h-100 text-center p-1">
                       <div class="d-flex h-100 py-4 align-content-center justify-content-center text-white text-decoration-none rounded bp-Explore_ItemIcon"><i class="fal fa-comment-lines"></i></div>
                   </div>
               </div>
               <div class="col-9">
                   <div class="d-block p-3">
                       <div class="font-weight-bold">困ったときに</div>
                       <div class="small">よくあるご質問をまとめました</div>
                   </div>
               </div>
           </a>
       </div>
   </div>
   <div class="col-12 col-md-4 mb-1 mb-md-0">
       <div class="p-1 h-100">
           <a href="リンクURL" class="row align-items-center no-gutters h-100 bg-white rounded bp-Explore_ItemLink">
               <div class="col-3 h-100">
                   <div class="h-100 text-center p-1">
                       <div class="d-flex h-100 py-4 align-content-center justify-content-center text-white text-decoration-none rounded bp-Explore_ItemIcon"><i class="fal fa-envelope"></i></div>
                   </div>
               </div>
               <div class="col-9">
                   <div class="d-block p-3">
                       <div class="font-weight-bold">お問い合わせ</div>
                       <div class="small">サポートが必要なら</div>
                   </div>
               </div>
           </a>
       </div>
   </div>
</div>
<!-- /TOPページバナー ※後で分かるよう任意の名前を付けておくと良いです -->

②ポータル管理 ＞ ページテンプレート（CSS）

CSSのテンプレートに、下記コードを追加します。後で追加したことが分かるよう、現コードの最後に記述することをお勧めします。

.bp-Explore_ItemLink {
   box-shadow: 0 1px 5px rgba(200, 200, 200, 0.4);
   transition: .2s ease-in;
}
.bp-Explore_ItemLink:link {
   text-decoration: none;
}
.bp-Explore_ItemLink:hover {
   transform: translateY(-3px);
}
.bp-Explore_ItemIcon {
   background:#f7bc1e;
}
.bp-Explore_ItemIcon i {
   font-size: 2rem;
}

上記では、FontAwesomeのアイコンを埋め込んでいます。
※FontAwesomeは、Webサイトやアプリケーションなどに埋め込むことができる、商標利用が可能なWebアイコンフォントです。

例えば一番左のロケットアイコンは、下記のように記述されています。

<i class="fal fa-rocket"></i></div>

FontAwesome上の別のアイコンを使用したい場合は、該当アイコンの詳細ページでHTMLをコピーし、"fal fa-rocket" の部分を書き換えてください。​

応用：アイコンを任意のものに変えたい
アイコンを任意のものに変えたい場合は、の代わりにタグを記述してください。

1. ポータル管理 ＞ページテンプレートのアセットに画像をアップロード
2. の部分を削除し、タグを記述

 <img src="***" title="任意のタイトル">

***には、アップロードしたアセットの右側真ん中のアイコン（下記の黄色囲み部分）をクリックすると出てくるコードを挿入してください。

3. CSSを追加

.bp-Explore_ItemIcon i {
   font-size: 2rem;
}

の直後に下記コードを追加

.bp-Explore_ItemIcon img {
   width: 60%;
}

応用：アイコンの背景色を変えたい
文字色は、ポータル管理 ＞ デザインの「リンク」と同色になるよう設定されています。アイコンの背景色はCSSで変えることが可能です。

下記の ”#f7bc1e” 部分を、カラーツール（googleのカラーピッカー等）を使用して希望の色に変更してください。

.bp-Explore_ItemIcon {
   background:#f7bc1e;
}