ヘルプセンターテーマのカスタマイズ

Suite Growth、Professional、Enterprise、Enterprise Plus Professional、Enterpriseプラン

ファストパス：Guide管理 >「デザインをカスタマイズ」>「テーマを表示」>「コードを編集」

Guideの管理者がWebに精通しているなら、ヘルプセンターのカスタマイズテーマの構築に使用されるページコードを直接編集することもできます。カスタマイズされたテーマには以下のものが含まれます。

編集可能なテンプレート。各ページ（記事ページ、カテゴリページ、コミュニティトピックページなど）のレイアウトを定義します。
カスタムページ。いちから作成し、ヘルプセンターの任意の場所に配置することができます。
ヘルプセンターのグローバルヘッダーおよびフッター

また、Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内およびカスタムページ内のコンテンツを操作することもできます。さらに、テーマに含まれているJavaScriptやCSSファイルを使用して、サイト全体のテーマの外観と動作を変更することができます。独自のHTMLコードを使用してヘルプセンターのテーマを編集することを検討している場合は、「安全でないHTMLを記事内に許可する方法」を参照してください。

ヒント：ヘルプセンターのブランドとカスタマイズについてサポートが必要な場合は、Dizianaをご覧ください。Dizianaでは、購入してすぐに使用できる多数のテーマとテンプレートを提供し、ヘルプセンターを常時稼働させるのに役立ちます。

メモ：トライアル版のユーザーには、コード編集オプションが含まれるProfessionalプランが適用されますが、その後購入時にSuite Teamプランをお選びいただいた場合、コード編集オプションは利用できなくなります。

この記事では、次のトピックについて説明します。

ページテンプレートとカスタムページをHTMLとCurlybarsでカスタマイズする
CSSまたはJavaScriptをカスタマイズする
CSSおよびHTML内で変数を使用する

ページテンプレートとカスタムページをHTMLとCurlybarsでカスタマイズする

ヘルプセンターのHTMLは、ページタイプ、カスタムページ、グローバルヘッダーとフッターのレイアウトを定義する編集可能なテンプレートに含まれています。また、Curlybarsと呼ばれるフル機能のテンプレート言語を使用して、これらの要素の内容を作成または操作することができます。

メモ：Enterpriseプランでは、カスタムページを作成できます。さらに、複数のバージョンのテンプレートが必要な場合は、記事用、セクション用、およびカテゴリ用に追加のページテンプレートを作成できます。

以下のページタイプまたはページ要素のテンプレートをカスタマイズしたり、独自のカスタムページを作成することができます。

カスタムページ（custom_page.hbs）：いちから作成し、ヘルプセンター内のどこからでもリンクできるカスタムページ
記事ページ（article_page.hbs）：ナレッジベースの個々の記事ページ
カテゴリページ（category_page.hbs）：ランディングページ
コミュニティ投稿一覧ページ（community_post_list_page.hbs）
コミュニティ投稿ページ（community_post_page.hbs）
コミュニティトピック一覧ページ（community_topic_list_page.hbs）
コミュニティトピックページ（community_topic_page.hbs）
投稿ページ（contributions_page.hbs）：エンドユーザーによる投稿、コミュニティコメント、および記事コメントのリスト
文書見出し（document_head.hbs）：文書のheadタグ
エラーページ（error_page.hbs）：存在しないページにユーザーがアクセスしようとしたときに表示するメッセージ
フッター（footer.hbs）：ヘルプセンターページの最下部に表示されるバー
ヘッダー（header.hbs）：ヘルプセンターページの最上部に表示されるバー
ホームページ（home_page.hbs）：ヘルプセンターの最上位レベルのランディングページ
新規コミュニティ投稿ページ（new_community_post_page.hbs）
新規リクエストページ（new_request_page.hbs）：リクエストまたはチケットの送信フォーム
リクエスト詳細（request_page.hbs）：個々のリクエストページまたはチケットページ
リクエストページ（requests_page.hbs）：ユーザーに割り当てられた/ユーザーがCCに含まれているリクエストおよびチケットのリスト
検索結果（search_results.hbs）：検索結果の表示フォーマット
セクションページ（section_page.hbs）：ランディングページ
フォローしているページ（subscriptions_page.hbs）：ユーザーがフォローしているカテゴリ、セクション、記事のリスト
ユーザープロフィールページ（user_profile_page.hbs）

メモ：「テーマの編集」を使用して、標準テーマのページテンプレートやCSS、JavaScriptに変更を加えた場合や、独自のテーマを作成した場合は、カスタムテーマとして保存されます。カスタムテーマはZendeskではサポートされておらず、新機能がリリースされても自動的にアップデートされません（「ヘルプセンターの標準のテーマとカスタムテーマ」を参照）。

ページテンプレートを編集するには

Guideのサイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
編集したいテーマで「カスタマイズ」をクリックします。
「コードを編集」をクリックします。
「テンプレート」セクションで、編集するテンプレートまたはカスタムページをクリックします。
コードエディタにページが開きます。
コードビューを使用して、テンプレートまたはページを編集します。
以下のものは、追加、削除、並べ替えを行うことができます。
- テンプレート式：ページ内のコンテンツを表示し、操作するために使用します。
  たとえば、breadcrumbsテンプレートヘルパーの{{breadcrumbs}}は、ページに階層リンクナビゲーション要素を表示します。テンプレート式の詳しい使い方については、「Help Center Templates（ヘルプセンターのテンプレート）」を参照してください。
- 動的コンテンツのプレースホルダ（「翻訳されたテキストを追加する」を参照）
- サードパーティによって作成された埋め込み可能なウィジェット（Twitter検索ウィジェットなど）
- HTMLマークアップ
右上隅にある「保存」をクリックして、変更を保存します。
テンプレートを編集した場合、加えた変更は、編集したテンプレートをベースにしているテーマ内のすべてのページに適用されます。
変更をプレビューするには、「プレビュー」をクリックします（「ヘルプセンターテーマのプレビュー」を参照）。
必要に応じてその他のコード変更を行ない、「保存」をクリックします。
ページテンプレートまたはカスタムページの編集を完了したら、編集画面を終了します。

ヒント：こちらのZendeskのブログ記事では、さまざまなナレッジベースの記事テンプレートのアイデアを紹介しています。

CSSまたはJavaScriptをカスタマイズする

JavaScriptコードを追加したり、サイトのCSSをカスタマイズすることができます。ヘルプセンターで少々コードを書くことで可能になる操作については、以下のリソースを参照してください。

メモ：「テーマの編集」を使用して、標準テーマのページテンプレートやCSS、JavaScriptに変更を加えた場合や、独自のテーマを作成した場合は、カスタムテーマとして保存されます。カスタムテーマはZendeskによってサポートされないため、新機能がリリースされても、自動更新されません。「ヘルプセンターの標準のテーマとカスタムテーマ」を参照してください。

CSSまたはJavaScriptをカスタマイズするには

Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
編集したいテーマで「カスタマイズ」をクリックします。
「コードを編集」をクリックします。
「script.js」をクリックしてJavaScriptを編集するか、「style.css」をクリックしてCSSを編集します。
コードエディタにファイルが開きます。
コードビューで、JavaScriptまたはCSSを追加または編集します。
右上にある「保存」をクリックして、変更を保存します。
変更がテーマに反映されます。
変更をプレビューするには、「プレビュー」をクリックします（「ヘルプセンターテーマのプレビュー」を参照）。
必要に応じてその他のコード変更を行ない、「保存」をクリックします。
編集を完了したら、ファイルを閉じます。

CSSおよびHTML内で変数を使用する

設定パネルまたはマニフェストファイルで選択した色やフォント、テーマの画像などのプロパティは変数に格納されます。これらの変数は、テーマのstyle.cssファイルで使用できます。また、HTMLページテンプレート内でCurlybars式を使用して変数を参照することもできます。

変数は、同じ値を複数の場所で指定し、すばやく更新したい場合に便利です。プロパティに変更を加えると、変数が使用されているすべての場所にその更新が反映されます。デフォルトのCopenhagenテーマには、色とフォントの変数がいくつか含まれています。名前とラベルを変更したり、変数を削除したり、独自の変数？を追加したりすることができます（マニフェスト設定のリファレンスを参照）。

標準のCopenhagenテーマには、デフォルトで以下の変数があります：

brand_color：主要なナビゲーション要素のためのブランドの色
brand_text_color：マウスのカーソルを合わせたとき、およびアクティブ状態にあるときのブランドのカラー
text_color：本文および見出し要素のテキストの色
link_color：リンク要素のテキストの色
background_color：ヘルプセンターの背景色
heading_font：見出しのフォント
text_font：本文テキストのフォント
logo：会社のロゴ
favicon：ブラウザのアドレスバーに表示されるアイコン
homepage_background_image：ホームページのヒーロー画像
community_background_image：コミュニティのトピックページのヒーロー画像
community_image：ホームページのコミュニティセクションに表示される画像

CSSおよびHTML内での変数の使用については、以下のトピックを参考にしてください。

CSS内における変数の使用例
HTML内のCurlybarsにおける変数の使用例

CSS内における変数の使用例

色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、テーマのstyle.cssファイルで使用できます。

たとえば、CSSのデフォルト変数のいくつかを次の構文で使用できます。

$brand_color
$brand_tex_color
$heading_font
$text_font

CSSファイルでは、通常の値を割り当てるのと同じ方法で、CSSプロパティに変数を割り当てます。以下はその例です。

.button {
  label-color: $text_font;
}

次のように、1組の中括弧を使用してヘルパーをCSS式に埋め込むこともできます。

max-width: #{$search_width}px

HTML内のCurlybarsにおける変数の使用例

色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、HTMLページテンプレートのCurlybars式で参照できます。

変数は、Curlybars内のsettingsオブジェクトのプロパティになります。ほかのすべてのCurlybarsオブジェクトと同様に、二重中括弧とドット表記を使用して、プロパティをページテンプレートに挿入できます。

以下はその例です。

{{settings.color_1}}：色の16進数値。以下はその例です。#FF00FF
{{{settings.font_1}}：フォントスタック。たとえば、systemは「'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"」のように定義します。
{{settings.homepage_background_image}}：このフィールドに格納されたファイルへのパス。以下はその例です。p8.zdassets.com/theme_assets/...
{{settings.range_input}}：範囲入力の値。

settingsオブジェクトは任意のヘルパーの入力として使用できます。以下はその例です。

{{is settings.enabled}} ... {{/is}}