こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はスマホ「独自ページ」で左右の余白を設定する方法をご紹介します！

こんなお悩みありませんか？

・独自ページだけ幅いっぱいに内容が表示されてしまう・・
・独自ページに余白を設定したい

スマホ【独自ページ】で左右の余白を設定しよう！

早速みていきましょう。

設定方法

【1】CSSを追加する

旧管理画面：【ショップデザイン（スマホ）】> 【スマホデザインの設定】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（スマホ）】> 【スマホデザインの設定】

適用中のスマホテンプレートの「編集」をクリック【共通CSS管理】へ

共通CSSページ編集「CSS編集」エディターエリアに余白を設定するCSSを追記します。

・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう！
・余白の値はお好みで調整できます。

【2】独自ページをデザインする

旧管理画面：【ショップデザイン（スマホ）】> 【スマホデザインの設定】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（スマホ）】> 【スマホデザインの設定】

適用中のスマホテンプレートの「編集」をクリック【独自ページ】へ

独自ページ作成「HTML編集」エディターエリアに「ページ全体を囲むdiv」をご用意ください。
divの開始タグを最上行に、一番下の行にdivの閉じタグを下記のように追記します。

完了！

独自ページ余白

いかがでしたでしょうか。
独自ページは自由にデザインできるページです。余白もお好みで設定してみましょう。
それではまた！