『画面サイズ毎に改行コントロールしたい』テーマLightningで改行レシポンシブ
パソコン表示だと読みやすいのに、スマホで見ると予想外のところで改行されて読みにくくなってしまう・・・ブログやホームページを作成しているとそんな経験をしますよね。
『スマホだけ改行して欲しい』
『タブレットとスマホでは改行して欲しい』
2021年5月に大幅リニューアルした、ワードプレスの無料人気テーマLightningを使えば、こんな要求にこたえることができます。
テーマLightningを使って改行コントロールをする方法
- パソコンやタブレットでは改行せず、スマホだけ指定の場所で改行する方法
- パソコンでは改行せず、タブレットとスマホで指定の場所で改行する方法
- 改行させない設定
テーマLightningの”画面毎の改行”機能とは
テーマLightningの必須プラグインVK Blocksを使えば、段落ブロックや見出しブロックの編集ツールに”画面サイズ毎の改行”が表示されるようになります。

この”画面サイズ毎の改行”を使えば、画面サイズ毎に改行する・しないをコントロールすることができます。
ちなみにテーマLightningのインストールおよび必須プラグインの導入方法は次の記事を参照ください。
”画面サイズ毎の改行”の使い方
使い方は簡単です。
改行したいところに画面サイズに応じたショートコードを挿入するだけです。
例えば段落ブロックでスマホサイズのみ改行したい場合、改行したいところにカーソルを置きます。

あとは次の2ステップのみです。
①”画面サイズ毎の改行”ツールをクリック
②画面サイズ毎の改行(xs)をクリック

これで改行したいところにショートコードが挿入されました。

web表示して確認するとスマホで表示のときのみ改行されています。

改行ショートコードの適応画面サイズ
画面サイズごとのショートコード
上の例のようにショートコードとしてxsを選択するとスマホ画面で強制的に改行されるのですが、実際には次のように適応する画面サイズが細かく分かれています。
ショートコード | 画面サイズ(幅) |
---|---|
xs | 575.98px以下 |
sm | 576px~767.98px |
md | 768px~991.98px |
lg | 992px~1199.98px |
xl | 1200px~1399.98px |
xxl | 1400px以上 |
ほとんどのスマホの画面幅は575.98px以下ですから、スマホのみ改行したい場合はxsを選択すればよいわけです。
また、ショートコードは複数を同時に挿入できます。
例えば768px以下の画面幅では改行したい場合は、xsとsmを同時に挿入すればよいのです。
ipadシリーズでの改行は?
ipadシリーズはさまざまなデバイスがあるので迷うところです。各画面は次のようになっています。
iPad機種 | 画面サイズ(CSSピクセル) |
---|---|
mini(1~5) | 768×1,024px |
mini(6) | 744×1,133px |
ipad(1~6)/Air(1~2)/Pro9.7 | 768×1,024px |
ipad(7~9) | 810×1,080px |
iPad Air(3)/Pro10.5 | 834×1,112px |
iPad Air(4) | 820×1,180px |
Pro11(1~3) | 834×1,194px |
Pro12.9(1~5) | 1,024×1,366px |
このようにPro12.9を除いてiPadの画面幅は991.98px以下ですから、xs・sm・mdを同時に挿入すれば、スマホ~iPadシリーズでの改行をカバーできることになります。
スマホのみの改行はxs、iPadシリーズまでカバーしたい場合はxs・sm・mdを挿入する
改行させない設定
ここまでは、画面サイズ毎にどのように改行させるか、についてでしたが、逆に改行させない設定も可能です。
手順は次の3ステップです。
①改行させたくないテキストを選択
②ツールバー内 ”続きを読む”(下向矢印マーク)をクリック
③”No wrap” をクリック

表の中の価格の表示など、改行させたくないところで使うとよいでしょう。
改行させない=画面からはみ出す可能性がある
ということなので注意が必要です。
必要に応じてCSSのoverflow-xプロパティと組み合わせて使ってやるとよいでしょう。
次の記事では横にはみ出す場合に自動的に横スクロールバーを表示させる方法を紹介しています。
まとめ
Lightningの必須プラグインVK Blocksを使えば、画面サイズ毎の改行をコントロールできます。
操作は簡単、ブロック内ツールバーの”画面サイズ毎改行”を使って、改行したいところに画面サイズに応じたショートコードを挿入するだけです。
また逆に改行なしとする設定も可能です。
ホームページのトップページはもちろんのこと、ブログ記事内でも表を作成するときなどに重宝しますよ。