CSS(カスケーディングスタイルシート)を使用すれば、ヘルプセンターの見た目と操作感を簡単にカスタマイズすることができます。このレシピ集は、ヘルプセンターのカスタマイズに役立ちます。
Guide内のCSSにアクセスして編集するには、「CSSまたはJavaScriptをカスタマイズする」を参照してください。
CSSを初めて使う方や、しばらく使ってない方は、以下のチュートリアルに詳しい説明があるので参考にしてください。
-
「Getting started with CSS(CSS入門)」は、初心者のためのもっとも網羅的なCSSチュートリアルです。自習できる演習例を示し、プログラミング言語の基本機能を解説します。
-
「CSS Beginner Tutorial(CSS初心者チュートリアル)」は、使い始めるために必要な最低限のCSSの知識が得られます。
ヘルプセンターのテンプレート言語または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ピクセルですが、このデフォルトサイズを必要に応じて変更できます。
ロゴのサイズを変更するには
- Guideで、サイドバーにあるデザインをカスタマイズアイコン(
)をクリックします。
- 「テーマを編集」をクリックします。
- 「CSS」をクリックして、CSSスタイルシートを開き、次のルールを検索します。
.logo img { max-height: 37px; }
コード内を検索するには、コード編集画面内をクリックし、Ctrl+Fキー(Windows)またはCmd+Fキー(Mac)を押します。
- ロゴ画像の高さに合わせて".logo.img"セレクタのheightプロパティを編集します。
- 「保存」をクリックします。
検索
検索ボックスでナレッジベースおよびコミュニティの情報を検索すると、検索結果ページにリンクが表示されます。検索ボックスが不要な場合は、削除できます。詳細については、ヘルプセンターテンプレートガイドの「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;
}