wordpress スマホ pc 一部パート　表示切り替える方法　テーマはswell

---

WordPressテーマ「SWELL」でスマホとPCで一部のパートを表示切り替える方法について説明します。SWELLはレスポンシブデザインに対応しており、デバイス制限機能を利用して表示内容を切り替えることができます。

方法1: デバイス制限機能を使用

SWELLでは、ブロック単位でデバイス制限を設定できます。これにより、スマホとPCで異なる表示が可能です。

1. ブロックを選択: 表示を切り替えたい部分のブロックを選択します。
2. デバイス制限設定: 右側の設定欄で「デバイス制限」を見つけます。
3. スマホのみ表示: 「SPサイズ」を選択してスマホでのみ表示するように設定します。
4. PCのみ表示: 「PCサイズ」を選択してPCでのみ表示するように設定します。

方法2: CSSクラスを使用

CSSクラスを追加して、PCとスマホで異なる表示を実現する方法もあります。

1. CSSクラスの追加: WordPressのカスタマイズ画面で追加CSSに以下のコードを追加します。

.pc_only { display: inline; }
.sp_only { display: none; }
@media screen and (max-width: 768px) {
  .pc_only { display: none; }
  .sp_only { display: inline; }
}

2. ブロック設定: 表示を切り替えたいブロックに「pc_only」または「sp_only」のクラスを追加します[^6]。

これらの方法を利用することで、SWELLテーマでスマホとPCで異なる表示を実現できます。