【SWELL】PC(パソコン)とスマホで表示を切り替える方法(デバイス設定)

広告:ページ内にてアフィリエイト広告を利用しています。

PCとスマホで表示を切り替える

SWELLでは記事編集画面でブロック(またはグループ)に対して「PC(のみで)表示」「スマホのみで表示」を指定することができます。

これを利用することで、レスポンシブ(PCならPCならではの、スマホならスマホならではの)デザインを実現できます。

ポイント

本記事では、

PCとスマホで表示をわける方法を解説します。

使い分けして見やすいページを作りましょう!

目次
PR

PCとスマホで表示を分ける例

Point.
PCとスマホで
表示を分ける例

PCとスマホで表示を分ける場合、画面の大きさに合わせて表示を切り替えることができます。

たとえば、PCでは長い文字列を含めた大きめの画像を、スマホでは少ない文章での画像を表示すると、読者に対して親切な表現になりますね。

SWELLでは、以下のように分けて表示することが可能です。

PCとスマホで表示する画像を切り替えたサンプル

上図のように、PCでは、「PC用の画像」を、スマホでは「スマホ用の画像(左右にカメさんが書かれている画像)」を表示することができ、アクセスしている人のデバイスによって自動で表示する画像を変えることができます。

PCでスマホで表示を変えるサンプル

こちらの画像は、PCとスマホで別々の画像を表示しています。お持ちのデバイス(PCやスマホ)で表示してみてください。

PC用画像サンプル
スマホ用画像サンプル

PCとスマホで表示を分ける方法

Point.
PCとスマホで
表示を分ける方法

PCでのみ表示する方法

PC設定

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

PCで設定する

PCでのみ表示したい画像(テキスト文字やテーブルでも可能)を選択して、「デバイス制限」から「PC」を選択します。

スマホでのみ表示する方法

スマホ設定

SWELLでは簡単に「PCでのみ表示する設定」をすることができます。

スマホ設定

PCでのみ表示したい画像(テキスト文字やテーブルでも可能)を選択して、「デバイス制限」から「SP」を選択します。

まとめ

SWELLでは、「デバイス設定」からPC、SPを選ぶことで、PCのみ表示、スマホのみ表示を設定することができます。

ポイント
  • PCでのみ表示した場合は「デバイス設定」からPCを選択する
  • スマホでのみ表示した場合は「デバイス設定」からSPを選択する

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

素敵なサイトを作ってくださいね!

SWELL おしゃれサイト作り方

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

PR

PR

一番上に戻る(Back to the initial position on click.)

トップページ(Home.)

PR
Amazon でお買い物
楽天市場でお買い物
広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

この記事が気に入ったら
フォローしてね!

目次