WordPressのテーマ「Lightning」は、初心者でも使いやすく、ブロックエディターを使ってさまざまなレイアウトを作成できます。
しかし、パソコンではきれいに横並びになっているカラムが、スマートフォンで見ると1列に並んでしまい、困ったことはないでしょうか。
たとえば、パソコンでは6つの画像を1行に並べ、スマートフォンでは3列×2段で表示したい場合があります。
この記事では、次の2つの方法を紹介します。
- 2つのカラムをスマートフォンでも横並びにする方法
- パソコン6列・スマートフォン3列×2段にする方法
WordPress標準の設定で対応できる方法と、追加CSSを使う方法の両方を解説します。
この記事の対象
- WordPressの標準カラムブロックを使用している
- テーマにLightningを使用している
- スマートフォンでカラムを縦1列にしたくない
- レイアウト調整のためだけにプラグインを増やしたくない
この記事の結論
設定方法は、作りたいレイアウトによって異なります。
スマートフォンでも2列を維持したい場合
WordPress標準カラムブロックの設定にある「モバイルでは縦に並べる」をオフにします。
この方法では、基本的にCSSを追加する必要はありません。
パソコン6列・スマートフォン3列×2段にしたい場合
カラムブロックに専用のCSSクラスを設定し、追加CSSでスマートフォン表示の列数を指定します。
WordPressのカラムブロックでは「モバイルでは縦に並べる」が初期状態で有効になっているため、画面幅が狭くなるとカラムが縦1列に変わります。 完成イメージ
今回作るレイアウトは、次のような形です。
2つのカラムの場合
- パソコン：2列
- スマートフォン：2列
6つのカラムの場合
- パソコン：6列×1段
- スマートフォン：3列×2段
画像やアイコン、短いサービス名などを並べる場合に適しています。
ただし、1つのカラムに長い文章を入れると、スマートフォンでは文字が小さくなり、読みにくくなります。スマートフォンで3列にする場合は、画像やアイコンを中心にして、文章は短くするのがおすすめです。
【画像挿入位置：パソコン6列・スマートフォン3列×2段の完成イメージ】
一番簡単な方法｜スマートフォンでも2列を維持する
2カラムをスマートフォンでも横並びにしたいだけであれば、WordPressの標準設定で対応できます。
1．親のカラムブロックを選択する
投稿または固定ページの編集画面を開き、横並びにしたいカラムをクリックします。
このとき、カラムの中にある画像や文章ではなく、外側の「カラム」ブロックを選択してください。
うまく選択できない場合は、編集画面上部にある「リスト表示」を開くと選びやすくなります。
リスト表示では、次のような構造になっています。
カラム
├─ カラム
│ └─ 画像
└─ カラム
└─ 画像
一番外側にある「カラム」を選択します。
2．右側の設定画面を開く
画面右上の設定アイコンをクリックし、「設定」タブを表示します。
カラムブロックが正しく選択されていれば、カラム数などの設定項目が表示されます。
3．「モバイルでは縦に並べる」をオフにする
「モバイルでは縦に並べる」という項目をオフにします。
これで、スマートフォンでも2つのカラムが横並びになります。
WordPressの公式ドキュメントでも、この設定を有効にすると小さい画面で縦並びになり、無効にすると横並びを維持する仕様が案内されています。 「モバイルでは縦に並べる」をオフにした画面】
パソコン6列・スマートフォン3列×2段にする方法
6カラムで「モバイルでは縦に並べる」をオフにすると、スマートフォンでも6列が1行に並ぼうとします。
その結果、それぞれの画像や文字が小さくなりすぎることがあります。
そこで、スマートフォンでは途中で折り返し、3列×2段になるようにCSSを設定します。
1．6カラムのブロックを作る
固定ページまたは投稿の編集画面で、カラムブロックを追加します。
- 「＋」からブロックを追加する
- 「カラム」を検索する
- カラムブロックを挿入する
- カラム数を「6」に設定する
- 各カラムに画像やアイコンを入れる
WordPress標準カラムブロックでは、設定画面から最大6カラムまで指定できます。 2．「モバイルでは縦に並べる」をオフにする
先ほどと同じように、外側のカラムブロックを選択します。
右側の設定にある「モバイルでは縦に並べる」をオフにしてください。
この設定をオフにすると、カラムブロックに横並びを維持するためのクラスが追加されます。
ただし、このままではスマートフォンでも6列が1行に並んでしまうため、次のCSSで3列ごとに折り返します。
3．カラムブロックにCSSクラスを追加する
外側のカラムブロックを選択した状態で、右側の設定画面を下までスクロールします。
「高度な設定」を開き、「追加CSSクラス」に次の文字を入力します。
sp-3col
入力するときは、先頭に「.」を付けません。
正しい入力は次のとおりです。
sp-3col
次のように入力しないように注意してください。
.sp-3col
CSSクラスは、6つのうち個別のカラムではなく、6カラム全体を囲んでいる親のカラムブロックに設定します。
WordPress標準カラムは、外側が .wp-block-columns、内側の各カラムが .wp-block-column という構造で出力されます。 4．追加CSSを入力する
WordPressの管理画面から、次の場所を開きます。
外観
→ カスタマイズ
→ 追加CSS
「追加CSS」に、次のコードを貼り付けてください。
/* スマホで6カラムを3列×2段にする */
@media (max-width: 781px) {
.wp-block-columns.sp-3col {
--sp-column-gap: 12px;
flex-wrap: wrap !important;
gap: var(--sp-column-gap) !important;
}
.wp-block-columns.sp-3col > .wp-block-column {
flex: 0 0 calc(
(100% - (var(--sp-column-gap) * 2)) / 3
) !important;
min-width: 0;
}
}
入力後、「公開」をクリックして保存します。
WordPress標準カラムでは、782px未満の画面でカラムを折り返すためのスタイルが適用されています。今回のCSSでは、その動作を調整して3列ごとに折り返しています。 CSSの内容を簡単に解説
781px以下にだけ適用する
@media (max-width: 781px)
スマートフォンや幅の狭いタブレットを対象にしています。
パソコン表示には適用されないため、パソコンでは6列のまま表示されます。
カラムを折り返せるようにする
flex-wrap: wrap !important;
6つのカラムを1行に詰め込まず、画面幅に合わせて次の行へ折り返せるようにします。
1つのカラムを約3分の1の幅にする
flex: 0 0 calc(
(100% - (var(--sp-column-gap) * 2)) / 3
) !important;
横幅を3分割し、スマートフォンで3列になるようにしています。
カラム同士の間隔を指定する
--sp-column-gap: 12px;
カラム同士の間隔を12pxにしています。
間隔を少し狭くしたい場合は、次のように変更できます。
--sp-column-gap: 8px;
広くしたい場合は、次のようにします。
--sp-column-gap: 16px;
スマートフォンで3列にする場合は、8pxから12px程度が使いやすいでしょう。
【画像挿入位置：CSSクラスの入力場所と追加CSS】
CSSを使ってスマートフォンで2列にする方法
通常は「モバイルでは縦に並べる」をオフにするだけで2列を維持できます。
ただし、テーマや既存のCSSとの組み合わせによって、思ったように横並びにならない場合があります。
その場合は、カラムブロックの追加CSSクラスに次の文字を入力します。
sp-2col
追加CSSには、次のコードを入力します。
/* スマホで2列にする */
@media (max-width: 781px) {
.wp-block-columns.sp-2col {
--sp-column-gap: 12px;
flex-wrap: wrap !important;
gap: var(--sp-column-gap) !important;
}
.wp-block-columns.sp-2col > .wp-block-column {
flex: 0 0 calc(
(100% - var(--sp-column-gap)) / 2
) !important;
min-width: 0;
}
}
このCSSは、4つの項目をスマートフォンで2列×2段にしたい場合にも使用できます。
追加CSSクラスを入力する場所が分からない場合
追加CSSクラスは、個別の画像や文章ではなく、外側のカラムブロックに設定します。
選択しにくい場合は、リスト表示を使用してください。
- 編集画面上部の「リスト表示」を開く
- 外側の「カラム」を選択する
- 右側の「設定」を開く
- 「高度な設定」を開く
- 「追加CSSクラス」に入力する
クラス名は半角英数字で入力します。
sp-3col
複数のクラスを設定する場合は、半角スペースで区切ります。
sp-3col original-design
CSSが反映されない場合の確認事項
設定しても表示が変わらない場合は、次の項目を確認してください。
親のカラムブロックにクラスを設定しているか
6つある個別のカラムではなく、全体を囲んでいる親のカラムに設定します。
クラス名の先頭に「.」を付けていないか
追加CSSクラス欄には、次のように入力します。
sp-3col
CSSコードの中では「.」を付けます。
.sp-3col
「モバイルでは縦に並べる」がオフになっているか
今回の6列から3列×2段にする方法では、設定をオフにしたうえでCSSを追加するのがおすすめです。
キャッシュが残っていないか
キャッシュ系プラグインやサーバーの高速化機能を使用している場合は、キャッシュを削除してください。
ブラウザ側にも古いCSSが残ることがあるため、シークレットウィンドウや別のスマートフォンでも確認します。
実際のサイト画面で確認しているか
編集画面内のスマートフォン表示と、実際のサイト表示が完全に同じにならないことがあります。
更新後に実際のページを開き、画面幅を変えて確認してください。
CSSの記号が抜けていないか
特に、次の記号が抜けていないか確認します。
{
}
;
CSSをコピーするときは、コード全体をまとめてコピーしてください。
Lightning G3・VK Blocksを使用している場合の注意点
この記事のCSSは、WordPress標準の「カラム」ブロックを対象にしています。
Lightningと一緒にVK BlocksやVK Blocks Proを使用している場合、似た機能を持つ別のブロックが表示されることがあります。
特に、VK Blocks Proには「グリッドカラムブロック」があります。WordPress標準カラムとは別のブロックなので、今回のCSSをそのまま適用するものではありません。 るときは、選択しているブロックが次のどちらなのか確認してください。
WordPress標準の「カラム」
または
VK Blocks・VK Blocks Proのブロック
今回の方法を使う場合は、WordPress標準の「カラム」を選択します。
Lightningの画面サイズ別非表示設定は必要？
以前は、パソコン用とスマートフォン用で別々のブロックを作り、LightningやVK Blocksの非表示設定を使って切り替える方法もありました。
たとえば、次の2つを作成する方法です。
- パソコン用：6列のブロック
- スマートフォン用：3列×2段のブロック
VK Blocksの非表示設定は、パソコン用とモバイル用で内容自体を変えたい場合には便利です。Lightningの公式解説でも、画面サイズによって異なるブロックを表示する用途で使用されています。 の項目を並べ替えるだけであれば、ブロックを二重に作る必要はありません。
今回紹介したCSSを使えば、1つのカラムブロックだけで次の表示を実現できます。
パソコン：6列×1段
スマートフォン：3列×2段
修正するときも1か所だけ変更すればよいため、管理しやすくなります。
まとめ
WordPressのカラムをスマートフォンでも横並びにする方法は、作りたい列数によって使い分けます。
スマートフォンでも2列にする場合
カラムブロックの設定から「モバイルでは縦に並べる」をオフにします。
パソコン6列・スマートフォン3列×2段にする場合
次の設定を行います。
- WordPress標準の6カラムを作る
- 「モバイルでは縦に並べる」をオフにする
- 親のカラムに
sp-3colを設定する - 追加CSSを貼り付ける
- 実際のスマートフォンで表示を確認する
この方法であれば、レイアウト調整のためだけに新しいプラグインを追加する必要はありません。
Lightningを使用しているサイトでも、WordPress標準カラムを使っている場合は、同じ方法でスマートフォン表示を調整できます。
ただし、3列表示はカラム内の横幅が狭くなります。画像やアイコン、短いタイトルなど、スマートフォンでも見やすい内容に使用してください。
