[うなこ]

対馬 さま
なるほど！思いつきませんでした！ありがとうございます！

M Yさま
解決したとのことで安心しました！

[うなこ]

確認しましたところ、.vk_post_imgOuterのdivの背景に背景画像を設定していますので、もうひとつ外側に画像を囲うdivタグが必要な気がします。（この外側のdivにoverflow: hidden;を指定してはみ出した部分を非表示にするかたち）

ちょっと考えてみます。

[うなこ]

確認しましたところ、WordPress側の見出しの余白が優先されているようでした。

プラグイン側で調整できるのかを確認させていただきます。
https://github.com/vektor-inc/vk-blocks-pro/issues/1179

いったんは、こちらのCSSをカスタマイズ→追加CSSなどにかいていただけますと、灰色塗り背景と同じ余白になると思います。

/* 背景塗り 灰色 背景色の余白調整 */
.is-style-vk-heading-background_fill_lightgray.has-background{
padding: 0.6em 0.7em 0.5em;
}

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

[うなこ]

サイトのトップページにランディングページを設置すべく
新規固定ページを作成し「ホームページ設定」から当該固定ページを設定すると
ウィジェットからしかコンテンツが追加できず、前幅の画像など自由に設置できない状況です。

画面を添付いただいた方が状況が把握しやすいかもしれません。

ホームページに設定した固定ページを、管理画面の「固定ページ」から編集ボタンを押すと、
ブロックが設置できそうでしょうか。

[うなこ]

ところで、「追加 CSS クラス」に追加できる、今回の様な「クラス名の一覧等」はどこかに有りますでしょうか？

機能として追加する方向のため、クラス名の一覧はありませんが、
機能追加の目処がたっておりませんので、クラス名一覧ページを準備するのかを検討中の段階でございます。

https://github.com/vektor-inc/lightning/issues/735

[うなこ]

モデレーター以上のユーザーはスタッフになりますのでベストアンサーが付けれなくなっております。

解決できて安心いたしました、今後ともよろしくお願いいたします！

[うなこ]

VK Block Patternsをインストールして有効化しますと、
vk-cols--reverseというクラス名が使えるようになります。

カラムブロックを選択して、ブロック設定の「高度な設定」の「追加 CSS クラス」にvk-cols--reverseを追加してください。
このパターンが参考になると思います。２個目の「旬の素材」はスマホサイズで逆になっています。

カフェ特徴

[うなこ]

まだ原因がわからないのですが、念の為一度、
設定 > VK Block Patterns から、エディターの設定の下にある「設定を保存」ボタンを押していただいても変わらないでしょうか？

Attachments:

You must be logged in to view attached files.

[うなこ]

返信ありがとうございます。

CSSは以下でいかがでしょうか

〇〇の部分は現在62%となっておりますので、この数字を大きくして調整していただければ、隠れている画像の部分が表示されるかなと思います。

/* 投稿リストの画像 */
.vk_post .vk_post_imgOuter:before {
    padding-top: 〇〇%;
}

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

[うなこ]

画像のサイズを固定にすれば良いのか、CSSで解決できるのか。

アイキャッチ画像の縦横比率がそれぞれちがう画像を入れていて、ぴったり表示したいということであっていますか。
そうだとすると、画像のサイズを固定にするのがいいかなと思います。

画像のサイズを固定にしていただき、cssで調整する形でいかがでしょうか。

もし質問の意図と違っておりましたら教えてください。

[うなこ]

サイトを確認しました。
背景画像を固定にされているのが原因で、iOSでは背景画像が拡大されて見えている状態だと思います。
（これはiOSのバグで、background-size: cover;　background-attachment: fixed;を一緒に使用すると、起こります。）

解決策は、
ページヘッダー設定の「背景画像の位置」を標準を選択すると、拡大されずに表示されると思います。

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

Attachments:

You must be logged in to view attached files.

[うなこ]

以下のようなCSSで書いてしまうのが一番簡単かなとおもいました。

/* 全頁サイトコンテンツの上下余白を無しに */
.l-container_inner {
    padding-top: 0;
    padding-bottom: 0;
}

カスタマイズのデザイン設定で一括設定できるととても便利ですが・・・

ランディングページ用に使用するイメージでしたので、固定ページごとでいいのかなと思っていたのですが、一括設定するケースはけっこうあったりするのでしょうかね？
みなさんどうなんでしょうか

[うなこ]

1.カバーブロックの「VK余白調整？」を使い上下の余白を「０」
上記では余白は埋まりませんでした。

上のカバーブロックを選択して、「共通の余白設定」の下の余白を0、下のカバーブロックを選択して、「共通の余白設定」の上の余白を0　にすると余白がなくなるかなと思います。

いかがでしょうか

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

Attachments:

You must be logged in to view attached files.

[うなこ]

アップロードできないようです。

エラーになっていますね、なぜでしょう？

HTMLソースをそのまま添付することはできますか？

[うなこ]

おそらくですが、ステップ要素の親ブロックではなく、ステップ要素のアイテムブロックを削除しているので、編集画面へ行くと再びステップブロックの親ブロックが表示されている状態だと思います。
（慣れてくるといいのですが、ちょっと気付きにくいかもですね、、）

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿