SWELLってどんなの?SWELLを知る

WordPressテーマSWELLスマホとパソコンでの表示を別々にする(デバイス制限)設定方法【初心者向け】

こんな疑問やお悩みにお応えします!
  • スマホとパソコンでの画像の大きさが微妙に違うんだよな。。。投稿リストの表示も変えたいし。。。
  • スマホとパソコンで表示させる内容を変えたい!
Himです♪
@himlog_com

本記事ではWordPressテーマSWELLスマホとパソコンでの表示を別々にする(デバイス制限)設定方法をご紹介します。
手順通り進めていってみてくださいね。

  • ブロックエディタ完全対応
  • 他テーマからの移行も簡単
  • 初心者でも安心のフォーラムあり
当ブログはSWELLのブロックエディタで作成しています。

ブログ初心者さんがSWELLを購入したものの、何からカスタマイズしていったらいいのか分からないという方のために、とりあえず先に見栄えを良くして「ブログを書く」というモチベーションを保つためにSWELL設定の主要ポイントをお伝えしています!

Him

超初心者さんに向けて書いているので、分からない専門用語は一切省きます。安心して読み進めてみてくださいね。

記事の内容

結論は簡単!【デバイス制限】を使う

デバイス制限はどこにある?

ブロックを選択した状態で、画面右側に出てくる設定欄を見ていくと、デバイス制限の項目があります。

SPサイズはスマホのみで表示されます。
PCサイズはパソコンのみで表示されます。

スマホのみ表示させたい場合のデバイス制限の使い方

STEP
スマホのみ表示させたいブロックを作ります。
STEP
そのブロックを選択した状態で、デバイス制限の項目を選択し、表示するデバイスサイズをSPサイズをクリックします。
SPサイズが選択されている状態
STEP
SPサイズを選択したブロックは、パソコンの編集画面では薄い表示に変わります。

選択してSPサイズをクリックした箇所の色が薄くなっているのがわかりますか?

こうなっている状態であれば、このブロックがスマホでのみ表示されるようになります。

パソコンのみ表示させたい場合のデバイス制限の使い方

流れは上記のスマホのみ表示させたい場合と同じですが、デバイス制限の表示するデバイスサイズをPCサイズにクリックを入れます。

パソコンでの編集画面では変化はありませんが、スマホで確認するとそのブロックだけ表示されていないことがわかると思います。

編集画面はこんな感じ

画像下半分が薄くなっていますよね。

上下同じような内容ですが、上がPCサイズ下がSPサイズでのみ表示されるように設定してあります。

画像のサイズ感だったり、文章の改行だったり、ボタンのサイズだったり、パソコンで見るといい感じなのにスマホでは残念な感じになるのは嫌だったので、スマホで見たときにも綺麗に見えるように別々に設定しました。

また、トップページで表示されるいくつかの投稿リストも、パソコンとスマホで表示方法を変えています。

【余談】iPadではどうなるのか?

iPadでの表示はどうなるのか試してみました!

横画面で見るとパソコンサイズでの表示になり、縦画面にするとスマホサイズの表示内容にくるっと早変わりします!

トップページの投稿リストがカード型からリスト型にくるっと変わる動きが面白いです♪

Him

今はパソコンよりスマホやタブレットで見る人が多いので、スマホでの見栄えって大事だと思います!

以上、WordPressテーマSWELLスマホとパソコンでの表示を別々にする(デバイス制限)設定方法でした!

  • ブロックエディタ完全対応
  • 他テーマからの移行も簡単
  • 初心者でも安心のフォーラムあり
当ブログはSWELLのブロックエディタで作成しています。

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

よかったらシェアしてね!
記事の内容
閉じる