メニュー
このは屋
スモールビジネス特化の学び舎
スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

WordPressでページ内にカラム(レイアウト)を作成する方法

このは屋
このは屋
スモールビジネス特化の学び舎 このは屋です。

ウェブサイトでよく使う用語「カラム」をご存知でしょうか。

このカラムとは段落という意味で、デザインやコンテンツの配置などに決めるレイアウトのことです。

2カラムレイアウト(2段構成)が定番です。

ランディングページだったら、1カラムレイアウト(1段構成)ですね。

カラムでレイアウトをするには、HTML・CSSの知識が必要になってきます。

その為、ウェブ初心者には自由にレイアウトを作るのは敷居が高いです。

しかし、そんなカラムを使ったレイアウトもWordPressでは、簡単に組むことが出来ます。

HTMLの深い知識も必要ありません。

ページ内でのレイアウトを自由に組むことが出来ます。

今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」をご紹介します。

目次

「Shortcodes Ultimate」プラグインを使用

「Shortcodes Ultimate」というWordPressプラグインを使用することで、投稿ページ・固定ページでカラムを使って自由にレイアウトを組むことが出来ます。

画像を左右に並べたり、左にテキスト・右に画像…etcといった配置が出来てしまうんです。

以下は参考になる記事になります。

ネタワン - WordPress神推しブログ
Shortcodes Ultimate: 50以上の装飾機能があるWordPressプラグイン Shortcodes Ultimateは、50以上のデザインパーツを利用して記事を装飾できるWordPressプラグインです。ショートコードを利用してブログの記事を装飾できます。 プラグイン...
Simplicity Hacks
Shortcodes Ultimateの使い方。WordPress初心者におすすめの、何でもできるプラグイン 簡単な操作できれいな記事装飾パーツを使うことができるプラグインShortcodes Ultimateでできることと、使い方を説明します。

「Elementor」プラグインを使用

「Elementor」というWordPressプラグインを使用すると、ホームページビルダーのような操作感で自由にページレイアウトを組めます。

操作はドラッグ&ドロップで要素をページ内に移動されるだけです。直感的に操作することが可能です。

要素は無料でも多数あるのでかなり便利です。

以下は参考になる記事になります。

ミライヨッチ
【Elementorの使い方】WordPressで人気No.1のページビルダーはこれ! | ミライヨッチ あなたは、Elementor(エレメンター)というページビルダーを知っていますか? WordPressのページビルダーの中でも、圧倒的No.1の人気があるプラグインです。 しかも、無料...
PhotoshopVIP
初心者でも簡単!コード不要のホームページ作成ツールElementorをはじめよう 2021年となったいま、WordPressとElementor(エレメンター)のようなドラッグ&ドロップを基本とした、直感的なWebページビルダーを使えば、誰でも簡単にウェブサイトを作れ...
gungiiのなるほどHack&Tips
最強のページビルダーElementorの使い方 HTMLやCSSの知識が全くなくても、思い通りのデザインができるWordPressのページビルダー用プラグイン。テキストや画像をドラッグ&ドロップしていくことで、直感的に記事を...

Gutenbergエディタを使用

Gutenbergエディタは、ブロックエディタと言われ、最近のWordPressで主流のエディタとなっています。

見分け方は、ホームページビルダーのような編集画面でして、ブロックを追加して編集していきます。

そんなGutenbergエディタ(ブロックエディタ)では、カラム機能が標準でついています。

2カラムにしたり、3カラムにすることが可能です。

以前よりも、柔軟にカラムを追加出来るようになっています。

猫でもわかるWordPress
【2021年10月最新】カラムブロックの使い方徹底解説 自由なレイアウトを作ろう! ブロックエディターの「カラムブロック」を使いこなすと自由にレイアウトが作れますよ! 使い方を徹底解説しました!動画あり!
WebNote+
【ブロックエディター】素敵なレイアウトを作る!カラムブロックの使い方! | WebNote+ WordPressのブロックエディターに標準で用意されている「カラムブロック」の使い方をご紹介します。 カラムブロックを使うと、画像や文章を横並びに配置することができます...
WEBST8のブログ
【WordPressカラムブロック】画像等の横並び方法・作り方 WordPressではカラム(列)ブロックを利用することで、画像や文章を簡単に横並びにすることができます。 本記事では、WordPressブロックエディターにおけるカラムブロックの...

WordPressテーマのカラム機能を使用

Gutenbergエディタに抵抗がある方が一定数いるようです。

旧エディタをClassic Editor (クラシックエディター)といいます。

このエディタを使用している場合、今回解説した「Shortcodes Ultimate」プラグインか、「Elementor」プラグインを利用してください。

それともう一点、WordPressテーマにカラム機能を搭載している物もあります。

現在カラム機能がついているのを確認しているのが、以下のテーマです。

SANGO
SANGO|心地良さを追求したWordPressテーマ WordPressテーマSANGOのデモページです。
JIN(ジン)
JIN(ジン)|真の使いやすさを追求したWordPressテーマ WordPressテーマ「JIN」の販売ページです。ひつじと赤石カズヤの2人により「本当につかいやすい」と感じてもらえるテンプレートを追求し、作り上げました。

※「SWELL」テーマも人気ですが、このテーマはGutenbergエディタを使用した方がオススメなので、割愛しています。

上記テーマの中には、ショートコード機能という物があり、その中にカラム機能があります。

(ただ、Gutenbergエディタに比べ、編集方法がとっつきにくいです。)

自由にページレイアウトを組めるようになるのは、デザインの幅が広がります。

編集後記

今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」についてご紹介しました。

これでページレイアウトを自由に組むことが出来ますね。

正直、レイアウトについてはピンときてない方もいると思います。

以下のような書籍も確認し、ウェブデザインの知識を最低限でいいので取り入れてみてください。

目次