特定のブロックをPC・モバイルだけ表示する方法

WordPress 7.0でサポート

デスクトップ：表示幅＞782px
タブレット：480px＜表示幅≦782px
モバイル：表示幅≦480px

Cocoon 2.9.5でサポート

WordPressのブロック非表示とカラム折り返しのブレークポイントがズレてる問題

「WordPress 7.0のブロック非表示機能とブレークポイントの仕様差」を解説。非表示機能と標準「カラム」ブロックの判定基準の違いや、Cocoon独自のブレークポイントとの関係、レスポンシブ表示で起こる不整合を分かりやすく紹介します。

はじめに
実装手順
さいごに

はじめに

以下の記事では、ウィジェットに「PC・モバイル表示切り替え」オプションを追加する方法を紹介しました。

ウィジェットに「PC・モバイル表示切り替え」オプションを追加する方法

「CocoonのウィジェットをPC・モバイルで表示切り替えする方法」を解説。ウィジェットにPC非表示・モバイル非表示の設定を追加し、画面幅に応じて表示を切り替える方法や、CSSで表示状態を制御する仕組み、WordPress 7.0のブロック表示設定を活用した方法も分かりやすく紹介します。

同様に、Gutenbergエディターで配置したブロックでも、以下の条件でPC・モバイルの表示切り替えるようにします。

画面幅844px以上は、PC表示
画面幅843px以下は、モバイル表示

この記事では、この方法について説明します。

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

PC・モバイル表示を切り替えたいブロックでは、ブロックの高度な設定→「追加CSSクラス」に、以下を入力します。
- PCで非表示にする場合、pc-off
- モバイルで非表示にする場合、sp-off
複数のブロックをまとめて設定する場合は、ブロックをグループ化し、グループに追加CSSクラスを設定します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

/* PC非表示 */
@media (width > 834px) {
  .pc-off {
    display: none;
  }
}

/* モバイル非表示 */
@media (width <= 834px) {
  .sp-off {
    display: none;
  }
}

さいごに

今回紹介した方法を使えば、Gutenbergエディターで配置した任意のブロックを、PC・モバイルに応じて柔軟に表示・非表示に設定でき、閲覧者に最適化されたコンテンツ表示を実現できます。