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

今回はいろいろなサイトでよく見かけるセンタリング配置をmakeshopで実現するための方法を難易度別にご紹介します！

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

・なんか知らないけどショップが左に寄ってるから真ん中にしたい
・何故か中央揃えの設定に変えたら中央揃えじゃなくなった
・入れた覚えのない<center>タグが邪魔

[難易度 ★☆☆ ]
テンプレートご利用のショップ様向け！
管理画面の設定を変えるだけでかんたんにセンタリング！

タイトルのとおり管理画面で設定するだけでかんたんにセンタリングさせる方法です。

設定方法

【ショップ作成】>【デザインの設定】>【基本デザイン設定】

ショップレイアウト選択から「中央揃え」を選択
→できあがり

参考：オンラインマニュアル「ショップレイアウト設定」

かんたんですね！

[難易度 ★★☆ ]
ショップデザインご利用ショップ様向け！
マークアップを意識したセンタリング方法！（SEO効果あり？）

設定方法

（１）ショップレイアウト選択で「左揃え」を選択する！

【ショップ作成】>【デザインの設定】>【基本デザイン設定】

ショップレイアウト選択から「左揃え」を選択

makeshopはショップレイアウト選択を「中央揃え」にすると、ソース内に<center>が出力され、センタリングされる仕様になっています。（テンプレートご利用ショップ様向け）
プレミアムショッププランでショップのCSS編集ができる場合は、モダンブラウザ（ChromeやFirefoxなど）の対応やSEO対策のことも考えて、Web標準に準拠したマークアップでセンタリングするのがオススメです！
（２）ページ全体を<div>で囲む！

【ショップデザイン（PC）】>【トップページ編集】> 上段メニュー管理

一番上（または任意の位置）に<div id=”wrapper”>を入れる

・id="xxx"およびclass="yyy"の「xxx」「yyy」部分は自由に変更できますが、
変更する場合は、共通CSS管理の#xxxおよび.yyyも合わせて変更する必要があり
ますのでご注意ください！
（３）CSSを指定する！

【ショップデザイン（PC）】> 【トップページ編集】> 共通CSS管理

下記のスタイル指定を追記してください。

幅のサイズ(width) ＋ 左右のmarginをautoで指定することによって、先程<div id=”wrapper”>で囲った部分がセンタリングされます。
ちなみに幅のサイズは任意です！好きなサイズを指定しましょう
（４）センタリング完了！

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ぜひお試しください！それではまた！