[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 デザイン設定 の セクションベースの有無

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

• この返信は5年、 2ヶ月前に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;
}

• この返信は5年、 2ヶ月前にDRILL LANCERが編集しました。
• この返信は5年、 2ヶ月前に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;
}

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

[DRILL LANCER]

ブロックごとに中央揃えをすると左端が揃わず別の意味で違和感が生じると思います。
下記コードは１カラム時の記事エリアの幅を調整する CSS のコードです。
下記をベースに width の部分を色々と変更してみてください。

.mainSection-col-one,
.sideSection-col-one {
	margin-left:auto;
	margin-right:auto;		
}
@media (min-width: 992px) {
	.mainSection-col-one,
	.sideSection-col-one {
	  width: 600px;
	}
}
@media (min-width: 1200px) {
	.mainSection-col-one,
	.sideSection-col-one {
	  width: 600px;
	}
}

[DRILL LANCER]

あと、コンテンツデータに付属している Lightning Pro 0.0.0 は中身が空っぽのものです。
その場合、下記条件を満たさないと使えません。

• Lightning Pro を別途購入（ライセンスキーが発行される）
• 外観 ＞ カスタマイズ ＞ Lightning ライセンスキー と進み入力欄にライセンスキーを入力
• Lightning Pro およびプラグインを更新

現在の Lightning Pro の最新バージョンは 3.0.4 です。

【参考環境】
サーバー：XAMPP 7.4.1
PHP：7.4.1
WordPress：5.3.2

[DRILL LANCER]

LTG PRコンテンツ ウィジェットのことでしょうか？
Charm II では下記 CSS コードを子テーマの style.css に追記することで解消できます。

@media (min-width: 768px) {
	.row.left .pr-content-col-img {
	    padding-right: 0;
	}
}

P.S.
LTG PRコンテンツ ウィジェット は現状非推奨機能とされているようで、外観 ＞ カスタマイズ ＞ Lightning 機能設定 において停止できるようになっています。
今後廃止 or サポート対象外となるかもしれないので下記を参考に代替の方法で構築したほうがいいかもしれません。

PR コンテンツ ウィジェット を停止
プラグイン VK Blocks の Outer ブロックと PR Content ブロックで同様の事ができます。

P.P.S.
私は一般の参加者に過ぎないので、Lightning の今後の行く末はわからないのでその点はご了承ください。

[DRILL LANCER]

外観 ＞ カスタマイズ ＞ Lightning 機能設定 で PR コンテンツ ウィジェット を停止 にチェックが入っていませんか？

そのうち廃止される可能性のある機能のようで、上記該当設定の説明文に「プラグイン VK Blocks の Outer ブロックと PR Content ブロックで同様の事ができます。」とも書かれているのでこちらで対応してはいかがでしょうか？

P.S.
私は一般の参加者に過ぎないので、Lightning の今後の行く末はわからないのでその点はご了承ください。

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

[DRILL LANCER]

それは下記 CSS で対応可能と思われます。

.page-header .page-header_pageTitle {
    font-family: "游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,sans-serif;
}

CSSの記述場所は下記から選択してください。

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

[DRILL LANCER]

私の環境（詳細は下記）では普通に反映されました（１枚目：明朝体、２枚目：游ゴシック）。
下記を試してみてください。

• キャッシュプラグインや CDN を使用している場合はそのキャッシュを削除してみる
• ブラウザのキャッシュを削除してみる
• 普段使用しない別のブラウザで閲覧してみる

【私の環境】
サーバー：XAMPP 7.4.1
PHP：7.4.1
WordPress：5.3.2
Lightning Pro: 3.0.4
Lightning Skin JPNSTYLE: 3.4.1

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿