MENU

WordPress 7.1で何が変わった？レスポンシブスタイルを実際に試してみた

WordPress運営
WordPress 7.1レスポンシブスタイル
  • URLをコピーしました！

WordPress 7.1がリリースされました。

サイトのデザインがすでに完成していると、WordPressを更新しても「不具合がなければそれでいい」となりがちです。自身も普段はそのタイプですが、今回は新機能を確認してみました。

WordPress 7.1には300件を超えるCoreの変更が含まれており、エディターやデザイン機能にも複数の改善が入っています。

その中で、一般ユーザーが実際に触って分かりやすいのがレスポンシブスタイルです。

目次

WordPress 7.1ではデザイン機能が少し強化された

WordPress本体の開発情報を公開している「Make WordPress Core」によると、WordPress 7.1ではブロックのデザイン機能が拡張されています。

主なものとして、

  • スマホ・タブレットごとに見た目を変更できるレスポンシブスタイル
  • ボタンなどのホバー・フォーカス時のスタイル設定
  • テキストシャドウ
  • 対応ブロックで利用できる最小幅
  • 背景グラデーション関連の強化

などがあります。

すべての機能が、すべてのテーマやブロックですぐ使えるわけではありません。ブロック側やテーマ側の対応によって、利用できる設定は変わります。

今回はその中でも、WordPress 7.1で分かりやすく変化を感じられたレスポンシブスタイルを試しました。

レスポンシブスタイルならスマホだけ見た目を変えられる

WordPress 7.1では、ブロックごとにデスクトップ・タブレット・モバイルで異なるスタイルを設定できます。

たとえばPCでは大きな文字を表示しながら、スマホでは文字サイズを少し小さくする、といった調整が可能です。以前なら追加CSSでメディアクエリを書くような調整を、対応している項目であればブロックエディターから設定できます。

WordPressの標準設定では、モバイルは480px以下、タブレットは480pxを超えて782px以下として扱われます。

実際に試してみました。PC、タブレット、スマホでそれぞれ文字サイズを変えると、プレビューを切り替えるだけで表示の違いを確認できます。

レスポンシブ設定

CSSを触らなくてもブロック単位で調整できるので、少しだけスマホ表示を直したい場合にはかなり便利です。

※上記の画像では「レスポンシブ/PC・レスポンシブ/タブレット」はどの環境から見ても文字サイズは変わりませんが、「レスポンシブ/スマホ」はスマホから見た場合のみ文字サイズが小さくなります。
設定手順はレスポンシブスタイルを選択してチェックを入れた後に、個別に設定したい環境を更に選択し、変更したい箇所の文字サイズを決定します。

便利だけど個別設定を増やしすぎると分かりにくい

実際に使ってみて気になったのは、後から個別設定を把握しにくいことです。

設定した直後なら、

「このブロックはスマホだけ文字を小さくした」

と覚えています。

しかし記事数が増えたり、数か月後に編集し直したりすると、どのブロックへレスポンシブ設定を入れたのか分かりにくくなりそうです。個人的には、レスポンシブ設定が入っているブロックを一目で判別できる表示や、設定した内容をまとめて解除できる分かりやすいリセット機能が欲しいと感じました。

便利だからといって細かく設定しすぎるより、本当に必要なブロックだけに使う方が管理しやすそうです。

SWELLでも使いどころはありそう

今回はSWELL環境でレスポンシブスタイルを試しました。サイト全体のデザインをすでにSWELL側で調整している場合、この機能を使って既存デザインを作り直す必要はありません。

ただ、

「この見出しだけスマホでは少し小さくしたい」

「このブロックだけスマホの余白を減らしたい」

といった部分的な調整では便利です。

WordPress 7.1は、更新した瞬間にサイトの使い方が大きく変わるアップデートではありません。それでもレスポンシブスタイルのように、これまでCSSを使っていた調整の一部をエディターだけで行えるようになったのは分かりやすい進化です。

今後さらに対応するブロックや設定が増えれば、WordPressだけでできるデザイン調整の幅も広がりそうです。

この記事で参考にした情報

WordPress運営
運営
  • URLをコピーしました！

コメント

コメントする

目次