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

[youkkw]

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

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

[Vektor,Inc]

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

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

[youkkw]

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

[DRILL LANCER]

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

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

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

• この返信は4年、 10ヶ月前にDRILL LANCERが編集しました。

[youkkw]

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

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

[Vektor,Inc]

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

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

[youkkw]

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

トップ

[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;
	}
}

[DRILL LANCER]

１カラム時の幅を調整するためにコードを入れたようですが、
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;
	}
}

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

[youkkw]

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

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

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

[DRILL LANCER]

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

（１カラム時の幅調整機能を実装する話がオンラインコミュニティ 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;
	}
}

[youkkw]

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

[DRILL LANCER]

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

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

[投稿者]

投稿