SWELLでPCのみ表示・スマホのみ表示する方法。非表示にしたい・片方だけ表示したい場合の解決方法を全部紹介【WordPress・ワードプレス・ブログ】

SWELLでPCのみ表示したい、スマホのみ表示したい…
デバイスコントロール・デバイス制限の項目がないからできない…

そんなことを思ったことはないでしょうか?

今回は「SWELLでPCのみ表示・スマホのみ表示の全方法」を紹介します。

ブロックによっては設定項目があるものないものがありますが最後まで見ていただければ確実に表示・非表示設定ができます。

特にデバイスコントロール・デバイス制限で設定するという方法もありますが、その項目が表示されなくて困っている人は是非最後まで見て欲しいです。

SWELLでPCのみ表示・スマホのみ表示する方法を知りたい・できなくて困っている人にこの記事がお役に立てば嬉しいです。

目次

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定することができます。

「デバイスコントロール」という項目はブロックの設定にあります。

ここでは例としてボタンブロックを使って説明します。

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

ボタンブロックを選択(左クリック)をするとブロック上に設定が表示されます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

丈夫に色々な設定が表示されました。

その中の下記マークにカーソルを合わせます。(スマホとパソコンのマーク)

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

これがデバイスコントロールです。

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

デバイスコントロールを左クリックをすると「スマホサイズでのみ表示する」と「PCサイズでのみ表示する」という項目が表示されます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイスコントロール」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

これでどちらかを設定することができます。

試しにどちらも設定してみます。

SWELLで「スマホサイズでのみ表示する」の設定をする

SWELLで「スマホサイズでのみ表示する」の設定をする

「スマホサイズでのみ表示する」を選択します。

SWELLで「スマホサイズでのみ表示する」の設定をする

設定をするとブロックの表示が薄くなります。

PCで見ているため「スマホサイズでのみ表示する」設定をしたため見えなくなっています。

設定画面なので薄く表示されていますが、このまま公開をすればPCでは非表示になりスマホのみ表示となります。

SWELLで「PCサイズでのみ表示する」の設定をする

SWELLで「PCサイズでのみ表示する」の設定をする

「PCサイズでのみ表示する」を選択します。

SWELLで「PCサイズでのみ表示する」の設定をする

PCで見ているため「PCサイズでのみ表示する」設定をしても変化ありません。PCなので表示をしてくれています。

このまま公開をすればスマホでは非表示になりPCのみ表示となります。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定することができます。

「デバイス制限」という項目はブロックのサイドバーの設定にあります。

ここでも例としてボタンブロックを使って説明します。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

ボタンブロックを選択(左クリック)をすると右サイドバーにに設定が表示されます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】
SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

もしこのサイドバーが出てこない場合は右上のサイドバー表示・非表示のマーク、右サイドバーの「ブロック」を選択して下さい。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

「デバイス設定」でPCのみ表示・スマホのみ表示するの設定をする

ブロック設定を下にスクロールしていきます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

「デバイス設定」という項目があるので選択します。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

選択をすると項目が開きます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】
SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

ここの設定で「PCのみ表示・スマホのみ表示する」の設定をする

試しにどちらも設定してみます。

SWELLで「スマホサイズでのみ表示する」の設定をする

「スマホサイズでのみ表示する」を選択します。

SWELLで「スマホサイズでのみ表示する」の設定をする

設定をするとブロックの表示が薄くなります。

PCで見ているため「スマホサイズでのみ表示する」設定をしたため見えなくなっています。

設定画面なので薄く表示されていますが、このまま公開をすればPCでは非表示になりスマホのみ表示となります。

SWELLで「PCサイズでのみ表示する」の設定をする

「PCサイズでのみ表示する」を選択します。

SWELLで「PCサイズでのみ表示する」の設定をする

PCで見ているため「PCサイズでのみ表示する」設定をしても変化ありません。PCなので表示をしてくれています。

このまま公開をすればスマホでは非表示になりPCのみ表示となります。

設定を解除する場合は横の「クリア」を押します

「どちらの設定も解除したい」という場合は横の「クリア」を押すことで全設定を解除することが出来ます。

SWELLでPCのみ表示・スマホのみ表示するために「デバイス制限」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】 設定を解除する場合は横の「クリア」を押します

ここまでの方法でも設定が出来ない場合は次の設定方法を試してください。

SWELLでPCのみ表示・スマホのみ表示するために「高度な設定の追加CSSクラス」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

「デバイスコントロールもデバイス制限もないんだけど?」という方もいるかと思います。僕がそうでした。

ブロックによってはデバイスコントロール・デバイス制限の項目が一切表示されないものもあります。特にプラグイン系はあるものとないものが分かれます。

ここでは人気記事プラグインとして有名な「WordPress Popular Posts」を例に解決方法を紹介します。

WordPress Popular Postsを記事内に表示させます。

SWELLでPCのみ表示・スマホのみ表示するために「高度な設定の追加CSSクラス」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

表示をさせましたがデバイスコントロールのマークもないですし、右サイドバーにデバイス制限の項目もありません。

それでもこれから紹介する方法でPCのみ表示・スマホのみ表示の設定が可能です。

「高度な設定」でPCのみ表示・スマホのみ表示するの設定をする

設定の方法は右サイドバーのブロック設定に表示されている「高度な設定」で設定します。一番下にある項目です。

SWELLでPCのみ表示・スマホのみ表示するために「高度な設定の追加CSSクラス」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】
SWELLでPCのみ表示・スマホのみ表示するために「高度な設定の追加CSSクラス」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

「高度な設定」を選択(左クリック)をします。

SWELLでPCのみ表示・スマホのみ表示するために「高度な設定の追加CSSクラス」で表示・非表示を設定する【WordPress・ワードプレス・ブログ】

高度な設定の項目が表示されます。

難しそうな言葉が並びますが安心してください。

一番下にある「追加CSSクラス」を設定することで設定をすることが出来ます。

試しにどちらも設定してみます。

SWELLで「スマホサイズでのみ表示する」の設定をする

スマホサイズでのみ表示したい時は追加CSSクラスに下記ワードをコピペなどで入力してください。

sp_only

追加CSSクラスに「sp_only」を入力します。

SWELLで「スマホサイズでのみ表示する」の設定をする
SWELLで「スマホサイズでのみ表示する」の設定をする

設定をするとブロックの表示が薄くなります。

PCで見ているため「スマホサイズでのみ表示する」設定をしたため見えなくなっています。

設定画面なので薄く表示されていますが、このまま公開をすればPCでは非表示になりスマホのみ表示となります。

SWELLで「PCサイズでのみ表示する」の設定をする

PCサイズでのみ表示したい時は追加CSSクラスに下記ワードをコピペしてください。

pc_only

追加CSSクラスに「pc_only」をを入力します。

SWELLで「PCサイズでのみ表示する」の設定をする
SWELLで「PCサイズでのみ表示する」の設定をする

PCで見ているため「PCサイズでのみ表示する」設定をしても変化ありません。PCなので表示をしてくれています。

このまま公開をすればスマホでは非表示になりPCのみ表示となります。

SWELLでデバイスコントロールもデバイス制限があっても「高度な設定」の設定でPCのみ表示・スマホのみ表示が可能【WordPress・ワードプレス・ブログ】

SWELLでデバイスコントロールやデバイス制限があれば設定も楽ですが、あっても「高度な設定」の設定でPCのみ表示・スマホのみ表示が可能です。

設定方法を統一したい場合は「高度な設定」のみを設定するという方法もよいかもしれません。

【PCのみ表示】   pc_only
【スマホのみ表示】 sp_only

SWELLでPCのみ表示・スマホのみ表示する方法。非表示にしたい・片方だけ表示したい場合の解決方法を全部紹介【WordPress・ワードプレス・ブログ】

SWELLでPCのみ表示・スマホのみ表示する方法。非表示にしたい・片方だけ表示したい場合の解決方法を全部紹介【WordPress・ワードプレス・ブログ】

SWELLでPCのみ表示・スマホのみ表示する方法」を紹介しました。

デバイスコントロール、デバイス制限、高度な設定でPCのみ表示・スマホのみ表示の設定が可能です。

SWELLでPCのみ表示・スマホのみ表示する方法を知りたい・できなくて困っている人にこの記事がお役に立てば嬉しいです。

X(Twitter)でフォローを外した・解除した人を確認してフォローを外す。フォロワーからいなくなったリムーブした人を探して一気に削除するのがオススメ!

「X(Twitter)でフォロー外された・解除の人を確認する」のはSocial Dogで確認をすることができます。

フォローされていないアカウントを探してフォロー解除もできます。

https://www.amazon.co.jp/gp/video/storefront?benefitId=default&tag=norinori0107-22

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ギタリストとして活動する中、1人でほぼ初海外で世界一周の旅に出る。帰国後演奏しながら株式会社を立ち上げ経営。役に立てることが嬉しいと思う性格。ブログのアクセスは月34万PV達成!累計1200万PV達成。 ミルクティーとフルグラと犬が好きです。

今日のオススメ記事

こちらもオススメ

運営サイト・ブログ

コメント

コメントする

目次