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

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

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

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

詳細はこちら

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

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

『画面サイズ毎に改行コントロールしたい』テーマLightningの必須プラグインVK Blocksなら簡単!

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

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

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を挿入する

まとめ

Lightningの必須プラグインVK Blocksを使えば、画面サイズ毎の改行をコントロールできます。

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

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

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

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

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