Elementor で長文を配置した時、「画面の端から端まで文字が続いて、なんだか読みにくい…」と感じたことはありませんか？
新聞や雑誌のように文章を2列や3列に分けたい場合、わざわざカラムを複数作ってテキストを分割するのは非常に手間がかかります。 実は、Elementor のテキストエディターには、たった数クリックで文章を綺麗な段組みにしてくれる隠れた神機能があります。
今回は、長文レイアウトの救世主、カラム（列）機能の使い方を解説します！
なぜ「段組み」にすると読みやすくなるのか？
パソコンのような横幅の広い画面で、1行の文字数が多すぎると、読者の視線は左右に大きく移動しなければならず、目が疲れてしまいます。一般的に、Web上で人間が快適に読めるのは、1行あたり約35〜45文字程度と言われています。
文章を2列や3列の「段組み」にすることで、1行あたりの文字数が適切に制限され、視線の移動が自然と減ります。さらに、新聞や雑誌のような整った美しいレイアウトになるため、読者にしっかりと作り込まれたプロのサイトという印象を与えることができます。
カラム不要！超カンタンな「段組み」設定手順
通常、文章を左右に分けるにはセクション内にカラムを2つ作り、別々のテキストウィジェットを配置して文章を切り分ける必要があります。
しかし、文字の修正や追加があるたびに左右のバランスを手作業で直すのは大変ですよね。 そこで活躍するのが、テキストエディター単体で使える「カラム分割」機能です。
-
本文を「テキストエディター」ウィジェットで入力します。
-
左パネルの [ スタイル ] タブを開き、下の方にある「カラム（Columns）」という項目を探します。
-
デフォルトの設定から、分けたい列の数（例：2 や 3）を選択します。
-
そのすぐ下にある「カラムギャップ（Columns Gap）」のスライダーを動かして、列と列の間のすき間（余白）を見やすく調整します。
たったこれだけで、1つのウィジェット内の文章が自動的に指定した列数で綺麗に折り返されます！
後から途中に文字を追加しても自動でバランスを取ってくれるため、メンテナンスが劇的にラクになります。
スマホ表示（レスポンシブ）での注意点
PCでは非常に見やすくなる段組みですが、スマホのような縦長で狭い画面で、そのまま2列の設定を維持してしまうと、1行の文字数が少なすぎて逆に読みにくくなってしまいます。
そのため、必ずレスポンシブ設定を行って調整しましょう。カラム（Columns）設定の項目名の横にあるスマホのデバイスアイコンをクリックしてモバイル表示に切り替え、スマホの時だけ列数を「1」に戻します。 こうすることで、PCやタブレットでは美しい2列、スマホでは読みやすい1列、というどの端末から見ても完璧な長文レイアウトが完成します。
まとめ
- 1行が長すぎる文章は読みにくいため、「段組み」で視線の移動を減らすのが有効。
-
カラムを分ける必要はなく、テキストエディターの [ スタイル ] ＞「カラム」で一発設定できる。
-
文字を追加・修正しても、ウィジェット内で自動的に折り返してバランスを調整してくれる。
-
スマホで見た時に細くなりすぎないよう、モバイル表示では列数を「1」に戻す。
長い文章を読ませたい企業理念や、商品の誕生ストーリーなどで、この機能を知っていると作業効率が格段に上がります。
ぜひ次回のサイト制作から活用してみてくださいね！
