SWELLでスマホだけブロックが表示されない|デバイス制限と親ブロックの確認手順

SWELLでスマホだけ表示されないときに、デバイス制限と親ブロックを確認する

パソコンでは見えるのに、スマホで開くと見出しや記事一覧だけが消えている。SWELLでこの状態になったら、対象ブロックの「デバイス制限」と、それを囲んでいる親ブロックの設定を順に確認します。

対象ブロックに制限がなくても、親がPCのみの表示なら、その中の内容はスマホに出ません。この記事では、消えている範囲から確認する場所を絞り、PCとスマホの両方に表示できたかを確かめるまでを説明します。

親子の設定画像と4条件の表示例は、2026年9月にWordPress 7.1.1/SWELL 2.18.0で確認した記録です。2026年10月の見直しでは、PC編集画面の操作名と公式資料を再確認しました。スマホ実機での操作確認とは区別しています。

目次

表示されない範囲の確認

この手順は、SWELLのブロックエディターをPCで操作でき、対象の投稿・固定ページを編集・保存できる人向けです。編集権限がない場合は、公開URLと消えている範囲をサイト管理者へ伝えてください。

編集する前に、PCとスマホで同じ公開URLを開き、何が消えているかを比べましょう。編集画面で見えるだけでは、読者側にも表示されるとは判断できません。PC用とスマホ用の内容を別々に作っている場合は、二重表示を避けるため、どちらを残すかも確かめます。

以下の表から、自分の症状に合う確認先へ進んでください。ページ全体が開かない場合は、この手順でブロック設定を変更せず、URLと表示されたエラーを確認します。

「新着記事」という見出しと、その下の記事一覧を例にすると、確認先は次のように絞れます。

症状別の確認先

表示されない範囲最初の確認先次の確認先
記事一覧だけが消える投稿リスト自身投稿リストを囲む親
見出しと記事一覧が一緒に消える共通の親ブロックさらに外側の親
ページ全体が開かないURL・エラーの内容本文以外の問題を調べる

見出しや一覧がまとまって消えている場合は、それらを囲むブロックが手がかりになります。ただし、消えた範囲だけで原因を決めつけず、実際の設定を確認してください。

この記事が扱うのは、投稿・固定ページの本文に置いたブロックの一部が表示されない症状です。ページ全体が開かない、エラー画面になる、ヘッダーだけが消える場合は、本文ブロック以外の確認が必要です。

対象ブロックのデバイス制限を確認する

消えているブロックを選択する

WordPressの管理画面で「投稿」→「投稿一覧」(固定ページなら「固定ページ」→「固定ページ一覧」)を開き、対象のタイトルを選びます。編集画面でスマホに出ないブロックをクリックします。例の記事一覧なら「投稿リスト」を選びます。

右側の設定サイドバーで「ブロック」タブを開き、選択中のブロック名が目的のものかを確認してください。「投稿」や「固定ページ」タブのままだと、ページ全体の設定を見ていることになります。サイドバーが閉じている場合は、編集画面右上の設定ボタンで開きます。

ブロックの選び方や設定サイドバーの見方に迷ったら、SWELLのブロックエディターの基本操作を先に確認できます。

表示の目的に合わせて制限をクリアする

「デバイス制限」を開き、「表示するデバイスサイズ」を確認します。PC・SPは表示を限定するための選択肢で、SPはスマホ側の表示を指します。変更する前に、選択したブロック名と元の設定をメモするか、画面を撮って残しておきましょう。

「PC」が選択されていて、そのブロックをスマホにも表示したい場合は、同じ欄にある「クリア」を押します。PC・SPのどちらにも限定しない状態になったことを確認してください。

投稿リストのデバイス制限でPCが選択され、クリアが表示されている。

対象ブロックのPCのみ表示を解除するときは「クリア」を選びます。

HOAI Point

「スマホにも表示したい」と「スマホだけに表示したい」は別です。PCとスマホの両方に表示したい場合は制限をクリアします。SPへ切り替えると、今度はPC側の表示対象から外れます。

制限をクリアしたら、手順4〜6の保存と表示確認へ進みます。両方に表示され、重複もなければ完了です。親の設定変更へ進む必要はありません。対象に制限がない場合や、保存後も出ない場合だけ、次の親ブロックを確認します。ブロックを削除して作り直す必要はありません。

リストビューで親ブロックをたどる

親ブロックとは?

親ブロックとは、別のブロックを内側に入れている、外側のブロックのことです。グループ、カラム、SWELLのフルワイドなどが該当します。画面上で直前に並んでいる見出しが、必ず親になるわけではありません。

たとえば、フルワイドの中にグループがあり、その中に「新着記事」の見出しと投稿リストを置いた構成を考えます。フルワイドをPCのみの表示にすると、スマホでは内側の見出しと投稿リストも表示されなくなります。

PCのみ表示のフルワイドの中にグループ、見出し、投稿リストが入り、スマホではまとめて非表示になる構造
親ブロックの制限は、その中にある見出しや投稿リストにも影響します。

この構成では、投稿リストだけを選んでも、外側のフルワイドの制限は解除できません。すぐ外側のグループに制限がなければ、さらに外側までたどる必要があります。

子をSPのみへ変更しても、PCのみの親の中ではスマホ表示を取り戻せません。親と子の両方で表示条件を満たす必要があるためです。

次の表は、2026年9月のPC・スマホ幅プレビューでの確認記録です。図と同じ構成で、親はフルワイド、対象は投稿リストを指し、間のグループはすべて制限をクリアしています。見出しの結果やスマホ実機での操作結果は含みません。

親・対象の設定PCの投稿リストスマホの投稿リスト
親: クリア
対象: PC
表示非表示
親: PC
対象: クリア
表示非表示
親: PC
対象: SP
非表示非表示
親: クリア
対象: クリア
表示表示

親の設定を確認する手順

編集画面左上の「ドキュメント概観」から「リストビュー」を開きます。ブロックが一覧になり、内側のブロックは右へ下がって表示されます。矢印は中身の開閉、ブロック名は選択に使います。

HOAI Point

親の制限をクリアすると、親による非表示は解除されます。ただし、中のブロック自身にも制限がある場合は、その設定も確認してください。PC用とスマホ用を別々に作っているページでは、同じ案内が二重に出る可能性があります。親を変更する前に、別の場所にスマホ用の内容がないか確認しましょう。

STEP
対象を見つける

表示されない投稿リストのブロック名をクリックします。見つからない場合は、外側のブロック名の横にある矢印をクリックして中身を開きます。

リストビューのフルワイドとグループの中にある投稿リストを選択した画面。

ドキュメント概観からリストビューを開き、消えている投稿リストを選びます。

STEP
一つ外側を選ぶ

この例では、投稿リストを中に含む、左へ一段戻ったグループのブロック名をクリックします。右側の「ブロック」設定で選択中の名前を確認し、デバイス制限を見ます。

投稿リストの一つ外側のグループを選び、デバイス制限が選ばれていないことを確認する画面。

一つ外側のグループを選び、右側の設定を確認します(同じ画面の該当部分を上下に配置)。

STEP
さらに外側を確認する

この例では、グループの外にあるフルワイドも同じように確認します。実際のページでは親の種類や数が異なるため、さらに外側に親があれば続けてたどります。PCのみの親が見つかったら、元の設定を記録し、表示の目的を確かめて「クリア」を押します。

さらに外側のフルワイドを選び、PCのみ表示になっていることを確認する画面。

さらに外側のフルワイドがPCのみなら、表示の目的を確かめてクリアします(同じ画面の該当部分を上下に配置)。

STEP
保存して確認画面を開く

公開済みの記事は、編集画面右上の「保存」(環境によっては「更新」)を押し、更新完了の通知を確認します。その後、対象の公開URLを別タブで開いて再読み込みします。公開済みページへの保存は、読者が見る内容にも反映されます。

公開済み投稿の編集画面右上にある「保存」ボタン。

公開済みの記事は右上の「保存」で反映します。2026年10月のPC編集画面。

下書きの場合だけ、「下書き保存」後に右上の「表示」→「新しいタブでプレビュー」を選びます。下の画像はこの下書き操作の例です。公開URLとプレビューURLを取り違えないよう、確認するページのタイトルも見ましょう。

下書き保存後に表示メニューから新しいタブでプレビューを開く操作部分。

下書き保存後、「表示」から「新しいタブでプレビュー」を開きます(同じ画面の操作部分を上下に配置)。

保存した設定が不安な場合は、編集画面を開き直し、変更したブロックの「デバイス制限」が意図した値で残っているか確かめます。

STEP
スマホ側を見る

公開済みなら、スマホのブラウザーで同じ公開URLを開いて再読み込みし、消えていた見出し・記事一覧が表示されるかを確かめます。記事のリンクやボタンも一つ操作し、目的のページへ進めるかを確認してください。

制限を解除したスマホ幅のプレビューに新着記事の見出しと2件の記事一覧が表示されている。

2026年9月の確認例。親と子の制限をクリアしたスマホ幅プレビューに、見出しと2件の記事一覧が表示されています。

手元にスマホがない場合や下書きは、編集画面の「表示」→「モバイル」で狭い幅の見え方を確認できます。ただし、これは表示幅の確認です。実際のスマホのブラウザーでの表示やタップ操作まで確認したことにはなりません。

PC幅では見えるのに狭い幅で消える状態が続く場合は、対象と親の制限をもう一度確認します。どちらにも制限がなければ、制限がない場合の確認へ進みます。

STEP
PC側も見る

元の内容が残っているか、同じ案内や記事一覧が二重に表示されていないかを確認します。意図しない二重表示になった場合は、記録した元の設定を確認し、自分が変更した設定だけを戻して保存します。

目的の内容が両方に表示され、重複や操作の問題がなければ、そこで確認は完了です。原因が分かった後に、ほかのブロックの制限まで一括で解除する必要はありません。

見るのは、対象ブロックを中に含む親ブロックです。リスト上で隣にあるだけの別ブロックを順番に変更しないようにしましょう。リストビューでの選択方法は、WordPress公式のリストビュー解説でも確認できます。

SWELLユーザーフォーラムにも、新着記事と人気記事を囲むフルワイドがPCのみになっていた事例があります。制限を解除する案内の後、質問者から解決の報告がありました。過去の利用者の事例ですが、子だけでなく親を確認する理由が分かります。

対象ブロックと親ブロックに制限がない場合

対象と、その外側の親を確認しても制限が見つからない場合は、デバイス制限以外へ確認範囲を広げます。次の順で、変更と表示の対応を切り分けてください。

  • 編集画面を開き直し、変更したブロックの設定が保存されているか確認する。確認中の公開URLが、編集した投稿・固定ページと同じかも照合する。
  • スマホでページを再読み込みする。キャッシュ(表示を速くするために保存されたデータ)の機能を使っている場合は、利用中のサービスやプラグインの案内に沿って確認する。使っている機能が分からなければ管理者へ尋ねる。
  • 追加CSSや独自の表示条件を設定している場合は、スマホ幅で非表示にする指定がないかを確認する。自分で設定していない場合は、制作担当者へ該当ページと消えている範囲を伝える。

CSS(ページの見た目を指定する記述)のdisplay: noneは、その要素だけでなく内側の内容も非表示にします。ただし、意味が分からない指定をまとめて削除しないでください。詳しい動作はMDNのdisplayの説明を参照し、どの要素を、どの画面幅で隠す目的なのかを確認します。

相談するときは「PCでは新着記事の見出しと一覧が見える/スマホでは両方が消える」「投稿リスト・グループ・フルワイドの制限は確認した」のように、症状と調べた範囲をセットで伝えると、次の確認場所を絞りやすくなります。

よくある質問

親ブロックが見つからないときは?

リストビューで対象を見つけ、左側の字下げと開閉矢印を確認します。対象が一番外側にあり、上位のブロックに含まれていなければ、親を探し続ける必要はありません。対象の制限にも問題がなければ「対象ブロックと親ブロックに制限がない場合」へ進みます。

PCとスマホ用のブロックを別々に作っている場合もクリアしますか?

一律にはクリアしません。意図的に出し分けている制限を外すと、同じ内容が二重に出ることがあります。スマホ用のブロックが別にないかを先に確認し、変更するブロックと残す内容を決めます。二重に出た場合は、自分が変えた設定だけを元へ戻して保存します。

モバイルプレビューで見えれば確認は完了ですか?

表示幅の確認はできますが、スマホ実機での確認とは別です。公開済みなら同じ公開URLをスマホで開き、表示とリンク・ボタンの操作を確かめます。実機を使えない場合は、その確認が残っていると区別してください。

まとめ

スマホだけブロックが表示されないときは、対象のデバイス制限を確認し、保存後も表示されなければリストビューで外側の親をたどります。PCとスマホの両方へ表示したいブロックでは、SPへ切り替えるのではなく、必要な制限をクリアします。

最後に、保存後のPC・スマホで表示と重複の有無を確認しましょう。どこを変えて直ったかが分かれば、次に同じ症状が起きたときも、必要な範囲から確認できます。

この記事を書いた人

横畑デザイン事務所代表。Webデザイナー・プログラミング講師として、WordPressを中心としたWebサイトの制作・運用と個別指導に携わっています。実際の制作や指導で培った知識と経験をもとに、Web制作やAI活用について、初心者が迷わず一歩を踏み出せる情報を分かりやすく発信しています。

目次