画像、ワンボックス、ブロッククオートなどの丸みを帯びた境界線

トピックに表示される画像、onebox、引用ブロック、スタッフ通知の境界線を変更するための非常にシンプルなコンポーネントを作成しました。

以下の設定を変更できます。

  • 画像の丸み強度を設定する
  • 画像の境界線の太さを設定する
  • 画像の境界線の色を設定する
  • oneboxの丸み強度を設定する
  • oneboxの境界線の太さを変更する
  • oneboxの境界線の色を変更する
  • oneboxの背景色を変更する
  • 引用ブロックの丸み強度を設定する
  • 引用ブロックの左境界線を削除する
  • 「スタッフカラー」の丸み強度を設定する
  • トピックサムネイルのサポート:
    • リストの角丸
    • グリッドの角丸
    • プレースホルダーの背景色
    • プレースホルダーアイコンの色
    • グリッドトピックタイトルの背景色

10pxの丸みと境界線なしのライトモード

10pxの丸みと2pxの境界線のダークモード

oneboxサポートを含む

引用ブロックの丸み(15px)

または引用ブロックの左境界線を削除する:

丸みを帯びたスタッフカラー

トピックサムネイルのサポート

リストビュー

グリッドビュー

|||
| — | — | — |
|:sunglasses:|プレビュー|上記スクリーンショット / ライブプレビュー|
|:link:|Githubリポジトリ|Rounded Image Borders|
|:hammer_and_wrench:|インストールガイド|テーマまたはテーマコンポーネントのインストール方法|

「いいね!」 25

ありがとうございます。これはかなり良いですね。

「いいね!」 1

ありがとうございます。しばらく使っています。

「いいね!」 2

とても良いですね。アップデートの要望が1つあります。境界線とペーストの間にパディングを追加できたら素晴らしいと思います。よろしくお願いします!

「いいね!」 1

スクリーンショットで提案を説明していただけますか。よく理解できませんでした。

いくつか改善を加えました。

  • アバターの角丸めを調整できるようになりました(デフォルト、円 = 50%)
  • ボタンの改善。ボタンの角丸めが有効になっている場合、カテゴリドットの最小角丸めが修正され、モーダルが含まれるようになりました。
「いいね!」 2

角丸ボーダーをデフォルトテーマにインストールし、提供されたデフォルト設定のままにしました。しかし、これがどのように適用されるのか理解できません。

これはアップロードされた画像ごと、サイト全体で今後適用されるのか、それともサイト全体ですべてに適用されるのか、どちらでしょうか?

JPGをアップロードして、あとはお任せすれば良いのでしょうか?その際に何か選択肢はありますか?本番サイトなので、あまり実験したくありません。困惑しています。よろしくお願いします。

確かなことは言えませんが、インストール後に適用されるかもしれません。新しい画像をアップロードして、境界線が適用されているかどうかを確認してください。適用されていなければ、特定の投稿(トピックではなく)にたいしてレンチのアイコンを試し、「HTMLを再構築」します。

どちらの場合でも適用されていなければ、TC設定を確認する必要があるかもしれません。また、テーマに追加していることも確認してください。ページをリフレッシュして設定が反映されていることを確かめてください。キャッシュされたページを表示している可能性もあります。

これらはCSSのカスタマイズなので、サイト全体に適用されます。

主に個人的なコンポーネントを公開することにしたので、動作を確認するためにさまざまな設定を試す必要があるかもしれません。一部の設定には、設定が適用される前に有効にする必要があるトグルがあります。

画像に必要なのはこれだけです(デフォルトはオフです)。以下は、必要に応じて他の要素の丸めを可能にするものです。

「いいね!」 3

インターフェースに小さな調整を提案してもよろしいでしょうか(赤色部分):

それはコアの翻訳にあるはずです。

「いいね!」 2