以下は、その方法です。
-
「要素を検証」を開く:
汎用バナーが有効になっているウェブページに移動します。ページ上のどこかを右クリックし、「要素を検証」（またはWindowsではCtrl + Shift + I、MacではCmd + Option + I）を選択します。これにより、ブラウザの開発者ツールが開きます。 -
バナーを特定する:
開発者ツールの「Elements」タブで、コードのさまざまなセクションにカーソルを合わせると、ウェブページの対応する部分がハイライト表示されます。バナーを見つけたら、バナー全体とそのすべての要素を選択していることを確認するために、バナーが含まれている最も外側の<div>をクリックします。 -
要素を調べる:
バナーが選択されたら、「Elements」タブで、バナー構造内のすべてのネストされたHTML要素を確認できます。これにより、バナーの作成に使用されたHTMLの階層が表示されます。 -
スタイルを調べる:
開発者ツールの右側にある「Styles」タブを見つけます。これにより、選択した要素に適用されているCSSスタイルが表示されます。継承されたスタイル、インラインスタイル、および外部スタイルシートからのスタイルを表示できます。 -
変更を試す:
バナー内の要素を選択し、スタイルタブで直接スタイルを変更します。たとえば、色、フォントサイズ、パディング、マージン、またはその他のCSSプロパティを調整できます。これらの変更は一時的なもので、ウェブページにすぐに表示されるため、自由に試すことができます。 -
デザインを確定する:
デザインの変更に満足したら、変更されたCSSコードをコピーします。これには、個々の要素またはバナー全体に加えられた変更が含まれる場合があります。 -
変更を適用する:
https://yoursite.com/admin/customize/componentsに移動し、コンポーネントを作成して、「HTML/CSSの編集」セクションで変更されたCSSコードを貼り付けます。スタイルが正しく適用されるように、適切なバナークラスまたはIDをターゲットにしていることを確認してから、そのコンポーネントをテーマに適用します。 -
保存して確認する:
更新されたCSSを保存し、ウェブサイトを更新して、バナーが意図したとおりに変更を反映していることを確認します。以下も参照してください: DiscourseでのCSSのカスタマイズ方法