VWSとは フォーラム バグ報告と提案 VK_固定ページ本文の表示幅が狭くなった

VK_固定ページ本文の表示幅が狭くなった

  • このトピックには12件の返信、3人の参加者があり、最後にDRILL LANCERにより2週、 3日前に更新されました。
13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • 投稿者
    投稿
  • #31471

    youkkw
    参加者

    【環境】
    Lightning Proバージョン: 3.1.0
    VK All in One Expansion Unit : 9.8.3.0

    トップページでVK_固定ページ本文を使用し、他のページをトップページに表示していますが、
    昨年末あたりからVK_固定ページ本文で表示している部分のみ、表示幅が狭くなりました。
    トップページは1カラムで表示しています。
    尚、Lightningバージョン: 8.1.0にテーマを変えると、
    問題なく1カラムの幅で他のページがトップページに表示されます。
    修正方法等ありますでしょうか。

    #31475

    Vektor,Inc
    キーマスター

    幅が狭くなるというのは表示エリアの半分くらいになるという事でしょうか?
    もしそうなら、Pro版で追加される トップ頁コンテンツエリア 左 右 が追加されるので、そのどちらかにウィジェットが移動しているという症状ではないでしょうか?

    Pro版の時に該当の固定ページ本文ウィジェットはどのウィジェットエリアに入っているかご確認ください。

    #31477

    youkkw
    参加者

    「幅が狭くなる」という表現ですが、真ん中に寄ってしまっており、左右にスペースが発生してしまっている状況です。左右のスペースはおよそ50%になります。固定ページ本文ウィジェットはトップページコンテンツエリアに含まれており、トップコンテンツエリア右 左には何もウィジェットはありません。

    #31478

    DRILL LANCER
    参加者

    下記も確認してみてください。

    • 外観 > カスタマイズ > Lightning デザイン設定 の セクションベースの有無
    • 固定ページウィジェットで呼び出した固定ページの Lightning デザイン設定 の セクションベースの有無
    • トップページに指定した固定ページの Lightning デザイン設定 の セクションベースの有無

    セクションベースがありだと文章のまわりに余白が設けられるので記事の文章エリアの部分の幅が多少小さくなります。

    • この返信は2週、 6日前にDRILL LANCERが編集しました。
    #31481

    youkkw
    参加者

    以下全て確認し、最初は「デザインスキン標準」で、>セクションベース無し>セクションベース有り>デザインスキン標準と変更してみてもそれぞれ変化はありませんでした。

    ・外観 > カスタマイズ > Lightning デザイン設定 の セクションベースの有無
    ・固定ページウィジェットで呼び出した固定ページの Lightning デザイン設定 の セクションベースの有無
    ・トップページに指定した固定ページの Lightning デザイン設定 の セクションベースの有無

    #31482

    Vektor,Inc
    キーマスター

    「狭い」というのはどれくらいの幅でしょうか?

    該当URLは貼れませんか?
    むずかしければスクリーンショットをアップできませんか?

    #31510

    youkkw
    参加者

    大丈夫です。以下URLになります。
    URL内トップページの「Our Service 事業紹介」の箇所になります。

    トップ

    #31512

    DRILL LANCER
    参加者
    • 外観 > カスタマイズ > 追加CSS
    • Exunit > CSSカスタマイズ

    上記のいずれかに下記に似たコードがたくさんあると思います。
    その.widget .entry-bodyの指定が影響しているようです。

    @media (min-width: 970px) {
    	.page-id-2188 .entry-body,
    	.widget .entry-body {
    	    width: 55%;
    	    margin-left: auto;
    	    margin-right: auto;
    	}
    }
    #31513

    DRILL LANCER
    参加者

    1カラム時の幅を調整するためにコードを入れたようですが、
    Bootstrap 3 ベースのスキン or Bootstrap 3 時代のテンプレートを使用している場合、

    @media (min-width: 992px) {
    	body:not(.home) .col-md-12.mainSection {
    		max-width: 720px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    }

    Bootstrap 4 ベースのスキンを使用している場合、

    @media (min-width: 992px) {
    	body:not(.home) .mainSection-col-one {
    		max-width: 720px;
    		margin-left: auto;
    		margin-right: auto;
    	}
    }

    のように指定すればトップページ以外の1カラムの幅を調整可能になります。

    #31566

    youkkw
    参加者

    解決しました!
    ご指摘の通り.widget .entry-bodyが影響しており、
    .widget .entry-bodyを削除したら、ページ幅が戻りました。

    1カラムのページ幅を個別に調整したかったため、
    トップページ以外の1カラムのページを一括変更することはしませんでした。

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

    #31620

    DRILL LANCER
    参加者

    将来のことを考えると・・・
    .entry-body ではなく .col-md-12.mainSection.mainSection-col-one
    調整したほうが後々のトラブルがなくて済みそうな気がします。

    (1カラム時の幅調整機能を実装する話がオンラインコミュニティ Slack で出ているので・・・
     Bootstrap 4 ベースのスキン限定かもしれませんが一応・・・・)

    Bootstrap 3 ベースのスキンの場合

    @media (min-width: 970px) {
    	.page-id-2188 .col-md-12.mainSection {
    	    width: 55%;
    	    margin-left: auto;
    	    margin-right: auto;
    	}
    }

    Bootstrap 4 ベースのスキンの場合

    @media (min-width: 970px) {
    	.page-id-2188 .mainSection-col-one {
    	    width: 55%;
    	    margin-left: auto;
    	    margin-right: auto;
    	}
    }
    #31687

    youkkw
    参加者

    ご指摘ありがとうございます!
    まだあまり意味は分かっておりませんが、.mainSection-col-oneに変更しました。
    (.entry-bodyもネットにあったものをコピペしただけでした。)

    #31725

    DRILL LANCER
    参加者

    Origin ( II ) をカスタマイズなしで使い続ける場合はおそらく問題は生じないと思いますが、スキンを Variety ( II ) にした場合に.entry-bodyの指定だとおかしくなります。

    というのは、Variety ( II ) では固定ページのタイトルが entry-body の直前に来るため本来揃うべき部分が揃わなくなってデザインがおかしくなるためです。

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