![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
Wixサイトってスマホ表示にするとテキストが不自然に改行されてしまうよね。どうにかならないの?
こういったお悩みを解決します。
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
こんにちはろにぃです。サイト制作を始めてから10年
・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談
などの経験を活かして、サイト制作やSEOについて情報発信をしております。
Wixサイトって自動でスマホ表示に対応はしているけど、テキストが不自然に改行されてしまうんですよね。
今回はそのテキストを改善する裏技を紹介します。
![【悪用厳禁】Wixサイトのテキストを綺麗に整える方法の図解](https://sposai-trivia.com/wp-content/uploads/2024/07/wix-mobile-layout-infographic-1024x576.jpg)
![【悪用厳禁】Wixサイトのテキストを綺麗に整える方法の図解](https://sposai-trivia.com/wp-content/uploads/2024/07/wix-mobile-layout-infographic-1024x576.jpg)
ちょっとした工夫でテキスト改行問題は解決できます。
ようやくWixサイトを作り上げて、スマホ表示の崩れ具合に愕然とした方はガッカリせず、ぜひ本記事を最後までご覧ください!
「SEO対策上、問題があるなら別のホームページサービスも検討してみようかな」という方はコチラをどうぞ↓
![](https://sposai-trivia.com/wp-content/uploads/2023/09/3b606d66-f426-4018-8985-c86cdfec235f-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/09/3b606d66-f426-4018-8985-c86cdfec235f-1-300x169.jpeg)
![](https://d3vqou0viapnu1.cloudfront.net/185/wix2.png)
![](https://d3vqou0viapnu1.cloudfront.net/185/wix2.png)
Wixサイトのスマホ表示は超重要
![Wixサイトのスマホ表示は超重要](https://sposai-trivia.com/wp-content/uploads/2024/06/ce71ef90-d962-4309-86fb-bf805b7032e2-1.jpeg)
![Wixサイトのスマホ表示は超重要](https://sposai-trivia.com/wp-content/uploads/2024/06/ce71ef90-d962-4309-86fb-bf805b7032e2-1.jpeg)
Wixで時間をかけて作ってはみたサイト、スマホで表示したらレイアウトが崩れている…。
![Wixサイトのスマホ表示は超重要2](https://sposai-trivia.com/wp-content/uploads/2024/06/1-edited.jpg)
![Wixサイトのスマホ表示は超重要2](https://sposai-trivia.com/wp-content/uploads/2024/06/1-edited.jpg)
![Wixサイトのスマホ表示は超重要3](https://sposai-trivia.com/wp-content/uploads/2021/03/2.jpg)
![Wixサイトのスマホ表示は超重要3](https://sposai-trivia.com/wp-content/uploads/2021/03/2.jpg)
こんな経験ありませんか?
ぼくは初めてWixサイトを作った時、ここで絶望感を味わいました。
これを見て、
![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
PCで作ってるんだから、PCできれいに見えていればいいじゃん!
と考える方もいるかと思いますが、そうはいかない。
なぜならスマホ対応していることは、あなたのサイトを人に見てもらえるかどうかに大きな影響を与えるからです。
総務省のインターネット利用状況調査によると、インターネット利用者の71%以上の人はスマホでインターネットを利用しています。
![](https://sposai-trivia.com/wp-content/uploads/2024/06/f00281.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/f00281.png)
スマホであなたのサイトを見る人が、
このサイト見にくいなぁ・・・。
と感じれば、すぐに閉じてしまい二度とアクセスしてくれません。
また、googleの検索順位においてもスマホ表示は大きな影響を与えます。今やgoogleの評価で重要視されるモバイル版サイトの利便性。
スマホで適切に表示されなければ、検索順位で上位を目指すことが難しくなるのです。
Google は全世界でモバイル フレンドリー アップデートを開始します。
これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。
※googleウェブマスター向け公式ブログより引用
PCとスマホ表示、それぞれのデザインをするのはとても大変ですが、見られるサイトを作る為には必要不可欠です。
スマホ表示でWixサイトのレイアウトが崩れる原因
![スマホ表示でWixサイトのレイアウトが崩れる原因](https://sposai-trivia.com/wp-content/uploads/2024/06/1a3a9f56-b6f0-437a-a7e0-20b2fafa7a4f-1-1024x576.jpeg)
![スマホ表示でWixサイトのレイアウトが崩れる原因](https://sposai-trivia.com/wp-content/uploads/2024/06/1a3a9f56-b6f0-437a-a7e0-20b2fafa7a4f-1-1024x576.jpeg)
Wixサイトのレイアウトが崩れてしまう原因として、よくあるものが以下の2つです。
- テキストボックスを分けていない
- ストリップやボックスを使用していない
テキストボックスを分けていない
![テキストボックスを分けていない](https://sposai-trivia.com/wp-content/uploads/2024/06/428b3200-0beb-4bef-89fa-af9591e0afae-1-1024x576.jpeg)
![テキストボックスを分けていない](https://sposai-trivia.com/wp-content/uploads/2024/06/428b3200-0beb-4bef-89fa-af9591e0afae-1-1024x576.jpeg)
小まめにテキストボックスを分けないと、スマホ表示ではレイアウトが崩れる原因となります。
特に1つのテキストボックス内でサイズを変えると、スマホ表示では崩れ、サイズ調整もできないため、全てやり直すことになります。
ストリップやボックスを使用していない
![ストリップやボックスを使用していない](https://sposai-trivia.com/wp-content/uploads/2024/06/ronilog-image00056-1024x576.jpeg)
![ストリップやボックスを使用していない](https://sposai-trivia.com/wp-content/uploads/2024/06/ronilog-image00056-1024x576.jpeg)
ストリップやボックスを使用せずに、背景にテキストと画像を並べただけのサイトはスマホ表示では、どこになにがあるかわからない程崩れます。
![ストリップやボックスを使用していない2](https://sposai-trivia.com/wp-content/uploads/2024/06/3badf4f707b2afc647c6256aa5593995.jpg)
![ストリップやボックスを使用していない2](https://sposai-trivia.com/wp-content/uploads/2024/06/3badf4f707b2afc647c6256aa5593995.jpg)
Wixサイトでスマホ表示を簡単に整える方法
![Wixサイトでスマホ表示を簡単に整える方法](https://sposai-trivia.com/wp-content/uploads/2024/06/1f50c3be-ed9c-4efc-b7d3-2acf871a39c9-1-1024x576.jpeg)
![Wixサイトでスマホ表示を簡単に整える方法](https://sposai-trivia.com/wp-content/uploads/2024/06/1f50c3be-ed9c-4efc-b7d3-2acf871a39c9-1-1024x576.jpeg)
Wixには『モバイル最適化』、『レイアウト最適化』という機能があります。
![Wixサイトでスマホ表示を簡単に整える方法2](https://sposai-trivia.com/wp-content/uploads/2024/06/624bd14546ca2461aa1d9edf9bdc4348-e1615640707598.jpg)
![Wixサイトでスマホ表示を簡単に整える方法2](https://sposai-trivia.com/wp-content/uploads/2024/06/624bd14546ca2461aa1d9edf9bdc4348-e1615640707598.jpg)
![Wixサイトでスマホ表示を簡単に整える方法3](https://sposai-trivia.com/wp-content/uploads/2024/06/a5ad5c160586968903c0c769c56f0565-e1615640737704.jpg)
![Wixサイトでスマホ表示を簡単に整える方法3](https://sposai-trivia.com/wp-content/uploads/2024/06/a5ad5c160586968903c0c769c56f0565-e1615640737704.jpg)
テキストや画像のサイズ、レイアウトを1クリックで自動調整してくれるので非常に便利です。
しかしあくまで自動。
思い通りにならない部分もあるので、最適化後の微調整は自身で行う必要があるんです。
Wixサイトテキストの不自然な改行を解消する裏技
![テキストの不自然な改行を解消する裏技](https://sposai-trivia.com/wp-content/uploads/2024/06/9c9c1961-5573-4b39-a7c1-6e7d29cc6a1d-1-1024x576.jpeg)
![テキストの不自然な改行を解消する裏技](https://sposai-trivia.com/wp-content/uploads/2024/06/9c9c1961-5573-4b39-a7c1-6e7d29cc6a1d-1-1024x576.jpeg)
テキストが不自然な改行となってしまう
について解決する裏技を紹介します。
例えばこの文章、
![テキストの不自然な改行を解消する裏技2](https://sposai-trivia.com/wp-content/uploads/2024/06/0ae7a2179d832d223dea12b2d1ccca69-edited.jpg)
![テキストの不自然な改行を解消する裏技2](https://sposai-trivia.com/wp-content/uploads/2024/06/0ae7a2179d832d223dea12b2d1ccca69-edited.jpg)
『より豊かな』が『よ』で切れてしまっています。
モバイルエディターでは改行できないWixでよく発生する不自然改行。
これを、
![テキストの不自然な改行を解消する裏技3](https://sposai-trivia.com/wp-content/uploads/2024/06/3a3764a92abd4d09a1c96d4a8fa2d833-edited.jpg)
![テキストの不自然な改行を解消する裏技3](https://sposai-trivia.com/wp-content/uploads/2024/06/3a3764a92abd4d09a1c96d4a8fa2d833-edited.jpg)
このようにフォントサイズや文章の幅を変えずに、自分の好きなところで改行し、綺麗に整える方法です。
手順は以下の通り
![1テキストをコピーする
2改行を整える
3テキストを隠す
4元テキストを非表示
5サイズを整える](https://sposai-trivia.com/wp-content/uploads/2024/07/wix-text-formatting-infographic-1-1024x576.jpg)
![1テキストをコピーする
2改行を整える
3テキストを隠す
4元テキストを非表示
5サイズを整える](https://sposai-trivia.com/wp-content/uploads/2024/07/wix-text-formatting-infographic-1-1024x576.jpg)
順に見ていきましょう。
1.テキストをコピーする
![1.テキストをコピーする](https://sposai-trivia.com/wp-content/uploads/2024/06/e7bf9167abef391d911c9c5e38066b59-edited.jpg)
![1.テキストをコピーする](https://sposai-trivia.com/wp-content/uploads/2024/06/e7bf9167abef391d911c9c5e38066b59-edited.jpg)
デスクトップ版、モバイル版両方のテキストを確認します。
不自然な改行を見つけたら、デスクトップ版のテキストをコピー&ペーストで複製します。
2.改行を整える
![2.改行を整える](https://sposai-trivia.com/wp-content/uploads/2024/06/1a0fa48c6d7f984a86ebb043eb2ddf1a-edited.jpg)
![2.改行を整える](https://sposai-trivia.com/wp-content/uploads/2024/06/1a0fa48c6d7f984a86ebb043eb2ddf1a-edited.jpg)
複製したテキストをモバイル版で自然な改行となるように整えます。
3.見えないように隠す
![3.見えないように隠す](https://sposai-trivia.com/wp-content/uploads/2024/06/5c0af73f9df67c3cc3236680fbdfdc96-edited.jpg)
![3.見えないように隠す](https://sposai-trivia.com/wp-content/uploads/2024/06/5c0af73f9df67c3cc3236680fbdfdc96-edited.jpg)
整えたテキストを見えないように、
右クリック>アレンジ>最背面へ移動
で隠します。うまく隠れない場合、
- 文字の色を背景と同色にする
- ストリップやボックスの裏に配置する
上記の2つの方法を試してみてください。
4.元のテキストを非表示にする
![4.元のテキストを非表示にする](https://sposai-trivia.com/wp-content/uploads/2024/06/06c887722cbfaf7e014204f098b07abc.jpg)
![4.元のテキストを非表示にする](https://sposai-trivia.com/wp-content/uploads/2024/06/06c887722cbfaf7e014204f098b07abc.jpg)
モバイル版で元のテキストを非表示にします。
5.コピーしたテキストのサイズを整える
![5.コピーしたテキストのサイズを整える](https://sposai-trivia.com/wp-content/uploads/2024/06/0f21d86355843ac8100ceed51d3580a6.jpg)
![5.コピーしたテキストのサイズを整える](https://sposai-trivia.com/wp-content/uploads/2024/06/0f21d86355843ac8100ceed51d3580a6.jpg)
コピーしたテキストの文字サイズを調整します。テキストの色を変えて隠した場合は、元の色に戻してください。
以上で綺麗に改行された文章の完成です。
まとめ
以上Wixサイトのスマホ表示でテキストを綺麗に整える方法を解説してきました。
改行が不自然なままだと、それだけで素人感が出てしまいます。今回の方法で綺麗で見やすい、ユーザー目線のサイト作りをしてみてください。
しかしお伝えした通りデメリットもある。
デザインは妥協してでもまずは検索順位上位を目指したい!
という方はまずはこちらの記事からご確認ください。
WixはSEOに弱い!?10年使ってわかった本当の実力と上位表示の秘訣
![](https://sposai-trivia.com/wp-content/uploads/2023/07/4bf0501b-8f2b-4ac6-abcf-1d76c480f630-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/07/4bf0501b-8f2b-4ac6-abcf-1d76c480f630-1-300x169.jpeg)
その他にもWixがもっと便利になる情報を公開しています。気になった方はチェックしてみてください!
【デモ動画有り】wixサイトにお知らせ欄を設置する方法を徹底解説
![](https://sposai-trivia.com/wp-content/uploads/2024/06/Wixnews-ronilog001-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/Wixnews-ronilog001-300x169.jpeg)
【誰でも簡単】WixサイトにX(旧Twitter)タイムラインを埋め込む方法
![](https://sposai-trivia.com/wp-content/uploads/2023/05/x-timeline001-300x157.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2023/05/x-timeline001-300x157.jpg)
最後までご覧いただきありがとうございました!
コメント