ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる
  • ブログ型サイト
  • 企業ブランディング・集客ページ
  • 飲食店や医院用サイト
  • 各種LP制作

・・・などなど
ワードプレスを使ったサイト制作や
コーディングのみも承ります。

お気軽にお問い合わせください。

※本サイトで紹介する商品は提携先アフィリエイトリンク付き(PR)の場合がございます。

『画面サイズ毎に改行コントロールしたい』テーマLightningで改行レシポンシブ

パソコン表示だと読みやすいのに、スマホで見ると予想外のところで改行されて読みにくくなってしまう・・・ブログやホームページを作成しているとそんな経験をしますよね。

『スマホだけ改行して欲しい』
『タブレットとスマホでは改行して欲しい』

2021年5月に大幅リニューアルした、ワードプレスの無料人気テーマLightningを使えば、こんな要求にこたえることができます。

この記事でわかること

テーマLightningを使って改行コントロールをする方法

  • パソコンやタブレットでは改行せず、スマホだけ指定の場所で改行する方法
  • パソコンでは改行せず、タブレットとスマホで指定の場所で改行する方法
  • 改行させない設定

テーマLightningの”画面毎の改行”機能とは

テーマLightningの必須プラグインVK Blocksを使えば、段落ブロックや見出しブロックの編集ツールに”画面サイズ毎の改行”が表示されるようになります。

各ブロックの画面毎の改行ツール
各ブロックの画面サイズ毎の改行ツール

この”画面サイズ毎の改行”を使えば、画面サイズ毎に改行する・しないをコントロールすることができます。

ちなみにテーマLightningのインストールおよび必須プラグインの導入方法は次の記事を参照ください。

”画面サイズ毎の改行”の使い方

使い方は簡単です。
改行したいところに画面サイズに応じたショートコードを挿入するだけです。

例えば段落ブロックでスマホサイズのみ改行したい場合、改行したいところにカーソルを置きます。

改行したいところにカーソルを置く

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

画面サイズ毎の改行(xs)を選択

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

画面サイズ毎の改行(xs)が挿入される

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

web表示で改行の有無を確認

改行ショートコードの適応画面サイズ

画面サイズごとのショートコード

上の例のようにショートコードとしてxsを選択するとスマホ画面で強制的に改行されるのですが、実際には次のように適応する画面サイズが細かく分かれています。

ショートコード画面サイズ(幅)
xs575.98px以下
sm576px~767.98px
md768px~991.98px
lg992px~1199.98px
xl1200px~1399.98px
xxl1400px以上

ほとんどのスマホの画面幅は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.7768×1,024px
ipad(7~9)810×1,080px
iPad Air(3)/Pro10.5834×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を使えば、画面サイズ毎の改行をコントロールできます。

操作は簡単、ブロック内ツールバーの”画面サイズ毎改行”を使って、改行したいところに画面サイズに応じたショートコードを挿入するだけです。

また逆に改行なしとする設定も可能です。

ホームページのトップページはもちろんのこと、ブログ記事内でも表を作成するときなどに重宝しますよ。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる