ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Lightningバージョン15でtheme.json有効化後のグループブロック注意点

テーマLightningのバージョン15へのアップデートに伴い、theme.jsonが有効化できるようになりました。

theme.jsonはもともとブロックテーマ(フルサイト編集のできるブロックをベースとしたテーマ)を想定して作成されたファイルですが、従来のクラシックテーマ(非ブロックテーマ)でも設置することでさまざまなメリットが享受できます。

しかしtheme.jsonを設置することによるデメリットもあるわけで、とりわけグループブロックにおいては従来とHTML構造が異なるため注意が必要です。大きく次の2点があげられます。

  1. HTML構造が変化する。したがってグループブロックにカスタムCSSを適用している場合は、想定外のデザインになる可能性がある。
  2. コンテンツの横幅に変化が生じる(デバイス幅576px未満のスマホ)。

本記事では、テーマLightningでtheme.jsonを有効化した場合のグループブロックのふるまいについて紹介していきます。

Lightning制作元のVektorさんのこちらの記事も参照ください。

Lightningバージョン15でのtheme.json有効化の方法

Lightningバージョン15以上では、テーマカスタマイザーの中でtheme.jsonの有効化をすることができます。

ダッシュボードメニューの 外観>カスタマイズ>Lightning機能設定 と進めて”theme.jsonを有効にする”にチェックを入れるだけです。

theme_jsonの有効化画面

ちなみに、従来バージョンとの互換性を考慮してデフォルト設定は次の通りとなっています。

  • 旧バージョンからのアップデートの場合、デフォルトではtheme.jsonは無効化状態
  • バージョン15から新規インストールした場合、デフォルトでtheme.jsonは有効化状態

グループブロックの注意点

theme.jsonを有効化することで、すでに紹介したとおりグループブロックの変化点が大きく2つみられます。

  1. HTML構造が変化する。したがってグループブロックにカスタムCSSを適用している場合は、想定外のデザインになる可能性がある。
  2. コンテンツの横幅に変化が生じる(デバイス幅576px未満のスマホ)。

以下、詳細に紹介していきます。

HTML構造の変化

これはテーマLightningのみならず、他のすべてのクラシックテーマでも当てはまります。

例として、グループブロックの中に段落ブロックが1つだけ入っている場合のシンプルなHTMLを見てみましょう。

theme.json無効化(従来)の場合

これが従来のグループブロックのHTML構造です。

<div class="is-layout-constrained wp-block-group">
	<div class="wp-block-group__inner-container">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna...
		</p>
	</div>
</div>

このように、div.wp-block-groupの一階層下にdiv.wp-block-group__inner-containerがある、2層構造となっています。段落ブロック(コンテンツ)はこの2層構造の下位に設置されます。

theme.json有効化の場合

<div class="is-layout-constrained wp-block-group">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna...
	</p>
</div>

div.wp-block-group__inner-containerがなくなり、-block-groupの直下に段落ブロック(<p>タグ)がある、シンプルな構造となっています。

従来グループブロックにカスタマイズをする場合、div.wp-group__inner-containerにCSSを適用することが多かったと思いますが、theme.jsonを有効化するとCSSがあたらなくなるのがわかるでしょう。

こちらの記事ではグループブロックおよびその派生ブロックである横並び・縦積みブロックのtheme.jsonありなしのHTML構造について解説しているので参照ください。

コンテンツ幅の変化

今回のLightningバージョン15でtheme.jsonを有効化した場合のコンテンツ幅(段落や画像などの表示幅)が、従来とは異なる挙動となります。

検証バージョンは以下の通りです。今後のアップデートにより挙動が改善される可能性はあります。

  • ワードプレス・・・バージョン6.1.1
  • Lightning・・・・・バージョン15.1.3

LightningのHTML構造

テーマLightningのコンテンツ部にかかわる基本的なHTML構造を先に確認しておきましょう。

Lightningの基本的なHTML構造

ブロックエディターで入力したコンテンツ部は、上記の赤枠であるdiv.entry-bodyの中に配置されます。しかし、div.entry-bodyもその上の2つのdivもCSSでは横幅が設定されておらず、結果としてdiv..site-body-containerがコンテンツ幅を決めるコンテナ的な役割を果たします。

したがって、div.site-body-containerと配置したコンテンツ自身のCSSにより、コンテンツ幅が決まります。

段落と画像ブロックを配置した場合(グループブロックなし)

コンテンツとして段落ブロックと画像ブロックを設置した事例が以下の通りです。

.site-body-containerには左右paddingが15pxずつ設定されているため、コンテンツ(段落と画像)の幅は (.site-body-containerの幅) – 30px となります。

コンテンツの幅を決めるクラスsite-body-container

.site-body-containerの幅は、PCやスマホなどのデバイス幅に応じて変化し、コンテンツ幅は常に.site-body-conatinerの幅から30px分(左右padding15px分)狭くなります。

デバイス幅とsite-body-containerおよびコンテンツ幅の関係

上の表のとおり、FHD(1920×1020px)のパソコンであればコンテンツ幅は1100px、デバイス幅375pxのiphone Xであればコンテンツ幅は345px (= 375 – 30px)となります。

コンテンツをグループブロックに入れた場合

しかしながら段落ブロックや画像ブロックといったコンテンツをグループブロック内に配置すると、theme.jsonを有効化の場合次のような挙動となります。

コンテンツをグループブロックに入れた場合のコンテンツ幅の変化

デバイス幅576px以上の場合はグループブロック内外でコンテンツ幅に差はありませんが、576px以下のデバイス(すなわちスマホ)の場合、コンテンツ幅はデバイス幅から60pxも狭くなります。デバイス幅375pxのiphone Xの場合、315pxにまで狭くなってしまうのです。

theme.jsonを有効化しない場合は、このようなことはなく、グループブロックありなしでコンテンツ幅に差はみられません。

コンテナ幅、グループブロック幅、コンテンツ幅のCSSで確認

どうしてこのような挙動になってしまうのか、スマホ画面状態(iphone X)のCSSを確認してみましょう。

合わせてグループブロックを幅広化、全幅化したときにどうなるかも確認します。

段落と画像ブロックを配置した場合(グループブロックなし)

すでに紹介したように、コンテナとなる.site-body-containerは左右padding: 15pxとなっているため、その中に入るコンテンツの幅は、(デバイス幅) – 30pxとなります。

iphone Xの場合は、375px-30px=345pxがコンテンツ幅です。

スマホでのCSSとコンテンツ幅(グループブロックなしの場合)

グループブロックなしの場合、スマホでのコンテンツ幅は
(デバイス幅) – 30px
となる

コンテンツをグループブロックに入れた場合

グループブロックの中に入ったコンテンツには、なぜかmax-width:100%-15px×2が与えられるようになります。その結果コンテンツ幅は、コンテナ幅(.site-body-container)の左右padding: 15pxと合わせて、合計60px分デバイス幅よりも狭くなります。

iphone Xの場合は、375px-60px=315pxにまでコンテンツ幅は狭くなってしまうので、結構きゅうくつな印象のサイト表示になってしまいます。

スマホでのCSSとコンテンツ幅(グループブロックありの場合)

グループブロックありの場合、スマホでのコンテンツ幅は
(デバイス幅) – 60px
となる

グループブロックの幅広を適用した場合

グループブロックの幅が100%よりも15px分広くなります。その結果コンテンツ幅も15px幅が広い方向に戻って、(デバイス幅) – 45px となります。

iphone Xの場合、375px-45px=330pxがコンテンツ幅です。

スマホでのCSSとコンテンツ幅(グループブロックを幅広化した場合)

グループブロックを幅広にした場合、スマホでのコンテンツ幅は
(デバイス幅) – 45px
となる

グループブロックに全幅を適用した場合

グループブロックの幅がデバイス幅いっぱいに広がり、幅広よりさらに15px分広くなります。その結果コンテンツ幅は、(デバイス幅) – 30px となります。

iphone Xの場合、375px-30px=345pxがコンテンツ幅となり、グループブロックなしの場合と同じとなります。

スマホでのCSSとコンテンツ幅(グループブロックを全幅化した場合)

グループブロックを全幅にした場合、スマホでのコンテンツ幅は
(デバイス幅) – 30px
となる

まとめ

theme.jsonを有効化したときのグループブロックについてまとめると以下の通りです。

1.HTML構造がシンプルになる

従来div.wp-block-groupの一階層下にあったdiv.wp-block-group__inner-containerがなくなり、シンプルな構造となった。これにより、グループブロックにカスタムCSSを適用していた場合、意図通りのデザインでなくなる可能性がある。

2.スマホ(デバイス幅576px未満)のコンテンツ幅が従来より狭くなる

ブロックの構成コンテンツ幅
グループブロックなし(デバイス幅) – 30px
theme.json無効
グループブロック内
(デバイス幅) – 30px
theme.json有効化後
グループブロック内
(デバイス幅) – 60px
theme.json有効化後
幅広グループブロック内
(デバイス幅) – 45px
theme.json有効化後
全幅グループブロック内
(デバイス幅) – 30px

したがって、グループブロックを使わない他のコンテンツと幅を揃えようとするならば、グループブロックは全幅化して使うとよい、ということになります。

以上の検証バージョンは以下の通りです。今後のアップデートにより挙動が改善される可能性はあります。

  • ワードプレス・・・バージョン6.1.1
  • Lightning・・・・・バージョン15.1.3

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる