.png)
Wix Studioで更新したら文字が突き抜ける・要素がくっつく原因とは？パディング不足を直して崩れないレイアウトにする方法
- 7月13日
- 読了時間: 8分
Wix Studioで作ったサイトのテキストを少し書き換えただけなのに、文字が枠からはみ出したり、下の要素とくっついてレイアウトが崩れてしまった、という経験はありませんか？公開後にお客様側で原稿を差し替えたら、見出しと本文が重なってしまった、というご相談も少なくありません。
実はこの「文字の突き抜け」、多くの場合は原因がはっきりしていて、直し方もシンプルです。
この記事では、Wix Studioで文字が突き抜ける・要素がくっつく原因と、パディング不足を直して二度と崩れにくいレイアウトにする方法を、お客様目線で順番に解説します。
更新するたびに文字が突き抜け・要素がくっつくのはパディング不足が原因
更新すると文字が突き抜けたり要素同士がくっついたりする最大の原因は、要素やコンテナの内側に余白（パディング）が設定されていないことです。
パディングが無い状態では、テキストがコンテナのふちギリギリまで広がります。
短い文章のうちは問題なく見えますが、更新で文章が長くなった瞬間に、文字が枠の外へあふれたり、下の要素とぶつかったりします。
文字が突き抜ける・要素がくっつくトラブルは、突き詰めると次の2つのパターンに集約されます。
原因①：要素やコンテナにパディング（内側の余白）がそもそも設定されていない 原因②：見た目には余白があるように見えるだけで、実際にはパディングで確保されていない
どちらも「余白を数値で確保していない」という点が共通しています。
逆に言えば、内側にきちんとパディングを持たせておけば、あとから文章が増えても要素同士がくっつかず、レイアウトが保たれます。
なお、パディングやマージンという考え方は従来のWixエディタには存在せず、Wix Studioで新しく登場する概念です。
エディタの感覚のまま作ると、この余白設計が抜けてしまいがちなので注意が必要です。
見た目は余白があるのに実はパディングが無いケースを見抜く
見た目は余白があるのに更新で崩れる場合、その空きは「たまたまテキストが短いから空いて見えているだけ」で、パディングとして確保されていないことがほとんどです。
見分け方は簡単です。
次の手順で、余白が「本物」かどうかを確認します。
崩れているコンテナ（または要素）をクリックして選択する
設定パネルの「余白」項目を開く
上下・左右の数値が「0」になっていないかを確認する
数値が0のまま空いて見えているなら、その余白は文章の長さに依存しているだけで、更新のたびに崩れるリスクを抱えています。
ここに数値が入っていれば、その分は必ず確保されるので、文章が伸びても余白が消えません。
「空いているかどうか」ではなく「数値が入っているかどうか」で判断するのが、崩れを見抜くコツです。
コンテナにパディングを入れて高さを調整すれば文字の突き抜けは直る
文字の突き抜けの直し方はシンプルで、崩れているコンテナを選択して内側にパディングを入れ、高さを整えるだけで解決します。
文字の突き抜け・要素のくっつきは、コンテナにパディング（内側の余白）を数値で入れ、コンテンツに合わせて高さを調整すれば直る。
具体的な操作は次のとおりです。
崩れているコンテナをクリックして選択する
設定パネルの「余白」項目（パディング）を開く
上下・左右、または崩れている方向に数値を入力する（例：上下20ピクセル）
必要に応じてコンテナの高さを縮め、コンテンツにぴったり合わせる
これで内側にゆとりが生まれ、文章が多少長くなっても文字が枠を突き抜けなくなります。
見出しと本文の間など、要素と要素の間隔が詰まってしまう場合は、対象の要素を選び、外側の余白（マージン）に数値を入れて間隔を確保します。
実際の制作では、見出しの下マージンを41ピクセル、本文の下マージンを57ピクセルといった形で、要素ごとに数値を決めて整えていきます。
「自分のサイトのどこが崩れの原因になっているか分からない」という場合は、無理に触って崩す前に、一度プロに見てもらうのが安全です。
長い文章に更新されても崩れないよう最初から余白を「設計」しておく
文字の突き抜けを根本から防ぐには、崩れてから直すよりも「最初から崩れない余白を設計しておく」ことが大切です。
更新や運用まで見据えて余白を用意しておけば、文章量が変わっても崩れにくくなります。
Wix Studioで余白を設計するときに使う道具は、大きく3つあります。
パディング｜要素の内側の余白。コンテナのふちとコンテンツの間にゆとりを持たせる
マージン｜要素の外側の余白。見出しと本文など、要素と要素の間隔を決める
ギャップ（アイテムの間隔）｜スタック内の要素の間隔を一括で揃える仕組み
3つの違いを整理すると、次のようになります。
種類 | どこの余白か | 主な使いどころ |
パディング | 要素の内側 | コンテナ内の文字が枠にくっつかないようゆとりを持たせる |
マージン | 要素の外側 | 見出しと本文など、要素どうしの間隔を個別に決める |
ギャップ | スタック内の要素間 | 並んだ要素の間隔をまとめて均等にする |
とくにギャップは便利で、スタックを選択して「アイテムの間隔」に数値（例：100ピクセル）を入れるだけで、中に並んだ要素の間隔が一括で均等になります。
10個並んでいても1回の設定で揃うので、1つずつマージンを入れる手間がかかりません。
余白の単位は、固定値のピクセル（px）だけでなく、親要素を基準にするパーセント（%）や、画面の高さを基準にするビューポートハイト（vh）なども使えます。
レスポンシブ対応で画面幅ごとに余白を変えたいときは、これらを使い分けると、スマホでもPCでもバランスの取れた見た目になります。
手で間隔を揃えると崩れる理由と、数値管理でレイアウトを守る考え方
余白を手作業のドラッグで揃える方法は、一見きれいに見えても数値がバラバラになりやすく、更新のたびに崩れる原因になります。
従来のエディタでは、要素の右下をつかんでShiftを押しながらサイズを調整する、といった感覚的な揃え方をしがちでした。
ですが、細かく見ると1つずつの間隔が微妙にずれていて、完全には均等になっていないことがほとんどです。
この「なんとなく揃えた」状態が、文章を差し替えたときに一気に崩れてしまう正体です。
一方で、パディング・マージン・ギャップを数値で管理しておくと、すべての要素が同じ基準できっちり揃います。
余白の統一や中央寄せができていないサイトは、どうしても「素人っぽさ」が出てしまいますが、数値で余白を管理するだけで、見た目のクオリティが一段上がります。
しかも一括設定が効くので、作業効率も同時に良くなります。
崩れるたびに手で直すのは、時間もかかり、精神的にも消耗するものです。
「更新しても崩れない状態」を最初に作っておけば、その後の運用がぐっと楽になります。
自社サイトの余白設計に不安がある、あるいは崩れを根本から直したいとお考えではないでしょうか？そのようなときは、一度プロの視点で診断を受けてみてください。
よくある質問（Wix Studioの文字突き抜け・余白設定）
Q1. パディングとマージンの違いは何ですか？
A. パディングは要素の内側の余白で、コンテナの枠と中のコンテンツの間のゆとりです。
マージンは要素の外側の余白で、要素と要素、コンテナとコンテナの間隔を指します。
文字の突き抜けは主にパディング、要素どうしのくっつきは主にマージンで調整します。
Q2. 文字が突き抜けたとき、まずどこを見ればいいですか？
A. 崩れているコンテナを選択し、設定パネルの「余白」を開いて数値が0になっていないか確認します。
0なら、まず上下に20ピクセルほどパディングを入れて高さを整えると、多くのケースで突き抜けが直ります。
Q3. スタック内の要素の間隔をまとめて揃えるにはどうすればいいですか？
A. スタックを選択し、レイアウト設定の「アイテムの間隔」に数値（例：100ピクセル）を入力します。
これでスタック内の全要素の間隔が一括で均等になります。
1つずつマージンを設定する必要はなく、この仕組みは「ギャップ」と呼ばれます。
Q4. Wixの通常エディタでも同じ余白設定はできますか？
A. パディング・マージンという概念は従来のWixエディタには存在せず、Wix Studio特有のものです。
コーディングに近い考え方で余白を数値管理できるのがWix Studioの強みで、更新に強いレイアウトを組みやすくなっています。
Q5. レスポンシブ対応のとき、余白の単位はどう使い分けますか？
A. 固定したい箇所はピクセル（px）、親要素の幅に合わせたい箇所はパーセント（%）、画面の高さに合わせたい箇所はビューポートハイト（vh）を使います。
画面幅ごとに余白を変えたいときは、pxだけに頼らず%やvhを組み合わせると崩れにくくなります。
Q6. パディングとマージン、どちらから覚えるべきですか？
A. まずはマージンです。
要素間の間隔を決める基本中の基本なので、ここを押さえると全体のバランスが整います。
そのうえでパディングを使いこなすと、内側のゆとりまでコントロールでき、更新に強いレイアウトに仕上がります。
Q7. 余白を設定したのに、まだ要素がくっついて見えます。なぜですか？
A. 見た目の空きが「テキストが短いから空いて見えているだけ」で、実際には数値が0のままというケースがあります。
空いているかどうかではなく、余白の数値が実際に入っているかで判断してください。
数値で確保されていれば、文章が伸びても余白は消えません。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
