WordPressで文章を2列に並べる方法｜カラムとスマホ表示

営業時間とアクセス、体験コースと通常コース。関連する情報を横に並べたいときは、WordPressの「カラム」が使えます。パソコンでは2列、スマホでは縦に並べると、どちらでも読みやすくなります。

1. 「カラム」で2列を作る

1. 記事の並べたい位置で「＋」を押し、「カラム」を検索します。
2. カラムブロックを選び、最初は同じ幅の「50/50」を選びます。
3. 左右それぞれの「＋」から見出しや段落を入れます。たとえば左に「営業時間」、右に「アクセス」を置きます。

下は配置の例です。狭い画面では「営業時間」の次に「アクセス」が並びます。

2. スマホでは縦に並べる

画面左上からリストビューを開き、個別の「カラム」の一つ上にある、2列全体を囲む親の「カラム」を選びます。右側の「ブロック」設定で、モバイルで縦に並べるスイッチをオンにします。標準ではオンですが、既存の記事を修正する場合は念のため設定を確認しましょう。

英語表示では、左のColumns（親）を選び、右のBlock → Settings → Stack on mobileを確認します。下に並ぶColumnは各1列です。スイッチをオンにするとモバイルでは上下に並び、オフにすると狭い画面でも横並びのままになります。

スイッチが見当たらないときは、左右どちらか一列だけを選んでいないか確認してください。WordPressのバージョンによって表示名が違うことがあります。

3. 左から右の順番で読めるか確かめる

プレビューでデスクトップとモバイルを見比べます。縦並びでは先に左の列、次に右の列が表示されるため、先に知ってほしいことは左に置きます。長いURLは文字にリンクを貼ると、列の幅からはみ出しにくくなります。

• デスクトップで見出しと説明を目で追えるか。
• スマホで画面を横に動かさずに読めるか。
• ボタンを入れたら文字が切れず、指で押せるか。

列の外に文章を足したいときは、リストビューで一番外側のカラムを選び、その後ろに新しい段落を挿入すると区別しやすくなります。

関連記事

• リストビューでブロックを見つける方法
• ボタンを作ってリンクを設定する方法

サイトの準備に使えるサービス

これから公開先を用意する方は、ドメインとサーバーの条件を見比べてみてください。

ドメインを用意する

サーバーを用意する