このガイドでは、Discourse のサブカテゴリボックスの外観をカスタマイズする方法について説明します。具体的には、注目のトピックのスタイル調整、「Boxes」スタイルの変更、およびカテゴリ説明の切り捨て管理が含まれます。
必要なユーザーレベル：管理者
Discourse のサブカテゴリボックスは、フォーラムの視覚的な魅力と整理整頓を向上させるためにカスタマイズ可能です。このガイドでは、注目のトピックのスタイル、「Boxes」スタイル、カテゴリ説明の切り捨てなど、サブカテゴリボックスのさまざまなカスタマイズオプションについて順を追って説明します。
注目のトピックを含むボックスのカスタマイズ
注目のトピックを含むサブカテゴリボックスに大胆で鮮やかな外観を持たせるには、カスタム CSS を使用できます。この方法ではロゴを非表示にし、各サブカテゴリに独自の背景色を適用します。
以下のようにサブカテゴリボックスの外観を変更する方法です：
- サイトの管理パネルに移動します
- [カスタマイズ] > [テーマ] に移動します
- 新しいテーマを作成するか、既存のテーマを編集します
- テーマに以下の CSS を追加します：
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
CSS セレクターと色を、特定の カテゴリ名や希望する配色に合わせて調整してください。
「Boxes」スタイルのカスタマイズ
サブカテゴリに「Boxes」スタイルを使用している場合、同様にカスタマイズできます：
テーマの CSS に以下のコードを追加します：
.category-programming .category-boxes {
.category-box {
border: none;
.category-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
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 {
-webkit-line-clamp: 2;
}
表示させたい行数に合わせて -webkit-line-clamp の値を調整してください。
モバイルデバイスでの考慮事項
デスクトップで「サブカテゴリ付きのボックス」スタイルを使用する場合、モバイルデバイスではトピックが引き続き表示される可能性がある点にご注意ください。これは、小さな画面での可読性を維持するための Discourse の設計上の意図的な動作である可能性があります。
モバイルレイアウトを調整する必要がある場合は、モバイルビュー用の特定の CSS を追加するか、より個別化された解決策のために Discourse のテーマ開発者に相談してください。
