[ 解決済 ] Outerブロック内に貼り付けた写真のコーナー２箇所にRをつけたい

[博之上田]

■ WordPress のバージョン
バージョン 6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.5.1

■ Pro Unit のバージョン
VK Blocks Pro　バージョン 1.51.0.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
All-in-One WP Migration
Blocks Animation: CSS Animations for Gutenberg Blocks
Category Order and Taxonomy Terms Order
Contact Form 7
Flexible Table Block
Just Highlight
Lightning G3 Pro Unit
MaxButtons
UpdraftPlus
VK All in One Expansion Unit
VK Block Patterns
VK Blocks Pro
VK Link Target Controller
VK Post Author Display
VK Video Block Pro
WP Multibyte Patch
パスワード保護

■ 期待する動作
Outerの中にカラムを置きその中に表示している画像を選択し、カスタムCSSに
selector {
border-radius: 80px 0% 0% 80px;
}
と記載すると、画像の左上と左下の角にRがつく

■ 自分で試した事
１）カスタムCSSに以下のコードを記入
selector {
border-radius: 80px 0% 0% 80px;
}

２）高度な設定＞追加CSSクラスにクラス名を入力し、編集画面最下部のVK All in One Expansion Unitの
　　カスタムCSSに
　　.クラス名{
border-radius: 80px 0% 0% 80px;
}
　　を入力

３）高度な設定＞追加CSSクラスにクラス名を入力し、外観＞カスタマイズ＞追加CSSに
.クラス名{
border-radius: 80px 0% 0% 80px;
}
　　を入力

■ 症状が発生するブラウザ
Safari、Chrome

■ 実際の症状
Outerブロックの中にカラムブロックを置きその中に表示している画像ブロックを選択し、カスタムCSSに
selector {
border-radius: 80px 0% 0% 80px;
}
と記載しても、画像にRがつかない。

Outerブロックの中ではなく、画像のみん場合は、
selector {
border-radius: 80px 0% 0% 80px;
}
でRがつく

■ その他特記事項
ブロックの中や、さらにその中に設置した画像の場合、何か追加のCSSが必要なのでしょうか。
いろいろ調べたのですが、ヒントは見つかりませんでした。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

受託案件ですか？
theme.json を有効にすれば普通にブロックの設定から指定可能ではあります。

Lightning 15系アップデートでの theme.json 対応について

[博之上田]

石川様
早々のご返信ありがとうございます。
theme.json確認したところ、すでにONになっていて、よく見ると設定項目がメニューにありました。
やってみたら、簡単に設定できました。

こんな便利な機能があるとは知りませんでした。
教えていただき本当に助かりました。

本サイトは、親戚から依頼されてコーディングしています。
CSSなど、今まで使ったことがない機能やデザインの実装に苦労していますが、新しいことにチャレンジできて楽しいです。

[投稿者]

投稿