# 投稿セクションのためのカスタムCSSスタイルを作成する最良の方法は？
**URL:** https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904
**Category:** Development
**Created:** [2024 年 6 月 27 日午前 3:02 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904 "2024-06-27T03:02:03Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Isaac.Eiland-Hall](https://meta.discourse.org/u/Isaac.Eiland-Hall)
#### Post date: [2024 年 6 月 27 日午前 3:02 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904/1 "2024-06-27T03:02:03Z")
### 前置き
コミュニティのDiscourseインスタンスのセットアップとカスタマイズを進める中で、プラットフォームの計り知れない力を活用して、自分自身とユーザーの幸福度を高める方法を模索してきました。
実現したいことの1つは、プライベートメッセージにカスタム署名を追加し、「署名」することです。画像ではなく、Googleフォントで名前を使いたいと考えています。
これを機能させることで、投稿作成中にコミュニティにスニペットなどを提供する方法を理解するのに役立ちます。そのため、質問は具体的ですが、知識は一般的になります。
質問する理由は、これらのブロックを作成して使用する前に、それが最善の方法かどうかを確認したいからです。巧妙なアイデアを思いついた場合、議論を開始するためにいくつかの例を共有することを考えています。そうすれば、私よりも賢い人々からさらに巧妙なアイデアを得ることができます。 🙂
## 質問：投稿内のテキストをCSSでターゲットできるブロックに入れる方法は？
### これまでに見つけたこと
以下のトピックを見つけました。
> [投稿内のカスタムCSS / カスタムクラスの追加](https://meta.discourse.org/t/custom-css-inside-a-post-adding-custom-classes/143072)
そのトピックから、この回答を得ました。
> [@david](#):
>
> スタイル/クラスは削除されますが、`data-theme-*`属性を使用して投稿内のものをターゲットにすることができます。
>
> ```plaintext
>
> ここにコンテンツ
>
>
> ```
>
> たとえば、この段落はdata-theme-bot divで囲まれています。
>
> そして、テーマ内で次のようにターゲットにします。
>
> ```plaintext
> div[data-theme-bot] {
> background-color: red;
> }
>
> ```
これは機能するようですが、現在、これが最善の方法/手法として考えられているかどうかに興味があります。
#### せっかくなので、少しトピックから外れますが、トピックに関連する質問です。
署名のアイデアを機能させるためにカスタマイズを「悪用」していますが、うまくいかず、誰かすぐに洞察があれば知りたいと思っています。
プラグインを使用してカスタムGoogleフォントを読み込んでいますが、フォーラム全体でこれらのフォントが正常に使用されているため、機能することはわかっています。「Playwrite USA Traditional」を強制的に読み込むために使用しました。
テーマに次のCSSがあります。
```css
div[data-theme-ieh] {
font-family: "Playwrite USA Traditional";
text-align: right;
}
```
サンプル投稿のdivは確かに右揃えになっていますが、テーマのフォントでもPlaywriteでもなく、Arialまたは類似のものを使用しています。
設定で何か愚かなことを見落としていますか、それとも他に何か見落としていることはありますか？これはDiscourseの質問ではありません。
また、Googleフォントをサイトで使用するために読み込むより良い方法はありますか？
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2024 年 7 月 1 日午後 1:22 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904/2 "2024-07-01T13:22:00Z")
> [@Isaac.Eiland-Hall](#):
>
> これは機能するようですが、現在これが最善の方法/手法であるかどうかを知りたいです。
[Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516) を参照することをお勧めします。
> [@Isaac.Eiland-Hall](#):
>
> 私のサンプル投稿のdivは確かに右揃えですが、テーマのフォントやPlaywriteではなく、Arialまたは類似のものを使用しています。
>
> 設定で何か愚かなことを見落としていますか、それとも他に何か見落としていることはありますか？これはDiscourseの質問ではありません。
共有された内容からは何も思いつきません。ライブフォーラムへのリンクを共有できれば、問題を見つけるお手伝いがしやすくなります。
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [2024 年 7 月 2 日午後 11:34 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904/3 "2024-07-02T23:34:22Z")
[https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400/](https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400/) から埋め込みコードを確認したところ、`"Playwrite US Trad"` になるはずです。
```css
// : ユニークで説明的なクラス名を使用してください
// : 100から400の値を使用してください
.playwrite-us-trad- {
font-family: "Playwrite US Trad", cursive;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
}
```
---
### Author:  [@Isaac.Eiland-Hall](https://meta.discourse.org/u/Isaac.Eiland-Hall)
#### Post date: [2024 年 7 月 3 日午前 2:33 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904/4 "2024-07-03T02:33:02Z")
> [@david](#):
>
> [Generic bbcode wrapper for theme components](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516)
おー、これは良さそうですね。教えてくれてありがとうございます！
> [@david](#):
>
> ここで共有された内容からは何も思いつきません。
本当に、それだけが望みでした。時間を無駄にしたくなかったのですが、もし何か本当に明白なことがあれば、と思って。笑。
> [@Alteras](#):
>
> 埋め込みコードを確認しています
…おバカなGoogleめ…うーん。コンポーネントの指示に従って、大文字小文字を含めて正しい名前であることを確認することに気を取られすぎて、Googleが実際に使用している名前を確認することすらしていませんでした。ドジだ。
参考までに、正しいフォント名を読み込み、正しいフォント名を参照すると、当初期待していた結果が得られます。
そして今、私の投稿に「署名」できます。
ありがとうございます 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2024 年 8 月 2 日午前 2:33 UTC](https://meta.discourse.org/t/best-practices-for-creating-custom-css-styles-for-sections-of-posts/313904/5 "2024-08-02T02:33:42Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.