[ 解決済 ] VK blockの投稿一覧の背景をカスタマイズしたい

[勇太吉川]

■ WordPress のバージョン
6.0.2

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

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

■ テーマのバージョン
14.23.4

■ Pro Unit のバージョン
0.23.2

■ スキンの種類
Origin III

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

■ 期待する動作
VK blocksの投稿一覧を使用した上で、その周辺の背景を自由にカスタマイズしたい

うしろに
現状 (画像1) と
仕上げたい状態 (画像2)
を添付しています。

■ 自分で試した事
1. WordPressの「固定ページ編集」から「コードエディター」上で、<!– wp:vk-blocks/post-list {“name”:”vk-blocks/post-list”} /–>を<div class=”xxx”> </div>で囲み、style.cssで背景を装飾できないか試してみた
→結果、コードエディター上では<div>で囲めない

2.「固定ページ編集」の「ビジュアルエディタ」上で、「追加CSSクラス」でクラスを追加し、style.cssで背景のカスタマイズを試みた
→結果、vk postsの範囲のみCSSが効き、bodyの範囲ではbackground-colorは効かなかった(添付画像①)

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

■ 実際の症状
[自分で試した事]に記した内容と同様です。

■ その他特記事項
functions.phpとstyle.cssを使い、全て自分でコーディングする場所はカスタマイズできています。

ただ、vk blocksを利用した箇所だと、背景をどうカスタマイズしていいか、わからない状態です。

お手数をおかけしますが、どうぞよろしくお願い致します。

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

ただ単に囲むだけなら VK Blocks Pro が用意している「Outer」ブロックを使うか、
WordPress 本体が用意している「Cover」ブロックを使うことで可能です。

スタイルの調整は各ブロックの設定画面の「高度な設定」の「追加 CSS クラス」に CSS のクラス名を追加して
そのクラス名に対してスタイリングするのが良いでしょう。

[うなこ]

DRILL LANCERさんのご案内しているOuterブロックはこちらになります。

Outer（Pro版のみ）

Outerブロック、もしくはカバーブロックかグループブロックを全幅サイズで配置して、中に投稿リストを入れたら実現できるかなと思います。

• この返信は2年、 2ヶ月前にうなこが編集しました。

[勇太吉川]

DRILL LANCER様
うなこ様

こんばんは！
返事が遅くなり申し訳ありません(体調不良で3日寝込んでいました)。
アドバイスに頂いた通り、VK Blocks Proのouterを使用し、追加CSSクラスでクラス名を追加して、スタイルを加えたところ、期待していたカタチにすることができました。

ご親切にアドバイスを頂き、本当にありがとうございました！
Lightningの使い方が少しずつわかってきました。

吉川

[投稿者]

投稿