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

PCとスマホで別のコンテンツを表示する方法

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

STORK19では、各ブロックに「表示設定」のオプションを追加しているので、PCやスマホなどの端末に応じてブロックの表示を指定できます。

端末のスクリーンサイズ(画面幅)やブラウザウィンドウのサイズ(横幅)によって、ブロックの表示を切り替えることができます。

CHECK

この記事ではWordPressテーマSTORK19の機能をご紹介しています。

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

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

STORK19のブロック表示設定

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

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

カバーブロック
カバーブロックでメインビジュアルを作成

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

スマホで表示した場合の例
スマホ画面だとしっくりこないように見えます。

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

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

STEP

カバーブロックを作成する(PC表示用)

STEP

カバーブロックを複製する(スマホ表示用)

STEP

複製したカバーブロックの背景画像やテキストの配置を変更する

STEP

それぞれのカバーブロックに表示設定を適用する

カバーブロックの表示設定

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

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

PCでの表示
スマホでの表示

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

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

スマホで見たときの文章の改行だけが気になるという場合は、上記のように2つのブロックを作らなくても対応できる便利な機能があります。(v3.23以降)

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

ブロック表示設定の仕組み

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

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

表示設定CSSクラススクリーンサイズ
すべての端末で表示(デフォルト)なしすべてのスクリーンサイズで表示
PC / タブレットで表示stk-hidden_sp横幅767px以下では非表示(display: none;)
モバイルで表示stk-hidden_pc横幅768px以上では非表示(display: none;)
  • PC / タブレットで表示・・・横幅768px以上でのみ表示される
  • モバイルで表示・・・横幅767px以下でのみ表示される

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

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

ただし、上記の通りSTORK19の表示設定は、実際の端末を判別するユーザーエージェントによる表示切り替えではなく、CSS(メディアクエリ)によるものになります。

表示設定を適用したブロックについても、HTML要素としてソースコードは出力されます。

また、大量のテキストをキーワード配置目的で非表示にする行為は、スパム扱いになる可能性もあるのでおすすめしません。


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

おすすめのWordPressテーマ

ブロックエディタ」に完全対応したSTORK19。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWモデル

STORK SE

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

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

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

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