ホームページを更新していると、
- パソコンではちょうどよく見えるのに、スマホでは変な位置で改行される
- スマホで見やすくしたら、今度はPCで読みにくくなった
ということがあります。


W
WELUCA
特に、見出しやキャッチコピー、短い案内文では、改行位置によって見え方がかなり変わります。
この記事では、Lightningテーマのサイトで、スマホとPCで文章の改行を分ける方法を、分かりやすくご紹介します。
一番かんたんな方法:
改行したい場所にコマンドを入れる

W
WELUCA
改行したい場所に、指定のサイズの改行ボタンを入れると、そのサイズのデバイスのみ改行されるという仕組みです!
改行したい場所をクリック
固定ページ内の、任意の箇所を選んでください。
バーが出てくるので、↩︎のボタンをクリック
上の画像の左矢印(↩︎)になります。
「画面サイズ毎の改行(xs)」をクリック
選んだショートコードを入れている部分は、指定のサイズで改行されます。
各サイズのpxサイズ
xs:〜575px
sm:576〜767px
md:768〜991px
lg:992〜1199px
xl:1200〜1399px
xxl:1400px〜
スマホだけで改行したい → xs または sm
タブレットでも改行したい → md
PCサイズで改行位置を変えたい → lg
このような感じになります!
スマホやパソコンにも色々なサイズがあるので、全てのデバイスでレスポンシブにすることは事実上不可能なのですが、ほとんどの場合はこの方法でレスポンシブにできるので、ぜひお試しください!
