| Suite | Growth、Professional、EnterpriseまたはEnterprise Plus |
| Support | + Guide ProfessionalまたはEnterprise |
CSS（カスケーディングスタイルシート）を使用すれば、ヘルプセンターの見た目と操作感を簡単にカスタマイズすることができます。このレシピ集は、ヘルプセンターのカスタマイズに役立ちます。
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ピクセルですが、このデフォルトサイズを必要に応じて変更できます。
ロゴのサイズを変更するには
- 「ナレッジベース管理者」で、サイドバーにあるデザインのカスタマイズ（
）をクリックします。 - 「テーマを編集」をクリックします。
- 「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;
}
47件のコメント
Redington, Jacquelyn
I am looking for a way to change the the font size and weight to the form fields when an end user is filling out a form. We use our platform as an internal HR ticketing system and we want to provide some instructions to a request form, it would nice nice to have the information bolded especially the acknowledgement check boxes that we have. I am assuming that I would need to input the each customized field ID to display the way that I want. If anyone has done this, please let me know. Thank you
0
Henrik Guldager Andersen
Hi, I am looking for a way to format the boxes on the user request form. background color etc.
Thank you for you help
Henrik Andersen
0
Jane M Langschied
I am looking for a recipe to automatically generate a Table of Contents in every article based on the heading selected. Is there a recipe already created?
1
Andrey Nikolaev
Can I change an article's CSS template for just one section or category rather than the entire Help Center?
0
Max
Hello there,
I am trying to modify the appearance of Send a request link button, but nothing changes.. I am with Copenhagen v3.1.0. Is it because the colour chosen on the homepage og theming is overriding my code ?
Here is my code if it can help
Thank you loads !
0
Casey Keefe
Hi Greg Katechis - Thanks! Yes, we have been getting the same result. This code has been on the live page for months with no reported issues as well.
For a bit more scope - we are essentially trying to add some login functionality to one of the forms and when updating the code, I came across this script error, so figured I would try and fix it while adding the new functionality.
0
Greg Katechis
Thanks for sharing! I just tried a for loop on my new request page and I was getting a similar linting "error", but when I loaded the page, it was executing properly. I can bring this to our dev team to see what's going on here, but first I'd like to know if you're seeing the same behavior as I am. Just let me know if the code is working and if it is, at least we know that's not the issue and we can narrow the scope of the fix.
0
Casey Keefe
Thank you Greg Katechis ! This code is currently on new_request_page.hbs
0
Greg Katechis
Hi Casey! It's difficult to say for sure, but one possibility is that you're adding this to your script.js file, that could be one possibility. You don't need to wrap any js code in script tags on that file, so this is one possible error that would show up. If that isn't what you're doing, could you let me know which file you're adding this to?
0
Casey Keefe
Hi Everyone - Anyone have any ideas why the closing tag for <script> here is showing in red? I've gone line-by-line, but can't seem to figure it out. Thanks in advance!
0
サインインしてコメントを残します。