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

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

この記事は「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 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

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

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

SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ

シンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ…
swell-theme.com

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 のポテンシャルを最大限に引き出すためには必要だと感じています。

WordPress テーマ Snow Monkey – どんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow Monkey

どんな味付けにも染まる。高級お出汁のような WordPress テーマ、Snow…
snow-monkey.2inc.org

Lightning

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

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

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

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

Lightning | 無料で使えるWordPress公式ディレクトリ登録テーマ「Lightning」ビジネスサイトもブログも簡単に作れます

無料で使えるWordPress公式ディレクトリ登録テーマ「Lightning」ビ…
lightning.vektor-inc.co.jp

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

WordPress テーマ Nishiki Pro | サポトピア

Nishiki Pro は「ウェブサイト運営に欠かせない機能」をまとめてテーマ内…
support.animagate.com

追記:公式のマニュアルページに記載がある旨、開発者の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を自前で上書きする
  • スマートフォンビュー以外のブレイクポイントは使用するテーマに応じて決める
    • テーマを決めてからデザイン作成、という流れをなるべく取れるようにする