このガイドでは、CSSの紹介、DiscourseでのCSSの追加場所、ブラウザのインスペクションツールを使用して適切なセレクターを見つける方法を含め、DiscourseサイトでCSSを変更する方法を説明します。
必須ユーザーレベル：管理者
まとめ
このガイドでは、以下の内容をカバーします。
- CSSと主要な概念の簡単な紹介
- テーマコンポーネントを使用してDiscourseサイトにCSSを追加する方法
- ブラウザのインスペクションツールを使用して適切なCSSセレクターを見つける方法
CSSの基本を理解する
CSSはCascading Style Sheetsの略です。理解すべき3つの主要な概念を以下に示します。
- 構造: CSSルールは、セレクター、プロパティ、値で構成されます。
p { color: red; }
- セレクター:
p(すべてのHTML<p>タグを対象とします)- プロパティ:
color- 値:
red
- カスケード: 最後に適用されたルールが優先されます。たとえば、次のようになります。
p { color: red; } p { color: green; }段落は、最後に適用されたルールであるため緑色になります。
- 特異性: より具体的なルールは、それより一般的でないルールをオーバーライドします。たとえば、次のようになります。
div p { color: green; } p { color: red; }
div pはpよりも具体的であるため、div内の段落は緑色のままになります。DiscourseサイトへのCSSの追加
DiscourseサイトにCSSを追加するには、次の手順を実行します。
サイドバーから
外観 > テーマとコンポーネントに移動するか、サイトの場合はこのURLに従ってください:https://yoursite.com/admin/customize/components
それぞれ「インストール」と「新規作成」をクリックします。
テーマコンポーネントに名前を付けて、「作成」をクリックします。
コンポーネントを適用するテーマを選択します。
「コードの編集」をクリックします。
CSSタブにCSSを追加します。
「保存」をクリックして変更を適用します。
ユーザーが選択可能なテーマが複数ある場合は、関連するすべてのテーマにテーマコンポーネントを追加してください。
適切なCSSセレクターの見つけ方
ブラウザのインスペクションツールを使用して、適切なCSSセレクターを見つけます。
変更したい要素を右クリックします。
コンテキストメニューから「検証」を選択します。
開発者ツールパネルで、要素セレクターを見つけます。
対応するセレクターをクリックし、CSSルールを追加します。
ルールをコピーし、テーマコンポーネントのCSSセクションに貼り付け、他のルールを削除します。
より具体的なセレクターについては、Discourseの既存のスタイルで使用されているセレクターをコピーして、テーマコンポーネントで変更する必要がある場合があります。
上記の手順を実演するビデオはこちらです。
変更が適用されない場合は、以下を確認してください。
- テーマコンポーネントがテーマで有効になっていること。
- CSSルールが既存のスタイルをオーバーライドするのに十分な特異性を持っていること。
追加リソース
「いいね！」 39
これをウィキにすることは可能ですか？「Where Do I Add My CSS?」という見出しの下の情報は更新が必要です。既存のテーマをインストールした場合（新しいセットアップウィザードを通じてテーマを選択した場合、おそらくそうでしょう）、もう「Edit CSS/HTML」ボタンはありません。現在では、既存のテーマに追加されるテーマコンポーネントを使用します。
ウィキ化され次第、更新できます。
「いいね！」 10
これで完了です 
「いいね！」 5