ヘルプセンターのCSSレシピ集

現在のプランを確認

CSS（カスケーディングスタイルシート）を使用すれば、ヘルプセンターの見た目と操作感を簡単にカスタマイズすることができます。このレシピ集は、ヘルプセンターのカスタマイズに役立ちます。

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

Guide内のCSSにアクセスして編集するには、「CSSまたはJavaScriptをカスタマイズする」を参照してください。

CSSを初めて使う方や、しばらく使ってない方は、以下のチュートリアルに詳しい説明があるので参考にしてください。

• 「Getting started with CSS（CSS入門）」は、初心者のためのもっとも網羅的なCSSチュートリアルです。自習できる演習例を示し、プログラミング言語の基本機能を解説します。

• 「CSS Beginner Tutorial（CSS初心者チュートリアル）」は、使い始めるために必要な最低限のCSSの知識が得られます。

ヘルプセンターのテンプレート言語またはJavaScriptを使用してヘルプセンターの外観をカスタマイズすることもできます。

• ヘルプセンターテンプレートのリファレンス
• ヘルプセンターのテンプレート言語のレシピ集
• ヘルプセンターのJavaScriptレシピ集

目次

このレシピ集は、ヘルプセンターの各要素に関する複数のセクションで構成されています。各セクションにあるCSSコードは、ヘルプセンターのテーマのスタイルシートに直接コピー＆ペーストして使用できます。コードはそのまま使うことも、必要に応じて編集することもできます。

レシピ集にはすべての実例が示されているわけではありませんが、HTMLテンプレートとCSSスタイルシートを編集すれば、想像のつく限りさまざまなスタイルを作成することができます。

ヘッダーとフッター

• ヘッダーとフッターの背景色を設定する
• ヘッダーとフッターの領域の高さを調整する
• ヘッダーとフッターの前後の余白を調整する
• 選択した言語の文字書式を設定する
• 「リクエストを送信」リンクの文字書式を設定する
• 「リクエストを送信」リンクを非表示にする
• 「ログイン」リンクの文字書式を設定する
• ロゴのサイズを変更する

検索

• 検索フィールドの幅と高さを調整する
• 検索フィールドの背景色を設定する
• 検索語の文字書式を設定する
• 検索結果ページの見出しの文字書式を設定する
• 検索結果に含まれるキーワードのハイライト表示を設定する
• ナレッジベースおよびコミュニティページの見出しの文字書式を設定する
• 検索結果の行間を調整する
• 検索結果の文字書式を設定する
• 検索結果のリンクの色を設定する

階層リンク

• 階層リンクの前後の余白を調整する
• 階層リンクの文字書式を設定する
• 階層リンクの色を設定する
• 階層リンクのポインタ文字（>）を設定する

記事リスト

• 記事のリストの前後の余白を調整する
• 記事の行間を調整する
• 記事リンクの文字書式を設定する
• 記事リンクの色を設定する

ナレッジベースの記事

• 記事の見出しの文字書式を設定する
• 記事の本文の文字書式を設定する
• 記事リンクの色を設定する
• 著者の名前の文字書式を設定する
• 最終変更日付の文字書式を設定する
• 「この記事は役に立ちましたか？」の文字書式を設定する
• 投票カウンタの文字書式を設定する
• 「他にご質問がございましたら、～までお問い合わせください」の文字書式を設定する
• コメントの見出しの文字書式を設定する
• コメントの本文の文字書式を設定する

コミュニティの質問と回答

• 質問の見出しの文字書式を設定する
• 質問の本文の文字書式を設定する
• 質問リンクの色を設定する
• 質問の投稿者名の文字書式を設定する
• 質問が投稿されてからの時間の文字書式を設定する
• 「質問の共有」リンクの文字書式を設定する
• 回答の見出しの文字書式を設定する
• 回答の本文の文字書式を設定する
• 回答の投稿者名の文字書式を設定する
• 回答が投稿されてからの時間の文字書式を設定する
• 「回答の共有」リンクの文字書式を設定する

ヘッダーとフッター

ヘッダーには、テーマとユーザーの役割に応じてロゴやその他の要素が表示されます。フッターには、リンク、会社情報、法務関連情報を含めることができます。

目次へ戻る

ヘッダーとフッターの背景色を設定する

次のセレクタのbackground-colorプロパティを変更または追加します。

ヘッダー：

.header {
  background-color: #666;
}

フッター：

.footer {
  background-color: #333;
}

ヘッダーとフッターの領域の高さを調整する

次のセレクタのheightプロパティを変更または追加します。

ヘッダー：

.header {
   height: 70px;
}

フッター：

.footer {
   height: 20px;
}

ヘッダーとフッターの前後の余白を調整する

次のセレクタのmargin-bottomとmargin-topのプロパティを変更または追加します。

ヘッダー：

.header {
     margin-bottom: 20px;
}

フッター：

.footer {
     margin-top: 10px;
}

選択した言語の文字書式を設定する

次のセレクタとプロパティを追加します。

.language-selector .dropdown-toggle {
  color: green;
}

「リクエストを送信」リンクの文字書式を設定する

header.hbsテンプレートには、レスポンシブ対応のために、デスクトップ版とモバイル版のヘッダーが同じテンプレート内に含まれています。デスクトップ版はnav-wrapper-desktopというクラスを持つdivに、モバイル版はnav-wrapper-mobileというクラスを持つdivに含まれています。各divにはそれぞれ、「リクエストを送信」リンクが含まれています。リンクの外観を変更するには、デスクトップ版とモバイル版のCSSルールを作成し、それらのセレクタの優先度を高める必要があります。

style.cssファイルに以下のセレクタを追加し、テキストプロパティを修正します。

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

「リクエストを送信」リンクを非表示にする

style.cssファイルに以下のセレクタを追加します。

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

「ログイン」リンクの文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

.login {
  font-size: 14px;
  color: green;
}

ロゴのサイズを変更する

推奨のロゴ画像サイズは、200×50ピクセルですが、このデフォルトサイズを必要に応じて変更できます。

メモ：推奨サイズよりも大きなロゴを使用するには、Zendesk Supportインスタンスの外部のどこかにロゴをホスティングする必要があります。

ロゴのサイズを変更するには

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

   .logo img {
     max-height: 37px;
   }

   コード内を検索するには、コード編集画面内をクリックし、Ctrl+Fキー（Windows）またはCmd+Fキー（Mac）を押します。

4. ロゴ画像の高さに合わせて".logo.img"セレクタのheightプロパティを編集します。
5. 「保存」をクリックします。

検索

検索ボックスでナレッジベースおよびコミュニティの情報を検索すると、検索結果ページにリンクが表示されます。検索ボックスが不要な場合は、削除できます。詳細については、ヘルプセンターテンプレートガイドの「searchヘルパー」を参照してください。

目次へ戻る

検索フィールドの幅と高さを調整する

次のセレクタのwidthとheightの値を変更します。

大きな検索ボックス：

.search input[type=search] {
  height: 50px;
  width: 90%;
}

小さな検索ボックス：

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

検索フィールドの背景色を設定する

次のセレクタのbackgroundプロパティを変更します。

大きな検索ボックス：

.search input[type=search] {
  background: #999;
}

小さな検索ボックス：

.search-small input[type=search] {
  background: #999;
}

検索語の文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

大きな検索ボックス：

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

小さな検索ボックス：

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

検索結果ページの見出しの文字書式を設定する

検索結果ページの見出しには、検索結果の件数が表示されます。以下に例を示します。「"シリアル番号"の検索結果 9件」のように表示されます。

次のセレクタがスタイルシートにない場合は追加し、文字プロパティを変更または追加します。

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

検索結果に含まれるキーワードのハイライト表示を設定する

検索結果内でハイライト表示される検索語は、.search-result-descriptionコンテナの下にあるインライン要素<em>でラップされます。黄色の背景に太字でハイライト表示されるようにするには、次のようにします。

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

ナレッジベースおよびコミュニティページの見出しの文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

検索結果の行間を調整する

次のセレクタのmargin-bottomプロパティを追加します。

.search-result {
  margin-bottom: 20px;
}

検索結果の文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

検索結果のリンクの色を設定する

次のセレクタのcolorプロパティを追加または編集します。

.search-result a {
  color: #484;
}

階層リンク

階層リンクは、ヘルプセンター内のナビゲートに使用します。階層リンクが不要な場合は、削除できます。詳細については、ヘルプセンターテンプレートガイドの「breadcrumbsヘルパー」を参照してください。

目次へ戻る

階層リンクの前後の余白を調整する

次のセレクタのpaddingプロパティを追加または編集します。

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

階層リンクの文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

階層リンクの色を設定する

次のセレクタとプロパティを追加します。

.breadcrumbs li a {
  color: #484;
}

階層リンクのポインタ文字（>）を設定する

次のセレクタのcolorおよびcontentプロパティを修正します。

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

記事リスト

記事のリストは、テーマに応じて、ホームページ、カテゴリランディングページ、セクションランディングページで使用されます。

目次へ戻る

記事のリストの前後の余白を調整する

次のセレクタの各paddingプロパティを追加または変更します。

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

記事の行間を調整する

次のセレクタのmargin-bottomプロパティを修正します。

.article-list > li {
  margin-bottom: 10px;
}

記事リンクの文字書式を設定する

次のセレクタの文字プロパティを追加または編集します。

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

記事リンクの色を設定する

次のセレクタとプロパティを追加します。

.article-list li a {
  color: #FFF;
}

ナレッジベースの記事

ナレッジベースの記事の外観を変更することができます。

目次へ戻る

記事の見出しの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

記事の本文の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

記事リンクの色を設定する

次のセレクタとプロパティを追加または変更します。

.article-body a {
  color: #930;
}

著者の名前の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

最終変更日付の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

「この記事は役に立ちましたか？」の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

投票カウンタの文字書式を設定する

以下に例を示します。「8人中6人がこの記事が役に立ったと評価しました」のように設定します。次のセレクタとプロパティを追加または変更します。

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

「他にご質問がございましたら、～までお問い合わせください」の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

コメントの見出しの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

コメントの本文の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

コミュニティの質問と回答

コミュニティのコンテンツの外観を変更することができます。

目次へ戻る

質問の見出しの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

質問の本文の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

質問リンクの色を設定する

次のセレクタとプロパティを追加または変更します。

.question-text a {
  color: #484;
}

質問の投稿者名の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

リンクの色を設定するには、次のセレクタとプロパティを追加または変更します。

.question-author a {
  color: #484;
}

質問の投稿者の名前、質問が投稿されてからの経過時間、および共有リンクは、通常1つのページにまとめられているため、これら3つの要素を同じにすることが設計的には望ましい。そうするには、次のようにセレクタを結合します。

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

質問が投稿されてからの時間の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

「質問の共有」リンクの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

回答の見出しの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

回答の本文の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

回答の投稿者名の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

リンクの色を設定するには、次のセレクタとプロパティを追加または変更します。

.answer-author a {
  color: #484;
}

回答の投稿者の名前、回答が投稿されてからの経過時間、および共有リンクは、通常1つのページにまとめられているため、これら3つの要素を同じにすることが設計的には望ましい。そうするには、次のようにセレクタを結合します。

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

回答が投稿されてからの時間の文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

「回答の共有」リンクの文字書式を設定する

次のセレクタとプロパティを追加または変更します。

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}