レスポンシブ対応のために必要…WordPress コアブロックと国産5テーマのブレイクポイントまとめ #WPZoomUP Advent Calendar 2021 ‐ マイペースクリエイターの覚え書き

この記事は「WP ZoomUP Advent Calendar 2021」の14日目として書いています。

最近では受託のWordPress 案件でもHTMLやCSS をゼロから書き起こさず、既存のテーマを使ってデザインをあてはめていくことが増えてきました。
しかし、仕様定義の段階でレスポンシブ対応に必要なブレイクポイントを何pxにしておくか決めていなくてデザイナーやディレクターの裁量でなんとなく決まったりすることもあったりします。

かく言う自分も先日やった案件で、裁量が自分にあったにもかかわらず、WordPressや使用テーマに沿ったブレイクポイントの指定をしていなくて、テーマやコアのCSSを上書きする量が増えてしまいとても反省したという事案がありました。

これを書いてる2021年12月現在、「WordPress ブレイクポイント」とかでググってもあんまりまとまった情報が出てこないということもありまして、似たような苦い経験をお持ちの方もちらほらいらっしゃるのではないでしょうか…。
同じことを繰り返さないよう、WordPress本体と個人的に実際に業務で使う可能性の高い国産テーマ5つのブレイクポイントを備忘録としてまとめました。

WordPress コアブロック
SWELL
Snow Monkey
Lightning
yStandard
- テーマ
- yStandard Blocks カスタムカラム
Nishiki Pro
個人的な方針（今後のための反省）

WordPress コアブロック

wp-includes/css/dist/block-editor/style.min.css で定義されていて、wp_dequeue_style( 'wp-block-library' ); しない限り自動的に読み込まれるもの。

基本的にWordPressコアで持ってるCSSにブレイクポイントが絡むものは多くないはずですが、カラムブロックを使ってコンテンツのレイアウトを組み立てていくことは多いと思いますし、気軽にブレイクポイントを変えられる仕組みは今のところないので、これに抗うのはおすすめしません…。

このCSSの全容は以下で確認できます。

数値はすべて「以上・以下（その数値を含む）」です。（※WordPress 5.8.2 現在。）

カラムブロック

2カラム	2カラムになる	600px〜
2カラム	1カラムになる	〜599px
3カラム以上	指定したカラム数になる	782px〜
	2カラムになる	600px〜781px
	1カラムになる	〜599px

ギャラリーブロック(3カラム以上)

指定したカラム数になる	600px〜
2カラムになる	〜599px

メディアとテキストブロック

※モバイルでは縦に並べる　の設定項目ONのとき

横に並ぶ	601px〜
縦に並ぶ	〜600px

※カラムブロックとギャラリーブロックは @media (max-width: 599px), メディアとテキストブロックは @media (max-width: 600px) で定義されているのはなぜ。。。なぜなんだぜ。。。

※追記、だめもとで max-width: 599px に直すプルリクを送ってみた。Gutenberg へ初コミット。いったいどうなることやら。

SWELL

PC	960px〜
タブレット	600px〜959px	グローバルナビがドロワーメニュー化サイドバーカラム落ち
スマートフォン	〜599px	フォントサイズ大きくなる

959pxでナビゲーションがドロワーメニューになるので、けっこう早いですね。
スマートフォンサイズがコアのカラムブロックと揃っているので扱いやすいです。

Snow Monkey

Snow Monkey Blocks プラグインの機能も含む

ワイドPC(xl)	80em(1280px)〜
PC(lg)	64em(1024px)〜79.9375em (1279px)
タブレット(md)	40em(640px)〜63.9375em (1023px)	グローバルナビがドロワーメニュー化
スマートフォン(sm)	〜39.9375em (639px)	左右余白狭くなる

1023pxでナビゲーションがドロワーメニューになるので、SWELLよりもさらに早いです。
Snow Monkey Blocks をいかにうまく使うかがポイントとなりそうなので、デザインカスタマイズが大きくなりそうなときは、デザイナーと事前の確認を綿密にしておくことがSnow Monkey のポテンシャルを最大限に引き出すためには必要だと感じています。

Lightning

Lightning G3 Pro Unit, VK Blocks, VK Blocks Pro の機能も含む

xxl	1400px〜
xl	1200px〜1399px
lg	992px〜1199px	ヘッダー余白変わる
md	768px〜991px	グローバルナビがドロワーメニュー化サイドバーカラム落ち
sm	576px〜767px	メインカラム狭くなる
xs	〜575px	左右余白狭くなるフォントサイズ小さくなる

Lightning は Bootstrap ベースということもあり、ブレイクポイントは他とちょっと異なります。
自分の使い方だと、Lightning はデザイナーをアサインできないような案件で使うことが多く、デザインカンプに合わせてゴリゴリにカスタマイズした経験はほとんどありません。

設定インポートファイルも用意されているので、一瞬でデモサイトを作って見せたら「これでいいじゃん」となるのがすごい。

yStandard

テーマ

デスクトップ（大）	1025px〜
デスクトップ	769px〜1024px	サイドバーカラム落ち
モバイル	〜768px	グローバルナビがドロワーメニュー化モバイルフッター出現

yStandard Blocks カスタムカラム

デスクトップ	1025px〜
タブレット	600px〜1024px
モバイル	〜599px

テーマのブレイクポイントと、yStandard Blocks プラグインのブレイクポイントが異なる点に要注意ですが、比較的扱いやすい数値だと感じました。
グローバルナビがモバイル用になるのが768px以下で、上記3テーマよりも狭いのが個人的には企業サイトの受託案件で使いやすいと感じています。

無料テーマですが、カスタマイズしやすさは他の有償テーマに引けを取りません。（なおこのブログも2021年12月現在、yStandard テーマを使っています）

yStandard | カスタマイズありきの一風変わったWordPressテーマ

「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変…

wp-ystandard.com

Nishiki Pro

デスクトップ	769px〜	「PC表示の時にメニューテキストを表示する」のチェックONのときドロワーメニューにならない
タブレット	681px〜768px
スマートフォン	〜680px

Nishiki Pro はまだ実際の案件で使ったことはなく、試用版をデモサイトで動かしてみた程度なのですが、機会があれば使ってみたいと思っているのでまとめました。

追記：公式のマニュアルページに記載がある旨、開発者のImamuraさんに教えていただきました。無料版とPro版の違いもまとまっていて助かります！

今後、他のテーマも実務で使うことがあれば加筆するかもしれません。

（メディアクエリの書き方でnot all andが全然使われてないのが意外でした。比較的新しい書き方だからかな。）

個人的な方針（今後のための反省）

WordPress コアのカラムブロックを活かすことを考えると、基本は「スマートフォン=〜599px」としておくのがよさそう
- ブレイクポイントが「スマートフォン=〜599px」想定でない Lightning テーマの場合は、なるべくVK Blocks Pro プラグインのグリッドカラムブロックを使う
- 同 Snow Monkey テーマの場合は Snow Monkey Blocks で使えるコンポーネントでなるべく組み立てる
メディアとテキストブロックは切り替わりが1px違うので、厳密なブレイクポイント定義がある案件では使用を避けるか、.wp-block-media-text.is-stacked-on-mobile のみCSSを自前で上書きする
スマートフォンビュー以外のブレイクポイントは使用するテーマに応じて決める
- テーマを決めてからデザイン作成、という流れをなるべく取れるようにする

レスポンシブ対応のために必要…WordPress コアブロックと国産5テーマのブレイクポイントまとめ #WPZoomUP Advent Calendar 2021