PCとスマホで、レイアウト(見た目)を作り分ける

Magnetでページを制作するときに、PCとスマホでレイアウトを分ける方法についてご案内します。

 

作り分ける方法は二つ

Magnetでは、次の二つの方法をご用意しています。

• PCとスマホで、それぞれデザインの作成を行う
  (更新もPCとスマホでそれぞれ行う必要がある)
  　
• PCとスマホを連動させた上で、スマホだけ見た目を調整する
  (更新はPCだけ行えばOK)

　
制作するページによって、対応が異なります。

	それぞれデザインを作成する	連動させる
トップページ	◯	◯
商品ページ	×	◯
カスタムページ

 

「それぞれデザインを作成する」方法については、こちらのヘルプをご確認ください。この記事では、「連動させた上で、スマホだけレイアウトを調整する」方法についてご案内します。

 

スマホだけ見た目を調整する

次の項目で、PCとスマホの見た目を指定し分けることができます。

対象	項目	できること
ページ全体の「背景・フォント」	文字サイズ(スマホ)	スマホページでの文字サイズを指定できます。
各「パーツ」	スマホでは表示しない	対象のパーツを、スマホでは非表示にすることができます。
	横並び数(スマホ)	スマホページにおける、画像やテキストの横並び数を指定できます。

文字サイズ(スマホ)

こちらの設定は、次の箇所から行えます。デザイン編集画面で、上部にある「背景・フォント」メニューをクリックします。

表示された設定項目の、「文字サイズ(スマホ)」をご調整ください。(お勧めのフォントサイズは、12〜14です。)

 

スマホでは表示しない

こちらの設定は、各パーツの編集画面にて行えます。パーツ編集画面の「表示の設定」メニューをクリックします。

「スマホでは表示しない」項目の、「表示しない」にチェックを入れて、「保存する」ボタンを押します。

この設定を行ったパーツは、スマホページでは表示されません。
スマートフォンページでの文字数オーバーを、回避したい場合などにご活用いただけます。

 

横並び数(スマホ)

こちらの設定も同じく、各パーツの編集画面にて行えます。「横並び数」項目の「スマホ」をご調整ください。(お勧めの設定は、1〜2です。)