[ 解決済 ] pale利用したouterエリアの全幅表示

VWSとは フォーラム Lightning [ 解決済 ] pale利用したouterエリアの全幅表示

[ 解決済 ] pale利用したouterエリアの全幅表示

タグ: 

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

    sa-koi
    参加者

    ■ 利用テーマとバージョン :
    lightning.pro 最新バージョン
    テーマ pale

    ■ 質問内容:
    paleスキンを使ったトップページエリア(1カラム)でouterをつかったブロックの全幅表示が、通常サイズにしかなりません。
    設定で全幅表示にはしています。なにかこのスキンでは全幅はできないのでしょうか?それとも別の設定がありますか?

    該当URLで、ページ中段の緑と赤のお問い合わせのところです


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #51691

    うなこ
    モデレーター

    デザインスキンPaleでは、標準のセクションベース設定が「セクションベース(白い背景部分)あり」になりますので、セクションベースありで全幅にしても、セクションベース内にしか広がりません。

    もし、横幅貫通の全幅で表示したい場合は、フロントページに設定している固定ページを開き、Lightning デザイン設定のセクションベース設定をセクションベース無しに設定していただくと、セクションベースはなくなってしまいますが全幅表示にできます。

    セクションベース設定

    セクションベースありのまま全幅で表示したい場合は、追加でCSSを記述する必要があります。

    おそらく以下のCSSを追加CSSか、子テーマのCSSに追記していただければセクションベースありでもOuterブロックを全幅にできると思いますが、すべてのOuterブロックの全幅に適応されてしまいますので、注意が必要です。
    全幅表示したいOuterブロックに、高度な設定から「追加 CSS クラス」でクラス名をつけてあげたりして、調整してみてください。

    .mainSection.mainSection-base-on .vk_outer-width-full{
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    こちらでcssのカスタマイズについて書いてありますので、ご参考にしてください。
    ▼できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

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

    sa-koi
    参加者

    ありがとうございました!

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