- 開発費1億円・期間8年間!あなたがやりたい事が全てできる超高機能!
- ステップ配信が送信数無制限!
- シナリオ別リッチメニューテンプレート+アイコン754種類進呈
- 友だち自動増加システム(独自ASP機能)搭載!もちろん無料
- 上記機能が全て無料!以下のボタンよりアカウント登録!他ツールからの乗り換えも可能
【SWELLワードプレステーマ】スマホとパソコンでの表示を別々にする(デバイス制限)設定方法 〜初心者向け〜
本記事ではWordPressテーマSWELLスマホとパソコンでの表示を別々にする(デバイス制限)設定方法をご紹介します。
手順通り進めていってみてくださいね。
リンク先 : https://swell-theme.com
当ブログはSWELLのブロックエディタで作成しています。
ブログ初心者さんがSWELLを購入したものの、何からカスタマイズしていったらいいのか分からないという方のために、とりあえず先に見栄えを良くして「ブログを書く」というモチベーションを保つためにSWELL設定の主要ポイントをお伝えしています!
Him
超初心者さんに向けて書いているので、分からない専門用語は一切省きます。安心して読み進めてみてくださいね。
記事の内容
結論は簡単!【デバイス制限】を使う
デバイス制限はどこにある?
ブロックを選択した状態で、画面右側に出てくる設定欄を見ていくと、デバイス制限の項目があります。
スマホのみ表示させたい場合のデバイス制限の使い方
STEP
スマホのみ表示させたいブロックを作ります。
STEP
そのブロックを選択した状態で、デバイス制限の項目を選択し、表示するデバイスサイズをSPサイズをクリックします。
STEP
SPサイズを選択したブロックは、パソコンの編集画面では薄い表示に変わります。
選択してSPサイズをクリックした箇所の色が薄くなっているのがわかりますか?
こうなっている状態であれば、このブロックがスマホでのみ表示されるようになります。
パソコンのみ表示させたい場合のデバイス制限の使い方
流れは上記のスマホのみ表示させたい場合と同じですが、デバイス制限の表示するデバイスサイズをPCサイズにクリックを入れます。
パソコンでの編集画面では変化はありませんが、スマホで確認するとそのブロックだけ表示されていないことがわかると思います。
編集画面はこんな感じ
画像下半分が薄くなっていますよね。
上下同じような内容ですが、上がPCサイズ、下がSPサイズでのみ表示されるように設定してあります。
画像のサイズ感だったり、文章の改行だったり、ボタンのサイズだったり、パソコンで見るといい感じなのにスマホでは残念な感じになるのは嫌だったので、スマホで見たときにも綺麗に見えるように別々に設定しました。
また、トップページで表示されるいくつかの投稿リストも、パソコンとスマホで表示方法を変えています。
【余談】iPadではどうなるのか?
iPadでの表示はどうなるのか試してみました!
横画面で見るとパソコンサイズでの表示になり、縦画面にするとスマホサイズの表示内容にくるっと早変わりします!
トップページの投稿リストがカード型からリスト型にくるっと変わる動きが面白いです♪
今はパソコンよりスマホやタブレットで見る人が多いので、スマホでの見栄えって大事だと思います!
以上、WordPressテーマSWELLスマホとパソコンでの表示を別々にする(デバイス制限)設定方法でした!
その他のSWELL設定関連記事
一度挫折した初心者ブロガーが【SWELL ワードプレステーマ】にたどり着いた経緯
こんな疑問やお悩みにお応えします! ブログ初心者におすすめのワードプレス有料テーマSWELLが気になる。初心者目線からの決め手が欲しい! Himです♪@himlog_com 初心者…
リンク先 : https://swell-theme.com
当ブログはSWELLのブロックエディタで作成しています。
@himlog_com