ブロックエディタでPCとスマホで別のコンテンツを表示する方法

PCとスマホで違う見せ方をしたいという場合に便利な機能をご紹介。

STORK19/SEでは、各ブロックに「表示制御」のオプションを追加しているので、PCやスマホなどのスクリーンサイズに応じてブロックの表示/非表示を指定できます。

下記がその実例で、PC・タブレット画面とモバイル画面で見えているものが異なります。

端末のスクリーンサイズ（画面幅）やブラウザウィンドウのサイズ（横幅）によって、コンテンツの表示内容を切り替えることができます。

このオプションの使いどころ

STORK19/SEのエディタ機能（オプション）であるブロックの表示制御ですが、実際どんなときに使うと便利なのか、カバーブロックを例に解説します。

表示制御は、ブロック設定パネルまたはブロックツールバーから使用できます。

PCとモバイルで別のカバーブロックを表示して見せ方を変える

カバーブロックのようなメインビジュアルとなり得るコンテンツは、特に見せ方にこだわりたいところではないでしょうか。

ただ、画面が横サイズであるPCに対して、縦サイズのスマホでは見え方も違うので、PCではレイアウト通りでも、スマホでは意図したように表示されないことが多々あります。

これを解決するための手段として、PC表示用とスマホ表示用のカバーブロックを設置して、それぞれのスクリーンサイズ（画面幅）で表示・非表示が切り替わるように設定してみます。

PCとスマホで別々のブロックを表示するための手順

PC表示用のカバーブロックには「PC・タブレット画面」を設定、スマホ表示用のカバーブロックには「モバイル画面」を適用します。

できあがったら、PCとスマホそれぞれの端末（もしくはブラウザウィンドウの横幅を縮めるなどして）で確認してみましょう。

PCでは「PC・タブレット画面」を設定したカバーブロックが表示され、スマホでは「モバイル画面」を設定したカバーブロックが表示されていれば成功です。

改行箇所だけ調整したいという場合

スマホで見たときの文章の改行だけが気になるという場合は、上記のように2つのブロックを作らなくても対応できる便利な機能があります。（テーマバージョン3.23以降）

ブロックツールバーからショートコードを自動挿入することで、PCとスマホで改行する箇所を指定できます。（下記参照）

ブロック表示制御の仕組み

STORK19/SEのブロック表示設定では、メディアクエリで表示/非表示を制御しています。

表示設定で「すべての端末で表示」以外を指定したブロックにはCSSクラスが付与され、スクリーンサイズ（画面幅）ごとのブレイクポイントに応じて非表示となる仕組みです。

• PC・タブレット画面・・・横幅768px以上でのみ表示される
• モバイル画面・・・横幅767px以下でのみ表示される

といった仕様になります。

表示設定で「すべての端末で表示」以外を指定したブロックは、エディター上では少し薄く表示されます。（ブロックエディタ上では非表示になりません）

なお、上記の表示設定は、CSS（メディアクエリ）によるものなので、HTML要素としてのソースコードは出力されます。

画面上で非表示にするだけではなく、ソースコードにHTMLタグも出力したくない場合は「ソースコードからも取り除く」オプションを使用してください。

このオプションはブロック設定パネルに表示されます。（ツールバーの方には表示されません）

ご紹介したブロック表示設定は、グループや再利用ブロックにも対応しているので、PCユーザーまたはスマホユーザー、それぞれに向けたコンテンツの出し分けにも活用できます。

CHECK!

オープンケージのアフィリエイトプログラムについて

A8.net AFFILIATEアフィリエイトのご案内 オープンケージではA8.netのアフィリエイトシステムを導入しております。オープンケージのテーマを紹介し...

アフィリエイトのご案内