Making custom CSS changes on your site

[Discourse]

このガイドでは、CSSの紹介、DiscourseでのCSSの追加場所、ブラウザのインスペクションツールを使用して適切なセレクターを見つける方法を含め、DiscourseサイトでCSSを変更する方法を説明します。

必須ユーザーレベル：管理者

まとめ

このガイドでは、以下の内容をカバーします。

1. CSSと主要な概念の簡単な紹介
2. テーマコンポーネントを使用してDiscourseサイトにCSSを追加する方法
3. ブラウザのインスペクションツールを使用して適切なCSSセレクターを見つける方法

CSSの基本を理解する

CSSはCascading Style Sheetsの略です。理解すべき3つの主要な概念を以下に示します。

1. 構造: CSSルールは、セレクター、プロパティ、値で構成されます。

p {
  color: red;
}

• セレクター: p (すべてのHTML <p>タグを対象とします)
• プロパティ: color
• 値: red

2. カスケード: 最後に適用されたルールが優先されます。たとえば、次のようになります。

p {
  color: red;
}
p {
  color: green;
}

段落は、最後に適用されたルールであるため緑色になります。

3. 特異性: より具体的なルールは、それより一般的でないルールをオーバーライドします。たとえば、次のようになります。

div p {
  color: green;
}
p {
  color: red;
}

div pはpよりも具体的であるため、div内の段落は緑色のままになります。

DiscourseサイトへのCSSの追加

DiscourseサイトにCSSを追加するには、次の手順を実行します。

1. サイドバーから外観 > テーマとコンポーネントに移動するか、サイトの場合はこのURLに従ってください: https://yoursite.com/admin/customize/components
   

   

2. それぞれ「インストール」と「新規作成」をクリックします。
   

   

3. テーマコンポーネントに名前を付けて、「作成」をクリックします。
   

   

4. コンポーネントを適用するテーマを選択します。
   

   

5. 「コードの編集」をクリックします。
   

   

6. CSSタブにCSSを追加します。
   

   

7. 「保存」をクリックして変更を適用します。
   

   

ユーザーが選択可能なテーマが複数ある場合は、関連するすべてのテーマにテーマコンポーネントを追加してください。

適切なCSSセレクターの見つけ方

ブラウザのインスペクションツールを使用して、適切なCSSセレクターを見つけます。

1. 変更したい要素を右クリックします。

2. コンテキストメニューから「検証」を選択します。
   

   

3. 開発者ツールパネルで、要素セレクターを見つけます。
   

   

4. 対応するセレクターをクリックし、CSSルールを追加します。
   

   

5. ルールをコピーし、テーマコンポーネントのCSSセクションに貼り付け、他のルールを削除します。
   

   

より具体的なセレクターについては、Discourseの既存のスタイルで使用されているセレクターをコピーして、テーマコンポーネントで変更する必要がある場合があります。

上記の手順を実演するビデオはこちらです。

変更が適用されない場合は、以下を確認してください。

• テーマコンポーネントがテーマで有効になっていること。
• CSSルールが既存のスタイルをオーバーライドするのに十分な特異性を持っていること。

追加リソース

• MDN CSSドキュメント
• Chrome DevToolsドキュメント
• Freecodecamp
• Discourseテーマの使用に関する初心者ガイド

[bloomexperiment (Tracey)]

これをウィキにすることは可能ですか？「Where Do I Add My CSS?」という見出しの下の情報は更新が必要です。既存のテーマをインストールした場合（新しいセットアップウィザードを通じてテーマを選択した場合、おそらくそうでしょう）、もう「Edit CSS/HTML」ボタンはありません。現在では、既存のテーマに追加されるテーマコンポーネントを使用します。

Making custom CSS changes on your site

This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…

ウィキ化され次第、更新できます。

[bloomexperiment (Tracey)]

これで完了です