日本語
  1. Zendeskヘルプ
  2. Guide
  3. Guideの使い方
  4. Zendesk Help Centerのカスタマイズ

ヘルプセンターテーマのカスタマイズ（Guide ProfessionalおよびEnterprise）

Charles Nadeau
  • 編集済み

professional enterpriseプラン

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

GuideのマネージャーがWebに精通しているなら、ヘルプセンターのカスタマイズテーマの構築に使用されるページコードを直接編集してもかまいません。ページコードは、ヘルプセンターのグローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレートに格納されています。また、Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。特別なテンプレートでは、JavaScriptを追加したり、CSSをカスタマイズすることができます。

ヘルプセンターのテーマのページコードにアクセスするには、Guide ProfessionalまたはEnterpriseが必要です。
ヒント： ヘルプセンターのブランドとカスタマイズについてサポートが必要な場合は、Dizianaをご覧ください。Dizianaでは、購入してすぐに使用できる多数のテーマとテンプレートを提供し、ヘルプセンターを常時稼働させるのに役立ちます。
メモ： トライアル版の場合は、テーマコードの編集を含むGuide Professionalプランが用意されています。試用期間が終了し、Guide ProfessionalまたはEnterpriseを購入していない場合、テーマコードにアクセスすることはできません。

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

関連記事

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

ヘルプセンターのHTMLは、グローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレート内に格納されています。また、Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。

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

以下のページタイプまたはページ要素のテンプレートをカスタマイズできます。

  • 記事ページ（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によってサポートされないため、新機能がリリースされても、自動更新されません。「ヘルプセンターの標準のテーマとカスタムテーマ」を参照してください。

 

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

  1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
  2. 編集するテーマをクリックして、開きます。
  3. 「コードを編集」をクリックします。

  4. 「テンプレート」セクションで、編集するテンプレートをクリックします。

    コードエディタにページが開きます。

  5. コードビューを使用して、テンプレートを編集します。

    以下のものは、追加、削除、並べ替えを行うことができます。

    • テンプレート式：ページ内のコンテンツを表示し、操作するために使用します。

      たとえば、breadcrumbsテンプレートヘルパーの{{breadcrumbs}}は、ページに階層リンクナビゲーション要素を表示します。テンプレート式の詳しい使い方については、「Help Center Templates（ヘルプセンターのテンプレート）」を参照してください。

    • 動的コンテンツのプレースホルダ（「翻訳されたテキストを追加する」を参照）
    • サードパーティによって作成された埋め込み可能なウィジェット（Twitter検索ウィジェットなど）
    • HTMLマークアップ
  6. 右上にある「保存」をクリックして、変更を保存します。

    変更は、編集したテンプレートをベースにしているテーマ内のすべてのページに適用されます。

  7. 変更をプレビューするには、「プレビュー」をクリックします（「ヘルプセンターテーマのプレビュー」を参照）。

  8. 必要に応じてその他のコード変更を行ない、「保存」をクリックします。

    ページテンプレートの編集を完了したら、編集画面を終了します。

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

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

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

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

  1. Guideで、サイドバーにあるデザインをカスタマイズアイコン（）をクリックします。
  2. 編集するテーマをクリックして、開きます。
  3. 「コードを編集」をクリックします。

  4. 「script.js」をクリックしてJavaScriptを編集するか、「style.css」をクリックしてCSSを編集します。

    コードエディターにファイルが開きます。

  5. コードビューで、JavaScriptまたはCSSを追加または編集します。
  6. 右上にある「保存」をクリックして、変更を保存します。

    変更がテーマに反映されます。

  7. 変更をプレビューするには、「プレビュー」をクリックします（「ヘルプセンターテーマのプレビュー」を参照）。

  8. 必要に応じてその他のコード変更を行ない、「保存」をクリックします。

    編集を完了したら、ファイルを閉じます。

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内における変数の使用例

色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、テーマの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}}
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。

関連記事

関連記事

Powered by Zendesk