新テーマ「ストークSE」をリリースしました!

Responsive Block Controlを使ってブロックをモバイル表示で切り替える

Responsive Block Control

Responsive Block Controlは、デバイスサイズ(スクリーンサイズ)に応じて、ブロックの表示・非表示をコントロールできるプラグインです。

このプラグインを使用することで、様々なブロックに対して、PCでは表示、スマホでは非表示のように、コンテンツの表示切り替えを簡単に設定できるようになります。

ブロックごとに非表示設定できるテーマ

STORK19では、「ブロックごとに」端末サイズに合わせて表示非表示を切り替える機能を標準装備しています。詳しくは以下の記事にて。

ブロックの表示設定オプション

プラグインのインストールと有効化

Responsive Block Controlを検索
  • 管理画面の【プラグイン > 新規追加】を開き「Responsive Block Control」を検索
  • Responsive Block Controlをインストール&有効化

▲ プラグインはこちらのページ

Responsive Block Controlの使い方

Responsive Block Controlを有効化すると、ブロックエディタの設定パネルに「表示状態」という項目が追加されます。

このスイッチの切り替えで、デバイスサイズごとの表示・非表示を設定できます。

Responsive Block Control:表示状態

個別ブロックだけではなく、ブロックパターンを含むグループでも使用できます。

スイッチをONにすると、ブロック要素にCSSクラスが付与され、スクリーンサイズ(画面幅)ごとのブレイクポイントに応じて非表示となる仕組みです。

それぞれ、適用条件は以下の通りとなります。(プラグインバージョン1.2.4時点の仕様)

Hide on Mobile横幅740px以下の画面では非表示
Hide on Tablet横幅740px以上、980px以下の画面では非表示
Hide on Desktop横幅980px以上、1480px以下の画面では非表示
Hide on Wide横幅1480px以上の画面では非表示

例えば、カバーブロックをPCなどのデスクトップサイズの画面のみで表示したい場合は、タブレット、モバイルは非表示に設定します。

Responsive Block Control:PCのみ表示

また、モバイルのみで表示したい場合は、モバイル以外を非表示に設定します。(タブレットも含める場合は、デスクトップとワイドのみ非表示に設定します)

Responsive Block Control:モバイルのみ表示

ブロックの表示状態を変更しても、編集画面内のプレビューでは非表示になりませんので、確認は「新しいタブでプレビュー」もしくは実機デバイスを使ってください。

【応用編】表示するブロックをデバイスサイズごとに分ける

PC、スマホ、タブレット、それぞれで違う内容やレイアウトで表示したいという場合も、この機能を応用して実現できます。

下記の例では、PCおよびタブレット表示用のカバー【図1】はモバイルを非表示にして、スマホ表示用のブロック【図2】はモバイル以外を非表示に設定しています。

Responsive Block Control:表示するブロックをデバイスサイズごとに分ける

このように設定することで、PCおよびタブレットでは【図1】のカバーを表示、スマートフォンでは【図2】のカバーを表示するといったことが可能になります。

Responsive Block Control:PCでの表示
PCでの表示
Responsive Block Control:スマートフォンでの表示
スマートフォンでの表示

まとめ

Responsive Block Controlを使用すれば、デバイスサイズ(スクリーンサイズ)ごとのコンテンツの表示を切り替えが簡単にできます。

ただし、端末を判別するユーザーエージェントによる表示切り替えではなく、CSS(メディアクエリ設定)でのレスポンシブ対応によるものなので、非表示にしたブロック要素についても、ソースコードは出力されるということは意識しておきましょう。

ブロックごとに非表示設定できるテーマ

STORK19では、「ブロックごとに」端末サイズに合わせて表示非表示を切り替える機能を標準装備しています。詳しくは以下の記事にて。

ブロックの表示設定オプション

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。