こんにちは皆さん
テーマコンポーネントに頼らずに、JPG画像に細い境界線を追加できますか？シンプルに保ちたいので、例えばこのコンポーネントは避けたいです。
考えられる限りの img タグのバリエーションを試しました。唯一うまくいったのは、画像を kbd タグに埋め込むことでしたが、それは少し奇妙です。本当に書きたいのはこれです。
<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
alt="廃墟となった高圧鉄塔の写真"
width="75%"
style="border: 1px solid gray">
そして、標準アップロードによるサンプル画像はこちらです。
AIの画像キャプションはかなりうまく機能していると言わざるを得ません。よろしくお願いします！
.cooked img:not(.thumbnail,.ytp-thumbnail-image,.emoji), .d-editor-preview img:not(.thumbnail,.ytp-thumbnail-image,.emoji) {
border: 4px solid red;
}
devtools hacked CSS … YMMV 
カスタムCSSは、誰かがborder: 1000px solid grayのようなことをしてトピック全体を読めなくする可能性があるため、投稿から削除されます。
これを行うには、テーマまたはテーマコンポーネントにCSSを追加する必要があります。回避策はありません。ただし、画像ごとにオプションにすることはできます。
たとえば、テーマに次のCSSを追加できます。
div[data-theme-image-border] img {
border: 1px solid gray;
}
そして、投稿で次のように使用します。
<div data-theme-image-border>
<img src="yoururlhere" />
</div>
ありがとうございます。いくつか追加のご質問です。
@merefield 様：あなたの例は、以下のように追加したところ動作しました。
管理 カスタマイズ テーマ = デフォルト CSS/HTML の編集 デスクトップ CSS
@awesomerobot 様：いくつかのバリエーションを試しましたが、あなたのコードは動作しませんでした。
最初の例はサイト全体に適用され、2番目の例は（あるいはそうあるべきですが）画像ごとに適用されることに注意してください。
さらに良い提案があれば歓迎します。サイト全体に適用するソリューションでも構いませんが、画像ごとに適用できる方がおそらく望ましいです。
追伸：AIによるキャプション生成は、イテレーションごとに悪化しています 
この Theme component は興味深いかもしれません
@HeliosurgeTx。私のOPでそのコンポーネントに気づいていましたが、今日試してみます。
私のミスです。トピックをざっと見て見落としていました。しかし、他の人がここで言及したように、カスタムコンポーネントを作成することになります。既存のコンポーネントを使用する利点は、おそらくすでにメンテナンスされていることです。
ただし、TCは学習にも役立ち、コードの一部を独自のカスタム作品で使用することもできます。
私はこれに「汎用BBCodeラッパー」システムを使用しています。
境界線を追加したい画像に [wrap=border]...[/wrap] を囲み、このCSSを追加しました。
.d-wrap[data-wrap="border"] {
> img, > p > img, .lightbox, .image-wrapper img {
border: 1px solid #555;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
}
@simonk ありがとう、これでうまくいきました。画像ごとにも対応しています。
投稿が既存のトピックにマージされました: 画像、onebox、引用ブロックなどの角丸ボーダー