ワードプレスのカラムとは？基本と設定方法【ブログ初心者向け】

この記事では、ワードプレスのカラムについて解説していきます。

ワードプレスのカラムデザインを使いこなせるとあなたのサイトが単調になりがちなページに視覚的な区切りを作り、飽きさせないデザインにすることができますよ！

ワードプレスのカラムとは「列」のこと！

そもそも、カラム（column）とは、表やデータベースにおける「列」を指します。表計算ソフトやデータベースでは、データを縦方向に並べたものをカラムと呼びます。

ワードプレスでのカラムというのは横に並んた列のことです。

記事中でカラムを何列にするかというような意味で「1カラム」「2カラム」「3カラム」と使います。

ワードプレスには2種類のカラム概念が存在します。

• ページレイアウトのカラム
• 記事中のカラム

ページレイアウトのカラム

サイト全体のデザインを決める要素で、1カラム、2カラム、3カラムなどの形式があります。

例えば、1カラムはシンプルで集中しやすいデザイン、2カラムはメインコンテンツとサイドバーを並べて情報量を増やすのに適しています。

記事の中のカラム

特定の情報を整理するための機能です。

例えば、料金表やサービス比較を作る際、カラムを活用することで内容が視覚的に分かりやすくなります。

どちらも適切に使うことで、訪問者にとって見やすいサイトデザインが実現します。

初心者でも安心！ワードプレスでカラムを作る方法

ここではワードプレス記事の中でのカラムを作る方法を解説していきます。

必要なのはこの3ステップ！カラム作成の基本

記事内でカラムブロックを作成します。

1.カラムブロックを選択する

エディタ画面からカラムを作成したい箇所で「＋」をクリック

「カラム」を選択する。

2.カラムのレイアウトを指定する

カラムブロックの中からあなたが使いたいパターンを選択する

今回はお店のテイクアウトメニューを並べるという前提で均等2分割のレイアウトを選択してみます。

ブロックは下記のような状態になります。

２分割された枠内の「＋」をクリックしに画像を入れています。

画像・テキスト・リンクなどいれることができます。

　　3.カラム毎にブロックを追加する

それぞれのカラムごとにブロックを追加することができます。

1つのカラムの中にそれぞれコンテンツを追加していきます。

　カラム数の変更

カラム数の変更は右側の設定より変更することができます。

カラム数を変更するときには、全体のブロックを選択してカラム数の変更をします。

カラムを選択するときにはバーの左端に出ているカラムアイコンをクリックすると選択できます。

カラム数は最高6個まで設定ができます。

横に6カラム並ぶのでサイズが小さくなります。

　カラム幅の変更

カラムの幅の変更もできます。

幅を変更したいカラムを選択し、右の設定より「カラム設定」の「幅」を入力して変更します。

　カラムの削除

カラムを削除する場合は、削除したいカラムを選択し、通常のブロックを削除する方法でできます。

　カラムの順序・並べ替え

カラムの順序の並べ替えはブロックを上下させるときと同じ要領で、カラムを選択し、＞＜で移動する事ができます。

　スマホで縦並びにしたくない場合

カラム分割をしたサイトをスマホで見る場合には、レスポンシブ対応の設定にしていると自動でカラムは縦並びになります。

スマホ画面で横並びにしたい場合の設定はカラムの設定より「モバイルでは縦に並べる」をOFFにします。

SWELLでの設定では

□モバイルで2列に表示するにチェックをいれるとスマホで見た時に横並びに表示することができます。

レスポンシブ対応でスマホで見る場合は表示が小さくみにくくなるのを防ぐ意味でカラム分割をしていてもカラムが自動で縦に並ぶようになっています。

ワードプレスのカラムブロック分割例

ワードプレスのカラムブロック分割の例をご紹介します。

カラムを活用することでWEBサイトのデザインがどのように変化するのか、画像とテキストが横並びになり読者が使いやすい、わかりやすくなるかをPCやスマホで確認してみることも大切です。

カラムブロックには4種類のボーダー設定があります。

好みのデザインであなたのサイトに合うものを使うことができます。

カラム均等2分割の例

【ボーダーメインカラー】

2カラムレイアウトが向いているのは

商品一覧ページや比較記事に使いやすい

カラム均等3分割の例

【シャドウ】

３カラムレイアウトが向いているのは

• 複数のカテゴリやサブカテゴリを持つサイトで、ナビゲーションを強化したい場合。
• ブログ、広告など、複数のコンテンツを同時に表示したい場合。

カラム均等4分割の例

【デフォルト】

4カラムレイアウトが向いているのは

あまり一般的ではないですが、

• 複数の情報を同時に比較・検討する必要がある場合。
• ギャラリーサイト：複数の画像を並べて表示したい場合。

モバイルでの表示には注意が必要です。

カラムを使うメリットと注意点

メリット: 情報が整理され、離脱率が減少！

ワードプレスのカラムデザインを使って横並びにコンテンツを配置することで人目で情報を確認する事ができます。

情報が整理され、分かりやすく思いが伝わりやすいサイトとなるでしょう。

注意点: 無駄にカラムを増やすと逆効果になる理由

ページ全体のレイアウトのカラム数は最大3カラム

記事ページ内のカラム数は6カラムまで設定できます。

しかし、必要以上にカラム数を増やすほどスペースが小さくなるので見にくくなります。

また、情報の詰め込みすぎは読者を混乱させてしまうかもしれません。

無駄にカラム数を増やすとわかりにくい、見にくいという逆効果になるおそれがあるので注意が必要です。

まとめ：カラムを活用してより読みやすい工夫をしよう

簡単に横並びに分割したコンテンツが並べられることで比較画像や商品を紹介することができます。

ワードプレスのカラムを使ってより見やすく、魅力的なサイトを作成してください。