[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年、 8ヶ月前に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;
	}
}

[DRILL LANCER]

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

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

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

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

[DRILL LANCER]

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

• ExUnit の VK Blocks が無効になっているか
• マイアカウントから入手可能な VK Blocks Pro が有効になっているか

[DRILL LANCER]

冒頭に記載の３つのみでOKの場合は下記コードで可能となります。
width の値は適宜変更してください。

.mainSection-col-one .wp-block-vk-blocks-faq,
.mainSection-col-one .wp-block-vk-blocks-timeline,
.mainSection-col-one .wp-block-vk-blocks-step {
	margin-left: auto;
	margin-right:auto;
	max-width:600px;
}

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

[DRILL LANCER]

全てのブロックがエリアの幅を精一杯使用しているため一工夫が必要となります。
つまり、ブロック単位で幅を調整しなおかつ中央揃えにする必要があります。

（文字のみの中央揃えも試しましたがさすがに滑稽だったので却下しました。）

とりあえず、画像ブロック以外のブロックの幅を調整し中央揃えにする方法を書いておきます。
下記 CSS コードで画像以外のブロックを中央揃えにできます。
width の値は適宜変更してください。

.mainSection-col-one [class*="wp-block-"]:not(.wp-block-image) {
	margin-left: auto;
	margin-right:auto;
	max-width:600px;
}

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

[投稿者]

投稿