コードを編集GuideのマネージャーがWebに精通しているなら、ヘルプセンターのカスタマイズテーマの構築に使用されるページコードを直接編集してもかまいません。ページコードは、ヘルプセンターのグローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレートに格納されています。Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。特別なテンプレートでは、JavaScriptを追加したり、CSSをカスタマイズすることができます。ProfessionalまたはEnterpriseが必要です。ヘルプセンターのブランドとカスタマイズについてサポートが必要な場合は、Dizianaをご覧ください。Dizianaでは、購入してすぐに使用できる多数のテーマとテンプレートを提供し、ヘルプセンターを常時稼働させるのに役立ちます。Professionalプランが用意されています。ProfessionalまたはEnterpriseを購入していない場合、テーマコードにアクセスすることはできません。この記事では、次のトピックについて説明します。ページテンプレートをHTMLとCurlybarsでカスタマイズするCSSまたはJavaScriptをカスタマイズするCSSおよびHTML内で変数を使用する関連記事ヘルプセンターのブランド設定Guideのテーマ作成の制限ヘルプセンターのテンプレート言語のレシピ集ページテンプレートをHTMLとCurlybarsでカスタマイズするヘルプセンターのHTMLは、グローバルヘッダーとフッターと同様に、ページタイプごとのレイアウトを定義する編集可能なテンプレート内に格納されています。Curlybarsというフル機能のテンプレート言語を使用してヘルプセンターにアクセスし、ページテンプレート内のコンテンツを操作することもできます。Enterpriseでは、複数のバージョンのテンプレートが必要な場合は、記事、セクション、およびカテゴリ用に追加のページテンプレートを作成できます。以下のページタイプまたはページ要素のテンプレートをカスタマイズできます。「テーマの編集」を使用して、標準テーマのページテンプレートやCSS、JavaScriptに変更を加えた場合や、独自のテーマを作成した場合は、カスタムテーマとして保存されます。カスタムテーマはZendeskによってサポートされないため、新機能がリリースされても、自動更新されません。「ヘルプセンターの標準のテーマとカスタムテーマ」を参照してください。編集するテーマをクリックして、開きます。「コードを編集」をクリックします。「テンプレート」セクションで、編集するテンプレートをクリックします。コードエディタにページが開きます。コードビューを使用して、テンプレートを編集します。以下のものは、追加、削除、並べ替えを行うことができます。テンプレート式:ページ内のコンテンツを表示し、操作するために使用します。breadcrumbsテンプレートヘルパーの{{breadcrumbs}}は、ページに階層リンクナビゲーション要素を表示します。Templates(ヘルプセンターのテンプレート)」を参照してください。動的コンテンツのプレースホルダ(「翻訳されたテキストを追加する」を参照)サードパーティによって作成された埋め込み可能なウィジェット(Twitter検索ウィジェットなど)HTMLマークアップ右上にある「保存」をクリックして、変更を保存します。変更は、編集したテンプレートをベースにしているテーマ内のすべてのページに適用されます。変更をプレビューするには、「プレビュー」をクリックします(「ヘルプセンターテーマのプレビュー」を参照)。必要に応じてその他のコード変更を行ない、「保存」をクリックします。ページテンプレートの編集を完了したら、編集画面を終了します。CSSまたはJavaScriptをカスタマイズするJavaScriptコードを追加したり、サイトのCSSをカスタマイズすることができます。わずかなコーディングを行うことで、ヘルプセンターで可能になる操作については、以下のリソースを参照してください。「テーマの編集」を使用して、標準テーマのページテンプレートやCSS、JavaScriptに変更を加えた場合や、独自のテーマを作成した場合は、カスタムテーマとして保存されます。カスタムテーマはZendeskによってサポートされないため、新機能がリリースされても、自動更新されません。「ヘルプセンターの標準のテーマとカスタムテーマ」を参照してください。編集するテーマをクリックして、開きます。「コードを編集」をクリックします。「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内での変数の使用については、以下のトピックを参考にしてください。色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、テーマのstyle.cssファイルで使用できます。CSSのデフォルト変数のいくつかを次の構文で使用できます。$brand_color$brand_tex_color$heading_font$text_fontCSSファイルでは、通常の値を割り当てるのと同じ方法で、CSSプロパティに変数を割り当てます。$text_font;}次のように、1組の中括弧を使用してヘルパーをCSS式に埋め込むこともできます。色、フォント、およびテーマ画像用に設定したプロパティは変数に格納され、HTMLページテンプレートのCurlybars式で参照できます。変数は、Curlybars内のsettingsオブジェクトのプロパティになります。ほかのすべてのCurlybarsオブジェクトと同様に、二重中括弧とドット表記を使用して、プロパティをページテンプレートに挿入できます。{{settings.color_1}}:色の16進数値。例:#FF00FF{{{settings.font_1}}:フォントスタック。sans-serif"」のように定義します。{{settings.homepage_background_image}}:このフィールドに格納されたファイルへのパス。例:p8.zdassets.com/theme_assets/...{{settings.range_input}}:範囲入力の値。settingsオブジェクトは任意のヘルパーの入力として使用できます。