20代で知りたかった仕事・お金・生活の役立つ情報をあなたに

【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法

【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法
Wixサイトがスマホ表示だとレイアウトが崩れるんだけど、スマホ表示って必要なの?

なんで崩れるんだろう?

スマホ表示を簡単に綺麗に整える方法はない?

ころにぃ
ころにぃ

 

こういった疑問にこたえます。

 

本記事の内容
  • Wixサイトのスマホ表示は超重要
  • スマホ表示でWixサイトのレイアウトが崩れる原因
  • Wixサイトでスマホ表示を簡単に整える方法
  • それでも解決できないテキストの不自然な改行を解消する小技
本記事の内容

     

    ろにぃ
    ろにぃ

    こんにちは、ろにぃ(@ronnie_2020)です。

    Wix歴10年、クラウドワークス、ランサーズ、ココナラでwixサイトの制作を請け負って副収入を得ています。


     

    こういった僕が、解説していきます。

     

    スマホ表示、テキスト、改行でリサーチしてこの記事に辿り着いた方は、テキストの不自然な改行を解消する小技 まで飛ばしてご覧ください。

    目次

    Wixサイトのスマホ表示は超重要

    Wixサイトのスマホ表示は超重要

     

    Wixで時間をかけて作ってはみたサイト、スマホで表示したらレイアウトが崩れている…。

     

    Wix テキスト1
     

     

    Wix テキスト2

     

    こんな経験ありませんか?

    僕は初めてWixサイトを作った時、ここで絶望感を味わいました。

     

    これを見て、

     

    スマホでもPC版表示させればいいんじゃない?
    ころにぃ
    ころにぃ

     

    と考える方もいるかと思いますが、それはおすすめできません。

     

    なぜならスマホ対応していることは、あなたのサイトを人に見てもらえるかどうかに大きな影響を与えるからです。

     

    総務省のインターネット利用状況調査 によると、インターネット利用者の63%以上の人はスマホでインターネットを利用しています。

     

    スマホグラフ

     

    スマホであなたのサイトを見る人が、

     

    このサイト見にくいな
    ころにぃ
    ころにぃ

     

    と感じれば、すぐに閉じてしまったり、二度とアクセスしてくれません。

    また、googleの検索順位においてもスマホ表示は大きな影響を与えます。

     

    今やgoogleの評価で重要視されるモバイル版サイトの利便性

    スマホで適切に表示されなければ、検索順位で上位を目指すことが難しくなるのです。

    Google は全世界でモバイル フレンドリー アップデートを開始します。
    これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。

    googleウェブマスター向け公式ブログより引用

     

    PCとスマホ表示、それぞれのデザインをするのはとても大変ですが、見られるサイトを作る為には必要不可欠です。


    スマホ表示でWixサイトのレイアウトが崩れる原因

    スマホ表示でWixサイトのレイアウトが崩れる原因

     

    Wixサイトのレイアウトが崩れてしまう原因として、よくあるものが以下の2つです。

     

    • テキストボックスを分けていない
    • ストリップやボックスを使用していない

       

      テキストボックスを分けていない

       

      Wix テキスト3

       

      小まめにテキストボックスを分けないと、スマホ表示ではレイアウトが崩れる原因となります。

      特に1つのテキストボックス内でサイズを変えると、スマホ表示では崩れ、サイズ調整もできないため、全てやり直すことになります。

      ストリップやボックスを使用していない

      Wix テキスト4

       

      ストリップやボックスを使用せずに、背景にテキストと画像を並べただけのサイトはスマホ表示では、どこになにがあるかわからない程崩れます。

      Wixサイトでスマホ表示を簡単に整える方法

      Wixサイトでスマホ表示を簡単に整える方法

       

      Wixには『モバイル最適化』、『レイアウト最適化』という機能があります。

       

      Wix テキスト6

       

      Wix テキスト7

       

      テキストや画像のサイズ、レイアウトを1クリックで自動調整してくれるので非常に便利です。

       

      しかしあくまで自動。

      思い通りにならない部分もあるので、最適化後の微調整は自身で行う必要があります。

      テキストの不自然な改行を解消する小技

      テキストの不自然な改行を解消する小技

       

      最後に1つ、必ずぶち当たるであろうwixの壁、

       

      『テキストが不自然な改行となってしまう』

       

      について解決方法をお伝えします。

      例えばこの文章

       

      Wix テキスト8

       

      『より豊かな』が『よ』で切れてしまっています。

      モバイルエディターでは改行できないWixでよく発生する不自然改行。

      これを、

       

      Wix テキスト9

       

      このようにフォントサイズや文章の幅を変えずに、自分の好きなところで改行し、綺麗に整える方法です。


      テキストをコピーする

      Wix テキスト10

      デスクトップ版、モバイル版両方のテキストを確認します。

      不自然な改行を見つけたら、デスクトップ版のテキストをコピー&ペーストで複製します。

      改行を整える

      Wix テキスト11

       

      複製したテキストをモバイル版で自然な改行となるように整えます。

      見えないように隠す

      Wix テキスト12

       

      整えたテキストを見えないように、

       

      右クリック⇒アレンジ⇒最背面へ移動

       

      で隠します。

      うまく隠れない場合、

       

      • 文字の色を背景と同色にする
      • ストリップやボックスの裏に配置する

         

        上記の2つの方法を試してみてください。

        元のテキストを非表示にする

        Wix テキスト13

         

        モバイル版で元のテキストを非表示にします。

        コピーしたテキストのサイズを整える

        Wix テキスト14

         

        コピーしたテキストの文字サイズを調整します。

        テキストの色を変えて隠した場合は、元の色に戻してください。

        以上で綺麗に改行された文章の完成です。

        まとめ

         

        以上Wixサイトのスマホ表示でテキストを綺麗に整える方法を解説してきました。

         

        改行が不自然なままだと、それだけで素人感が出てしまいます。

        今回の方法で綺麗で見やすい、ユーザー目線の作りをしてみてください。

         

        本記事を読んだけど、

         

        • 自分で出来そうな気がしない
        • 自分でやるなんて面倒

             

            という方向けにココナラにて作業代行を承っております。

            検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる

            お知らせ欄設置に限らず、他の機能追加、デザイン修正、サイトのお悩み相談なども承っております。
            あなたのWixサイトがより便利で魅力的に変わりますので、ぜひご検討ください!

             

            その他にもWixがもっと便利になる情報を公開しています。
            気になった方はチェックしてみてください!

             

            【これを求めてた!】wixサイトにお知らせ欄を設置する方法をついに発見

            あわせて読みたい
            【2022年最新】wixサイトにお知らせ欄を設置する方法を徹底解説!     こういった疑問にこたえます。 本記事の内容 wixサイトにもお知らせ欄は設置できます wixサイトにお知らせ欄を設置する3つの方法 更新がラクなコンテンツマネ...

            【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む

            あわせて読みたい
            【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む WixサイトにTwitterタイムラインを埋め込みたいという方に、誰でも簡単にできるように解説。ホームページに手軽に便利な機能が追加できますのでぜひお試しください。

            【簡単】Wixでgoogleカレンダーを使いたい スマホ表示も解説します!

            あわせて読みたい
            【簡単】Wixでgoogleカレンダーを使いたい スマホ表示も解説します! Wixでgoogleカレンダーを使いたいという方に、2つの導入方法を比較しながら解説致します。googleカレンダーを導入することにより、ホームページの使用用途の幅も広がるので、ぜひご活用ください

            よかったらシェアしてね!
            • URLをコピーしました!
            • URLをコピーしました!

            この記事を書いた人

            ろにぃ(@ronnie_2020)


            脱サラ⇒田舎への移住⇒結婚⇒独立⇒大企業からのオファーを機に社会復帰(笑)⇒都内にマイホーム購入


            Twitter&ブログ開始12ヵ月目で副業月6桁を達成

            20代で知っておきたかった仕事、お金、生活に役立つ知識をメインに情報発信をしています。


            これからの時代を生き抜くあなたへ

            未来のくらしのための知識と情報を記録

            知っておくとあなたの暮らしをほんの少し豊かにする

            #RONILOG ロニログ

            コメント

            コメントする

            CAPTCHA


            このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

            目次