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

Suite Growth以上のプランで利用可能すべてのGuideプランで利用可能

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

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

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

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

テーマのコード（テンプレート、JavaScript、CSSなど）を変更すると、テーマのプレビューに</>アイコンが表示されます。このアイコンは、テーマのコードが変更されたため、今後そのテーマには新しい機能やアップデートが提供されなくなることを示します。

ヒント：ヘルプセンターのブランディングやカスタマイズでサポートが必要な場合は、ZendeskマーケットプレイスでZendeskやサードパーティの開発者が作成した新しいテーマを購入することができます。

メモ：トライアル版のユーザーには、コード編集オプションが含まれる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（ヘルプセンターのテンプレート）」を参照してください。
- 動的コンテンツのプレースホルダ（「翻訳されたテキストを追加する」を参照）
- サードパーティが作成した埋め込み可能なウィジェット
- 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}}