要件
これらのヒントとテクニックを使用するには、セルフホスト型Discourseインスタンスの管理者であるか、Basic より上位のDiscourseホスティングプランである必要があります。
序文
Discourseは、投稿の内容をフォーマットし、カスタマイズするための複数のメソッドをサポートしています。リストはここにあります：
しかし、時には、例えばボタンのように見えるリンクなど、より具体的なものが欲しくなることがあります。
ここでは、そのような修正方法について学びます。
論理
背後にある論理を簡単に説明しますが、次のステップに進んで実践的な例に取り組むこともできます 
Discourseでは、投稿の内容内で data- で始まる任意のHTML属性を許可しています。
これらは、CSSを使用してコンテンツをカスタマイズするためにターゲットとする属性です。
本チュートリアルでは、これらを data- 属性 と呼びます
これらの属性を持つ要素を作成する方法の一つは、BBcode風のタグ [wrap] を使用することです。これに任意の値を追加します。ここでは “button” を選択します（他の任何东西、例えばあなたの犬の名前でも構いません 
）：
[wrap=button]some text[/wrap]
これにより、次の属性を持つHTML要素が出力されます：data-wrap="button"。
最初の例：ピンクの背景
実践的な例から始めましょう。ピンクの背景を持つテキストを作成します。
ブロック 要素として
投稿内で、空行に以下を入力してください：
[wrap=pink]pink text[/wrap]
これにより、属性 data-wrap="pink" を持つ div 要素が作成されます。
次に、以下のCSSをテーマに追加します。
管理パネル → カスタマイズ → テーマ → あなたのテーマ → CSS/HTMLの編集 → CSS に移動します。
以下のCSSコードを内部に配置します：
[data-wrap="pink"] {
background: pink;
}
次に、保存ボタンをクリックします。
投稿に戻り、結果を確認してください：
はい、すでに美しいですね 
背景が投稿の全幅を覆っていることに気づくでしょう。私たちのwrapはその行の唯一の要素であるため、ブロック 要素として出力されます。
ブロック と インライン HTML要素の違いについては、ここで詳しく学ぶことができます：HTML Block and Inline Elements。
ピンクの背景を複数行に適用したい場合（それでも ブロック として）、[wrap] タグの両方に、同じ行に他のコンテンツやテキストがないようにする必要があります：
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
これは以下のように見えます：
インライン 要素として
次に、[wrap] の前や後、または両方にテキストを追加してみましょう 
。例えば：
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
結果は以下の通りです：
テキストや他の要素が [wrap] タグの一つと同じ行にある場合、インライン 要素として出力されます。
2番目の例：ボタンの外観を持つリンク。
[wrap] タグをいじると、文脈によってブロック要素またはインライン要素になる可能性があるため、望ましくない結果につながる場合があります。
したがって、同じ結果を達成する2つの異なる方法を説明しますが、最も適したものを選ぶことができます 
[wrap] を使用したインラインボタンリンク
Markdownを使用してリンクを作成する構文は：[some text](https://some-link.etc) です。
テキストをカスタマイズしてボタンらしく見せるために、角括弧の中にwrapを挿入します。例：
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
このコードが何を出力するかについてはコメントしません。[wrap=button] と書いたため、CSSで [data-wrap="button"] をターゲットにしなければならないことはご存知です。
では、行きましょう。美しい見た目にするための華やかなCSSを追加しましょう！ 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
ここではCSSルールを詳細に説明しません。インターネットには多くのCSSリソースがあるため、より具体的な修正を行いたい場合は、まずそれについて学ぶ必要があります。
結果 
：
いい感じに見えますよね？
通常のHTMLコンテンツを使用したインラインボタンリンク
DiscourseはHTMLコードを受け入れるため、[wrap] タグを使わずに、data- 属性を持つHTMLを使用することもできます。この例では、リンクの通常のMarkdown構文を使用し、<span> タグで囲みます。
リンク <a> タグを直接使用することはできません。それは例外であり、data- 属性を許可しないためです。
以下のように書きましょう：
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
これにより、data-button 属性を持つ <span> タグの 内部 にリンクが出力されるため、CSSは少し複雑になります。data-button とリンクの両方をターゲットにする必要があります：
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
そして、これが結果です！
さらに進めるために
[wrap] を使用したカスタマイズされたリスト
[wrap] タグと data- 属性は多くの文脈で使用でき、より高度なコンテンツをカスタマイズできます。限界は主にCSSの知識（そしてHTMLはそれより少ない）です。
説明なしで単一の例を提示します。各要素の前に猫の絵文字を前置きするリストをカスタマイズします：
テキスト：
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS：
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
結果：
独自のテーマの色変数の使用
ユーザーが異なるテーマや色を使用することを許可している場合、特にライトとダークの色スキームの選択肢がある場合、あなたの修正はそれぞれにとって良い見た目にならない可能性があります。
良い実践は、red、#FF0000 または rgb(255,0,0) のような「ハードコードされた」色ではなく、Discourseの色変数を使用することです。
ここでは、ボタンの背景色が現在のパレットのプライマリーカラーを使用し、テキストがセカンダリーカラーを使用する例を示します：
テキスト：
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS：
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Solarized Light色スキームを使用しているユーザーの場合、以下のように見えます：
Solarized Dark色スキームを使用している場合：
結論
[wrap] 要素と data- 属性を使用してカスタム要素を作成するための基礎を身につけました。
より高度なカスタマイズを行うには、CSSを学ぶことが不可欠です。インターネットには多くのチュートリアルがあります。
以下のDiscourseのガイドも役立ちます：Making custom CSS changes on your site。
インターネットブラウザの開発者ツールを使用すると、Discourseの色変数のリストとそれぞれの外観を簡単に確認できます：
このガイドに対する修正提案は遠慮なくどうぞ！
このドキュメントはバージョン管理されています - 変更を github で提案してください。
