VWSとは フォーラム Lightning VK Blodks Proを用いた全幅見出し(背景あり)が上手くいかない

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

  • このトピックには7件の返信、3人の参加者があり、最後にVektor,Incにより1ヶ月、 1週前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #27398

    牧野守
    参加者

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

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

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

    #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の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。

    #27413

    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の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。

    #27427

    牧野守
    参加者

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

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

    #27429

    DRILL LANCER
    参加者

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

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

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

    #27430

    牧野守
    参加者

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

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

    #27431

    Vektor,Inc
    キーマスター

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。