.png)
Wix Studioで要素が自由に配置できない…左・中央・右しか選べない時にボックス（DIV）で狙った位置に置く方法
- 1 日前
- 読了時間: 9分
Wix Studioでテキストや画像を置こうとして、「あれ、好きな場所にドラッグできない」「左・中央・右の3つしか選べない」と手が止まった経験はありませんか。
以前のWix（クラシックエディター）なら、パーツを掴んで画面のどこにでも自由に落とせました。
ところがWix Studioでは同じ感覚で操作しても要素が思った場所に動いてくれません。
これは不具合ではなく、Wix Studioの設計思想そのものです。
この記事では、なぜWix Studioで要素が自由に配置できないのか、そして狙った位置に置くための正しい手順を、実際の操作の流れに沿って解説します。
Wix Studioで要素が「左・中央・右」しか動かせない理由
Wix Studioを触り始めた方がまず戸惑うのが、要素の配置の自由度です。
従来のWixは、上部のメニューからタイトルや画像などのパーツをドラッグして、画面の好きな座標にそのまま置ける「ドラッグ&ドロップ型」でした。
感覚的で分かりやすい反面、レイアウトが崩れやすいという側面もあります。
一方のWix Studioは、コーディングの考え方に寄せて設計されています。
要素は必ず何らかの「箱」の中に収まる前提になっており、その箱の中で「左・中央・右」のどこに寄せるかを選ぶ形になります。
つまりWix Studioで要素が左・中央・右しか動かせないのは、要素が今いる箱の中での位置を指定しているからです。
箱の外の自由な座標に直接ドラッグして置く、という操作は基本的に想定されていません。
ここを理解しないまま「Wixでできたのに、Studioではできない」と感じてしまうと、ずっと配置と格闘することになります。
Wixが得意だからWix Studioも同じように使えるとは限らず、両者は編集の考え方そのものが違う別ツールだと捉えるのが出発点です。
Wix Studioは「箱の中に何を入れるか」という入れ子の発想で組み立てていくエディターなのです。
結論：狙った位置に置くにはまずボックス（DIV）を入れる
結論から言うと、Wix Studioで狙った位置に要素を置くには、まずボックス（DIV）を入れて、その中に要素を入れ子にするのが正解です。
いきなりテキストや画像を目的の場所へ置こうとするのではなく、「まず入れ物を用意する」という順番に切り替えるだけで、配置の悩みは一気に解消に向かいます。
ボックス（DIV）とは、要素を入れるための箱です。
コーディングでいうコンテナやDIVにあたるもので、Wix Studioではこの箱を自分で配置し、その中に要素を入れて、箱ごと位置や幅を調整していきます。
要素そのものを直接動かすのではなく、要素が入っている箱を動かす、という考え方に切り替えるのがポイントです。
具体的な流れはシンプルです。
まずボックス（DIV／コンテナ）をページに追加する。
そのボックスの中に、テキストや画像などの要素を入れる。
ボックスや要素の幅をパーセント（%）またはピクセル（px）で指定する。
ボックスの位置をマージン値で調整して、狙った場所に動かす。
この4ステップが、Wix Studioで要素を思い通りに配置するための基本の型です。
最初は遠回りに感じるかもしれませんが、一度この順番が身につくと、複雑なレイアウトも整然と組めるようになります。
次の章から、それぞれの手順を詳しく見ていきます。
自社サイトをWix Studioで作りたいけれど、この配置の考え方が難しそう…と感じた方は、無理に一人で抱え込まず専門家に相談するのも一つの手です。
ボックスの中に要素を入れる入れ子の手順
ボックス（DIV）を用意したら、次はその中に要素を入れていきます。
ここがWix Studioの配置でつまずきやすいポイントなので、順を追って確認しましょう。
ページに配置したボックス（DIV）を選択して、位置とサイズをざっくり決めておく。
上部メニューからテキストや画像などのパーツを追加し、先ほどのボックスの中にドラッグして入れる。
要素がボックスの内側に入ると、その要素はボックスを基準に「左・中央・右」で配置されるようになる。
要素が正しくボックスの子要素になっているか、レイヤー構造で確認する。
大切なのは、要素をボックスの「上」に重ねるのではなく、ボックスの「中」に入れることです。
ドラッグしたときにボックスが反応して枠内に収まれば、入れ子が成立しています。
もし要素がボックスの外にはみ出したまま独立して置かれていると、後から位置を調整しても連動せず、配置がバラバラになってしまいます。
Wix Studioではこの入れ子構造が配置の土台になります。
「大きな箱の中に小さな箱を入れ、その中に要素を入れる」という具合に、階層を意識して組み立てていくと、後からの修正も楽になります。
逆に言えば、要素が自由に配置できないと感じたときは、たいてい「まだ箱に入れていない」か「入れる箱が用意できていない」のどちらかです。
まず箱、次に中身、という順番を徹底するのがコツです。
ボックスの幅と位置を整えて思い通りに配置する
要素をボックスの中に入れたら、最後にボックスの幅と位置を整えていきます。
ここで使うのが「幅（横幅）」と「マージン」の2つの設定です。
この2つを理解すると、Wix Studioで要素を狙った位置にピタリと配置できるようになります。
まず横幅の指定方法には、パーセント（%）とピクセル（px）の2種類があります。
指定方法 | 特徴 | 向いている場面 |
パーセント（%） | 親となる箱や画面幅に対する割合で決まる。画面サイズに応じて伸縮する。 | レスポンシブに横幅を変えたいとき |
ピクセル（px） | 固定の絶対値で幅が決まる。画面サイズが変わっても幅は一定。 | 幅をきっちり固定したいとき |
パーセント指定は便利な反面、その値をいくつにすると箱がどう変化するかを逆算して考える必要があります。
ここがコーディング的な発想を求められる部分です。
まずはpxで固定して感覚を掴み、慣れてきたら%を使い分けると扱いやすくなります。
位置の調整には「マージン」を使います。
マージンは要素の外側の余白を数値（px）で指定する仕組みで、この値を書き換えることで箱の位置を動かせます。
たとえば左からのマージンが319pxになっている箱を、100や200に書き換えると、その場で左右の位置が移動します。
つまり「箱を掴んでドラッグ」ではなく「数値を書き換えて動かす」のがWix Studio流の位置調整です。
慣れないうちは数値をいじるのが面倒に感じるかもしれませんが、数値で管理できるからこそ、複数のページや要素で位置を揃えやすいという利点があります。
感覚ではなく数値でレイアウトを整える。
これがWix Studioで思い通りの配置を実現する鍵です。
「自由配置できない」を逆に活かす考え方
ここまで読むと、「Wix Studioはひと手間多くて面倒」と感じるかもしれません。
確かに、パーツを好きな場所にポンと置ける従来のWixに比べれば、箱を用意して入れ子にして数値で調整する、という工程は手間がかかります。
しかし、この制約は裏を返せば大きな強みでもあります。
自由に配置できるということは、裏を返せばレイアウトが崩れやすいということです。
要素があちこちにバラバラに置かれていると、スマホ表示への対応や後からの修正が難しくなりがちです。
一方、Wix Studioのように「すべての要素が箱の中にある」構造なら、箱ごとに幅やマージンを管理できるため、レイアウトが整い、レスポンシブ対応もしやすくなります。
要素が自由に配置できないのではなく、崩れない仕組みの上に配置している、と捉え直すと見え方が変わります。
この考え方はコーディングのボックスモデルに近く、専門性は上がりますが、その分だけ表現の幅と保守性が手に入ります。
デザインの自由度を保ちながら、構造として破綻しないサイトを作れるのがWix Studioの魅力です。
とはいえ、この入れ子構造や数値での配置設計は、慣れるまでに時間がかかるのも事実です。
作りたいサイトの完成度にこだわりたい、けれど配置の設計に時間を取られたくないという場合は、Wix Studioの制作実績が豊富な制作会社に任せるのが近道です。
株式会社ラジャはWixレジェンドレベルパートナーとして、Wix Studioの構造を活かした崩れないサイト設計を数多く手掛けています。
よくある質問（FAQ）
Q1. Wix Studioで要素をドラッグしても左・中央・右にしか動きません。
故障ですか？
A. 故障ではありません。
Wix Studioは要素を箱（ボックス／DIV）の中に配置する設計のため、箱の中での「左・中央・右」を選ぶ仕様です。
任意の位置に置きたいときは、まずボックスを追加し、その中に要素を入れ、マージン値で位置を調整します。
Q2. ボックス（DIV）とは何ですか？
A. 要素を入れるための「箱」です。
コーディングでいうコンテナやDIVにあたります。
Wix Studioでは、この箱をページに配置し、中にテキストや画像を入れ、箱ごと幅や位置を調整していく入れ子構造でレイアウトを組みます。
Q3. 横幅の指定はパーセント（%）とピクセル（px）のどちらを使えばいいですか？
A. 幅を画面サイズに応じて伸縮させたいなら%、幅をきっちり固定したいならpxが向いています。
%は値による変化を逆算する必要があるため、慣れないうちはpxで固定して感覚を掴むのがおすすめです。
Q4. 要素の位置は数値で動かすのですか？
A. はい。
位置はマージン値（px）で調整します。
たとえば左からのマージンが319pxになっている箱の値を100や200に書き換えると、その場で左右の位置が移動します。
ドラッグではなく数値で動かすのがWix Studioの基本です。
Q5. 従来のWixとWix Studioは同じように使えますか？
A. 使えません。
従来のWixはドラッグ&ドロップで自由に配置する感覚的なエディターで、Wix Studioはコーディングに近い入れ子構造で組み立てるエディターです。
編集の考え方そのものが異なるため、別ツールとして捉えるのが安全です。
Q6. Wix Studioで自由配置できないのはデメリットではないのですか？
A. 一見デメリットに見えますが、すべての要素が箱の中に収まる構造のため、レイアウトが崩れにくくレスポンシブ対応もしやすいという利点があります。
整った構造の上で配置していると捉えると、むしろ保守性の高い作り方だと言えます。
Q7. 配置の設計が難しく感じます。
制作を依頼できますか？
A. 可能です。
株式会社ラジャはWixレジェンドレベルパートナーとして、Wix Studioの構造を活かしたサイト制作を数多く手掛けています。
配置設計を含めてお任せいただけますので、無料相談からお気軽にご相談ください。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
