VK Blodks Proを用いた全幅見出し(背景あり)が上手くいかない

[牧野守]

『VK Blodks Pro』の『Outerブロック』を用いて下記の通りに設定を行いました。

1. 固定ページを非公開で用意し、その固定ページの本文欄にブロックエディタの VK Blocks Layout の中にあるOuter ブロックを配置
2. Outer ブロックを選択した状態で右側に出る設定項目の、「レイアウト設定」で全幅を選択
3. VK Blocks の中の 見出し ブロックを Outer ブロックの中に配置し、ブロックを選択した状態で右側に出る設定項目のスタイル設定で「装飾なし」を選択
4. 全幅見出しを使いたいウィジェットエリアで「固定ページ本文」ウィジェットを使い、1で用意した固定ページを選択

『Outerブロック』に背景設定をして白枠ギリギリまで画像を出したかったのですが、画面の端まで突き抜けてしまいます。白枠ギリギリでとどめるためにはどうすればいいのでしょうか??

[DRILL LANCER]

全てのページで実現したい場合は下記コードを 外観 > カスタマイズ > 追加CSS 等に記述することで実現可能です。

アウター幅が標準の場合に反映したい場合

.vk_outer.vk_outer-width-normal {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -40px;
		margin-right: -40px;
	}
}

アウター幅が全幅の場合に反映したい場合

.vk_outer.vk_outer-width-full {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	.vk_outer.vk_outer-width-full {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	.vk_outer.vk_outer-width-full {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	.vk_outer.vk_outer-width-full {
		margin-left: -40px;
		margin-right: -40px;
	}
}

P.S.
VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合は

#widget-page-16 .vk_outer.vk_outer-width-normal {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -40px;
		margin-right: -40px;
	}
}

とか

#widget-page-16 .vk_outer.vk_outer-width-full {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	#widget-page-16 .vk_outer.vk_outer-width-full {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	#widget-page-16 .vk_outer.vk_outer-width-full {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	#widget-page-16 .vk_outer.vk_outer-width-full {
		margin-left: -40px;
		margin-right: -40px;
	}
}

とかになります。
#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。

[DRILL LANCER]

アウターが全幅の場合については効かないので忘れてください。
なので、実現方法としては下記のようになります。

1. アウター幅が標準のアウターブロックを作成
2. 下記コードのいずれかを適用

全体に反映する場合

.vk_outer.vk_outer-width-normal {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	.vk_outer.vk_outer-width-normal {
		margin-left: -40px;
		margin-right: -40px;
	}
}

VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合

#widget-page-16 .vk_outer.vk_outer-width-normal {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 768px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (min-width: 992px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 1200px) {
	#widget-page-16 .vk_outer.vk_outer-width-normal {
		margin-left: -40px;
		margin-right: -40px;
	}
}

#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。

[牧野守]

分かりやすく教えてくださり、ありがとうございます。

最後の、
＞#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
という点なんですが、具体的にはどうすればいいのでしょうか??

[DRILL LANCER]

#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
という点なんですが、具体的にはどうすればいいのでしょうか??

下記記事の「CSSカスタマイズで文字サイズや色などを変更する」の部分をを熟読すれば自ずとつかめると思います。

これだけは押さえておきたい！WordPress運用記事特集

[牧野守]

＞VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合
＞#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。

上記にてご指摘いただいた方法で設定できました。
ありがとうございました。

[Vektor,Inc]

ちょっとこのあたりの仕様、もう少しユーザーに使いやすいように検討します。

[投稿者]

投稿