VK Blodks Proを用いた全幅見出し(背景あり)が上手くいかない
VK Blodks Proを用いた全幅見出し(背景あり)が上手くいかない
- このトピックには6件の返信、3人の参加者があり、最後に
Vektor,Incにより4年、 9ヶ月前に更新されました。
-
投稿者投稿
-
2019年12月9日 10:41 PM #27398
牧野守参加者『VK Blodks Pro』の『Outerブロック』を用いて下記の通りに設定を行いました。
1. 固定ページを非公開で用意し、その固定ページの本文欄にブロックエディタの VK Blocks Layout の中にあるOuter ブロックを配置
2. Outer ブロックを選択した状態で右側に出る設定項目の、「レイアウト設定」で全幅を選択
3. VK Blocks の中の 見出し ブロックを Outer ブロックの中に配置し、ブロックを選択した状態で右側に出る設定項目のスタイル設定で「装飾なし」を選択
4. 全幅見出しを使いたいウィジェットエリアで「固定ページ本文」ウィジェットを使い、1で用意した固定ページを選択『Outerブロック』に背景設定をして白枠ギリギリまで画像を出したかったのですが、画面の端まで突き抜けてしまいます。白枠ギリギリでとどめるためにはどうすればいいのでしょうか??
2019年12月10日 3:05 AM #27404
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
の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。2019年12月10日 8:30 AM #27413
DRILL LANCERモデレーターアウターが全幅の場合については効かないので忘れてください。
なので、実現方法としては下記のようになります。- アウター幅が標準のアウターブロックを作成
- 下記コードのいずれかを適用
全体に反映する場合
.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の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
2019年12月10日 1:29 PM #27427
牧野守参加者分かりやすく教えてくださり、ありがとうございます。
最後の、
>#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
という点なんですが、具体的にはどうすればいいのでしょうか??2019年12月10日 1:43 PM #27429
DRILL LANCERモデレーター#widget-page-16
の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
という点なんですが、具体的にはどうすればいいのでしょうか??下記記事の「CSSカスタマイズで文字サイズや色などを変更する」の部分をを熟読すれば自ずとつかめると思います。
2019年12月10日 1:55 PM #27430
牧野守参加者>VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合
>#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。上記にてご指摘いただいた方法で設定できました。
ありがとうございました。2019年12月10日 2:09 PM #27431
Vektor,Incキーマスターちょっとこのあたりの仕様、もう少しユーザーに使いやすいように検討します。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。