このガイドでは、Discourse のサブカテゴリボックスの外観をカスタマイズする方法について説明します。これには、注目のトピックのスタイルの調整、「ボックス」スタイルの変更、カテゴリの説明の切り捨ての管理が含まれます。
必要なユーザーレベル: 管理者
Discourse のサブカテゴリボックスは、フォーラムの視覚的な魅力と整理を強化するためにカスタマイズできます。このガイドでは、注目のトピックのスタイル、「ボックス」スタイル、カテゴリの説明の切り捨てを含む、サブカテゴリボックスのさまざまなカスタマイズオプションについて説明します。
注目のトピックを使用したボックスのカスタマイズ
注目のトピックを含むサブカテゴリボックスに、大胆でカラフルな外観を作成するには、カスタム CSS を使用できます。この方法では、ロゴが削除され、各サブカテゴリに個別の背景色が適用されます。
サブカテゴリボックスを次のように表示するには、次の手順を実行します。
- サイトの管理パネルに移動します。
- [カスタマイズ] > [テーマ] に移動します。
- 新しいテーマを作成するか、既存のテーマを編集します。
- テーマに次の CSS を追加します。
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
CSS セレクターと色を、特定のカテゴリ名と目的の色スキームに合わせて調整してください。
「ボックス」スタイルのカスタマイズ
サブカテゴリに「ボックス」スタイルを使用している場合は、同様にカスタマイズできます。
テーマの CSS に次のコードを追加します。
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > h3 {
color: white;
}
}
}
ここでも、セレクターと色をフォーラムの構造とデザインの好みに合わせて変更してください。
カテゴリの説明の切り捨ての管理
デフォルトでは、Discourse はカテゴリボックスの説明を 4 行に切り捨てます。カスタム CSS を使用してこれを調整できます。
説明を 2 行に短縮するには、テーマに次の CSS を追加します。
.category-boxes .description .overflow {
max-height: 3em;
}
表示したい行数に合わせて max-height の値を調整してください。
モバイルデバイスに関する考慮事項
デスクトップで「サブカテゴリ付きボックス」スタイルを使用する場合、モバイルデバイスでもトピックが表示される可能性があることに注意してください。この動作は、小さい画面での可読性を維持するために、Discourse の設計で意図されている場合があります。
モバイルレイアウトを調整する必要がある場合は、モバイルビュー用の特定の CSS を追加するか、よりカスタマイズされたソリューションについて Discourse テーマ開発者に相談する必要がある場合があります。