皆さん、こんにちは！関心のあるグループのウィキとしてDiscourseを部分的に使用しています。これらの記事を次のレベルに引き上げるために、インフォボックスを本当に使いたいと思っています。
誰かがDiscourseにこれを統合しましたか？プラグインやテーマコンポーネントが見つかりません。
Obsidianでウィキ風インフォボックステンプレートを動作させた人を見つけました。おそらくそこから始めるのが良いでしょう。
「いいね！」 2
汎用 BBCode ラッパーを使用してください。
Customization > Theme component を作成し、これを CSS Common に追加してください。
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
//* 以下の行のコメントアウトを外すと背景色を変更できます。ただし、その場合は BBCode の背景色機能を使用できるはずです。
// background-color: var(--secondary);
//* ボックスの色と太さ
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #808080;
border-radius: 0.40em;
}
注: 上記のコードを異なる色用に複数作成しました。つまり「greenbox」「yellowbox」「bluebox」「box」(グレー) です。
投稿での使用方法
[wrap=redbox]
> ## 情報ボックス
ボックスのテスト
[/wrap]
「red」を適切な色に置き換えてください。グレーの場合は「box」のみ使用します。
注 2: BBCode 色を使用する場合は、Customization > Plugin または Customization > Theme component を使用し、「>」(区切りとして空行が必要) を使用する代わりに、bgcolor= を使用することもできます。
色付きテキスト TC これはテーマコンポーネントであるため、ホスティング環境に関係なくインストールできます。
BBCode 色をサポートするプラグインは 2 つあります。BBCode 色 または フォーマットツールバー。警告: これらのプラグインのいずれかのみをインストールしてください。フォーマットツールバーは、両方をインストールするとサイトが破損する可能性があると警告しています。
改良されたコードは背景色を追加します
- このコードには、前の投稿のすべてのコードが含まれています。
CSS共通のコード
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ff0000;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #00ff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #0000ff;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ffff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ffff00;
border-radius: 0.40em;
}
bgcolorボックスの投稿にはこのコードを使用します：
[Wrap="redboxbg"]
> インフォボックス
テストボックス
[/wrap]
新しい背景色のオプション「red」を次のいずれかに置き換えます：
- 「green」、「blue」、「yellow」
カラー背景。グレーの境界線。
- 「grey」、「grey#」 #=1-4。
*すべてのグレー背景、グレーの境界線、1赤の境界線、2緑の境界線、3青の境界線、4黄色の境界線
