[DRILL LANCER]

現状（下記環境）だとカード（外側）ブロックの再利用ブロックがエラーを引き起こしているのでそちらに原因があるようです。
【検証環境】
Lightning Pro: 3.2.2
VK Blocks Pro: 0.20.3

カードブロックの再利用ブロック登録でエラーが発生する

[DRILL LANCER]

• Exunit の VK Blocks は無効になっていますか？
• Outer や 投稿リスト等の他の Pro 専用ブロックはありますか？

２つの質問をクリアしている場合はキャッシュが怪しいので下記のキャッシュを削除してみてください。

• CDN（使用している場合）
• サーバー
• プラグイン（使用している場合）
• ブラウザ

[DRILL LANCER]

２つのカードブロックをグループブロックを使ったグループ化は私もやってみましたが選択が難しく至難の業だと思います。
カードブロック２つのみを作っておいてCtrl + aでようやく選択ができました。この場合はエラーが発生しませんでした。
おそらく選択が甘いがゆえにエラーになったのだと思われます。

Outer ブロックを使ってその中にカードブロックを２つ配置するほうが個人的には簡単でした。
（グループブロックで同じことをするのは難しかったです。）

【検証環境】
Lightning Pro: 3.2.2
VK Blocks Pro: 0.20.3

P.S.
グループ化する前提ならば、カードブロックの仕様上、カードブロック（外側）の中にカードアイテム（内側）を６つ配置してカードブロック（外側）の設定の表示タイプとカラムで 3 列（タブレットやスマホでは 1 or 2 列）に設定したほうが良いと思います。

要は 3PR もどき×2 を作ってグループ化するよりは 6PR を作ってしまったほうが良いと思います。

[DRILL LANCER]

私も検証してみました。
「カードアイテム」の再利用ブロックは作成可能ですが、その外側をの「カードアイテム」の再利用ブロックを作成しようとするとエラーになりました。
【検証環境】
Lightning Pro: 3.2.2
VK Blocks Pro: 0.20.3

[DRILL LANCER]

再利用ブロックを通常のブロックに変換してもそうなりますか？
参考サイト：Gutenbergで再利用ブロックを通常ブロックに変換して編集する

[DRILL LANCER]

下記 CSS コードを下記のいずれかに追記することで一応タイトル部分を折り返すことは可能です。

• 子テーマの style.css
• 外観 ＞ カスタマイズ ＞ 追加CSS
• ExUnit ＞ CSS カスタマイズ

.navbar-brand a {
    white-space: normal; 
}

しかし、折り返した際のレイアウトが一様ではないため、
私としてはロゴ画像を作成して適用するのが無難だと考えます。
↑画像化してしまえばレイアウトを保ったまま伸縮自在になるというメリットがあります。

[DRILL LANCER]

mdに該当するサイズ時の反応がおかしいのを私も確認しました。

検証してみたところ下記のようになっていました。

1カラム設定時 → vk_post-col-md-1 が出力されているが 12 カラムにはなっていない
2カラム設定時 → vk_post-col-md-2 が出力されているが 6 カラムにはなっていない
3カラム設定時 → vk_post-col-md-3 が出力され 4カラムになっている
4カラム設定時 → vk_post-col-md-4 が出力され 3カラムになっている

他のサイズの範囲では正常な出力がなされていたようでした。
私からもご対応をお願いします。

[DRILL LANCER]

どうやらWordPress のコア側で.wp-block-columnに下マージンが設定されていないのが原因のようです。
開発者ではない私としては応急処置として下記 CSS コードを下記のいずれかに記述することを提案します。

• 子テーマの style.css
• 外観 ＞ カスタマイズ ＞ 追加CSS
• ExUnit ＞ CSS カスタマイズ

.wp-block-column {
	margin-bottom:1em;
}

1em の部分は適当に決めたので、40px 等適当な値に変えてください。

[DRILL LANCER]

私の場合は画像１のように段落ちして右に寄ります。
ブラウザの画面幅が 992px – 1199px までの場合は画像２のように中央揃えになります。

WordPress：5.3.2
Lightning Pro: 3.2.2
デザインスキン：Origin II

私の場合は下記 CSS コードを下記のいずれかに記述することでいい感じ（画像２と同様）にできました。

• 子テーマの style.css
• 外観 ＞ カスタマイズ ＞ 追加CSS
• ExUnit ＞ CSS カスタマイズ

@media (min-width: 1200px) {
	.gMenu,
	.gMenu_outer {
		float: none;
		right: unset;
		margin-left: auto;
		margin-right: auto;
	}
	.siteHeader_logo {
		float: none;
	}
	.navbar-header {
		text-align: center;
	}
}

私のパターンに該当しない場合は画像付きで説明するか、URLを貼るかすると解決しやすくなると思います。

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

Attachments:

You must be logged in to view attached files.

[DRILL LANCER]

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

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

[DRILL LANCER]

少々荒っぽくて多少のリスクはあるものの完全再現する方法もあることはあります。
この方法で生じるリスクは該当部分の CSS を削除されたら元も子もなくなる点にあります。

今回は Google Chrome の開発者ツールを使った例を示しておきます。

1. トップページコンテンツエリア上部 or LP ウィジェットに LTG 全幅見出し を設置して公開
2. ウィジェットを設置したページを開き、該当ウィジェットの部分を右クリック→検証
3. 開発者ツールが起動し選択された部分の付近に
   <div class="widget_ltg_full_wide_title_outer （略）" style="（長いので略）">
   というコードが見つかるのでその部分を左クリックして選択する
4. 上記該当部分を右クリックして Edit as HTML を選択
5. LTG全幅見出しに該当する部分の全体が編集可能になるのでその全体を選択
6. 上記で選択した部分を右クリック→コピー
7. LTG全幅見出しの要素を使いたい部分に カスタム HTML ブロック を挿入し先程コピーしたコードを貼り付け

[DRILL LANCER]

完全再現とは行きませんが・・・
（文字の影が再現不可＆全体の高さに数 px ほどの誤差が出る）
再現方法を書いておきます。

まず、VK Outer ブロックの中に下記の順番でブロックを配置します。

1. VK レスポンシブスペーサー
2. VK見出し
3. VK レスポンシブスペーサー

触れていないものはデフォルトで OK です。

【VK Outer ブロックの設定】

＜背景設定＞
ご自由にどうぞ。

＜レイアウト設定＞
アウターの幅 → 全幅
コンテンツエリアの余白 (左右) → 余白なし
余白 (上下) → 標準の余白を使用しない

＜枠線の設定＞
枠線の種類 → なし

【VK レスポンシブスペーサー ブロックの設定（２つとも）】
単位 → em
PC → 3 or 2.5
タブレット → 3 or 2.5
モバイル → 2.5

【VK 見出し ブロックの設定】

＜スタイル設定＞
見出しスタイル → 装飾無し
下部の余白→ 0

＜見出し設定＞
Text Alignment → 中央揃え
文字サイズ (rem) → 2
見出し下部の余白 (rem) → 0.3
文字の色 →　ご自由に

＜サブテキスト設定＞
文字サイズ (rem) → 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;
	}
}

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

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

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

[投稿者]

投稿