【IBISE活用のコツ】FAQのTOPページにショートカットリンクを作成する方法
見出し画像

【IBISE活用のコツ】FAQのTOPページにショートカットリンクを作成する方法

IBISE (アイビス) | 簡単サポートツール

こんにちは。IBISE note編集部です。
IBISEはノンコーディングで簡単にFAQページを作ることができることが特徴ですが、ページテンプレートから直接HTMLやCSSを修正しサイトにオリジナル性を持たせることも可能です。

今回は、TOPページに下記デザインのショートカットリンク(青囲み部分)を設置する方法を紹介します。※実際の画面はこちらをご覧ください

TOPページショートカット

TOPページの一番目につく場所に設置できるため、

・特に見せたいFAQカテゴリや記事
・連携している外部サイト
・キャンペーン案内

など、希望のページやサイトへの遷移率を上げることができます。ぜひお試しください。

①ポータル管理 > ページテンプレート(トップページ)

テンプレートがデフォルトの状態であれば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アイコンフォントです。

画像2

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

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

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

応用:アイコンを任意のものに変えたい

アイコンを任意のものに変えたい場合は、<i class="***"></i>の代わりに<img>タグを記述してください。

1. ポータル管理 >ページテンプレートのアセットに画像をアップロード
2.<i class="***"></i>の部分を削除し、<img>タグを記述

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

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

画像2

3.CSSを追加

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

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

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

応用:アイコンの背景色を変えたい

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

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

.bp-Explore_ItemIcon {
   background:#f7bc1e;
}


いかがでしたでしょうか。本操作は、IBISEの無料トライアルでも検証できます。IBISE未導入の方も、ご興味がありましたらこちらよりお気軽にお申し込みください!

最後まで読んでいただき、ありがとうございました。Twitterでもシェアしていただけますと、とても嬉しいです!

やったー!また見てくださいね!
IBISE (アイビス) | 簡単サポートツール
株式会社PRAZNAと申します。FAQページや問い合わせフォームを誰でも簡単に作成できるカスタマーサポートツール 「IBISE」(アイビス) を提供しています。 https://ibise.com/