ヘルプサイトの見た目をカスタマイズしてみよう

顧客向けに提供するヘルプサイトなどを作成するとき、自社のブランドやイメージに合わせて見た目をカスタマイズしたいことが多いと思います。今回はRunbookで作成したヘルプサイトの見た目をカスタマイズする方法について紹介します。

どんなカスタマイズができるのか

Runbookで作成されたサイトの見た目を、設定でカスタマイズできます。

• サイトのアイコン
• ヘッダーのロゴ
• ヘッダーのメニュー
• ポータル画面のデザイン

また、より高度なカスタマイズを行うこともできます。

• フッターのHTML
• スタイルシートによるカスタマイズ
• JavaScriptによるカスタマイズ

では順に見てみましょう。

サイトのアイコン、ヘッダーロゴ

ワークスペースの設定画面から、「基本設定」で設定します。

アイコンは、ブラウザのウインドウやタブなどにタイトルとともに表示されます。ロゴ画像はサイトのヘッダーに表示されます。ロゴ画像をクリックしたときにワークスペースのトップ以外のURLに遷移させることもできます（外部公開サイトのみに適用されます）。

ヘッダーメニュー

外部公開サイトのヘッダーに表示されるメニューを設定します。

ポータル画面

続いて、ポータル画面（ワークスペースのトップ画面）の見た目をカスタマイズします。今回はカバー画像をブランドに合うものに変更してみました。

高度なカスタマイズ

「カスタマイズ設定」より、さらに高度なカスタマイズを行うこともできます。

スタイルシート

スタイルシートの設定では、CSSファイルをアップロードすることで、サイト内の任意のスタイルを変更することができます。

設定可能なCSSクラス名の一覧は、こちらを参照してください。

CSSクラス名は、サービスのアップデートにより変更される場合があります。

JavaScript

サードパーティ製のライブラリなどを使用する場合は、JavaScriptファイルをインポートすることができます。

フッターのHTML

ワークスペース内の全ページに表示されるフッターをHTMLで設定します。今回はコピーライトを表示したかったので、以下のように設定しました。

<div style="padding:8px 0 16px 0;font-size:14px;color:#999;text-align:center">© qloba, inc. <a href="https://www.runbook.jp" target="_blank" style="text-decoration:underline">Powered by Runbook</a></div>

設定後の確認

設定後、外部公開サイトにアクセスすると、以下のようになります。

アイコン、ヘッダーロゴ、ヘッダーメニュー、フッターなど、それぞれの設定項目が反映されていることがわかります。独自ドメインを使えば、自社専用に制作されたサイトとしか見えません。

今回はヘルプサイトの見た目をカスタマイズする方法を紹介しました。みなさんも自分だけの素敵なヘルプサイトを作ってみてください。