この記事は「WP ZoomUP Advent Calendar 2021」の14日目として書いています。
最近では受託のWordPress 案件でもHTMLやCSS をゼロから書き起こさず、既存のテーマを使ってデザインをあてはめていくことが増えてきました。
しかし、仕様定義の段階でレスポンシブ対応に必要なブレイクポイントを何pxにしておくか決めていなくてデザイナーやディレクターの裁量でなんとなく決まったりすることもあったりします。
かく言う自分も先日やった案件で、裁量が自分にあったにもかかわらず、WordPressや使用テーマに沿ったブレイクポイントの指定をしていなくて、テーマやコアのCSSを上書きする量が増えてしまいとても反省したという事案がありました。
これを書いてる2021年12月現在、「WordPress ブレイクポイント」とかでググってもあんまりまとまった情報が出てこないということもありまして、似たような苦い経験をお持ちの方もちらほらいらっしゃるのではないでしょうか…。
同じことを繰り返さないよう、WordPress本体と個人的に実際に業務で使う可能性の高い国産テーマ5つのブレイクポイントを備忘録としてまとめました。
目次
WordPress コア ブロック
wp-includes/css/dist/block-editor/style.min.css で定義されていて、wp_dequeue_style( 'wp-block-library' ); しない限り自動的に読み込まれるもの。
基本的にWordPressコアで持ってるCSSにブレイクポイントが絡むものは多くないはずですが、カラムブロックを使ってコンテンツのレイアウトを組み立てていくことは多いと思いますし、気軽にブレイクポイントを変えられる仕組みは今のところないので、これに抗うのはおすすめしません…。
このCSSの全容は以下で確認できます。
WordPress/wp-includes/css/dist/block-library/style.css at master · WordPress/WordPress · GitHub
数値はすべて「以上・以下（その数値を含む）」です。（※WordPress 5.8.2 現在。）
カラムブロック
| 2カラム | 2カラムになる | 600px〜 |
|---|---|---|
| 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でナビゲーションがドロワーメニューになるので、けっこう早いですね。
スマートフォンサイズがコアのカラムブロックと揃っているので扱いやすいです。
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ
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 のポテンシャルを最大限に引き出すためには必要だと感じています。
Snow Monkey – どんな味付けにも染まる。高級お出汁のような WordPress テーマ、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 はデザイナーをアサインできないような案件で使うことが多く、デザインカンプに合わせてゴリゴリにカスタマイズした経験はほとんどありません。
設定インポートファイルも用意されているので、一瞬でデモサイトを作って見せたら「これでいいじゃん」となるのがすごい。
Lightning | 無料で使えるWordPress公式ディレクトリ登録テーマ「Lightning」ビジネスサイトもブログも簡単に作れます
yStandard
テーマ
| デスクトップ（大） | 1025px〜 | |
|---|---|---|
| デスクトップ | 769px〜1024px | サイドバーカラム落ち |
| モバイル | 〜768px | グローバルナビがドロワーメニュー化 モバイルフッター出現 |
yStandard Blocks カスタムカラム
| デスクトップ | 1025px〜 |
|---|---|
| タブレット | 600px〜1024px |
| モバイル | 〜599px |
テーマのブレイクポイントと、yStandard Blocks プラグインのブレイクポイントが異なる点に要注意ですが、比較的扱いやすい数値だと感じました。
グローバルナビがモバイル用になるのが768px以下で、上記3テーマよりも狭いのが個人的には企業サイトの受託案件で使いやすいと感じています。
無料テーマですが、カスタマイズしやすさは他の有償テーマに引けを取りません。（なおこのブログも2021年12月現在、yStandard テーマを使っています）
Nishiki Pro
| デスクトップ | 769px〜 | 「PC表示の時にメニューテキストを表示する」 のチェックONのときドロワーメニューにならない |
|---|---|---|
| タブレット | 681px〜768px | |
| スマートフォン | 〜680px |
Nishiki Pro はまだ実際の案件で使ったことはなく、試用版をデモサイトで動かしてみた程度なのですが、機会があれば使ってみたいと思っているのでまとめました。
追記：公式のマニュアルページに記載がある旨、開発者のImamuraさんに教えていただきました。無料版とPro版の違いもまとまっていて助かります！
【レスポンシブ ウェブデザイン用】Nishiki / Nishiki 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を自前で上書きする - スマートフォンビュー以外のブレイクポイントは使用するテーマに応じて決める
- テーマを決めてからデザイン作成、という流れをなるべく取れるようにする