ウェブサイトでよく使う用語「カラム」をご存知でしょうか。
このカラムとは段落という意味で、デザインやコンテンツの配置などに決めるレイアウトのことです。
2カラムレイアウト(2段構成)が定番です。
ランディングページだったら、1カラムレイアウト(1段構成)ですね。
カラムでレイアウトをするには、HTML・CSSの知識が必要になってきます。
その為、ウェブ初心者には自由にレイアウトを作るのは敷居が高いです。
しかし、そんなカラムを使ったレイアウトもWordPressでは、簡単に組むことが出来ます。
HTMLの深い知識も必要ありません。
ページ内でのレイアウトを自由に組むことが出来ます。
今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」をご紹介します。
「Shortcodes Ultimate」プラグインを使用
「Shortcodes Ultimate」というWordPressプラグインを使用することで、投稿ページ・固定ページでカラムを使って自由にレイアウトを組むことが出来ます。
画像を左右に並べたり、左にテキスト・右に画像…etcといった配置が出来てしまうんです。
以下は参考になる記事になります。
「Elementor」プラグインを使用
「Elementor」というWordPressプラグインを使用すると、ホームページビルダーのような操作感で自由にページレイアウトを組めます。
操作はドラッグ&ドロップで要素をページ内に移動されるだけです。直感的に操作することが可能です。
要素は無料でも多数あるのでかなり便利です。
以下は参考になる記事になります。
Gutenbergエディタを使用
Gutenbergエディタは、ブロックエディタと言われ、最近のWordPressで主流のエディタとなっています。
見分け方は、ホームページビルダーのような編集画面でして、ブロックを追加して編集していきます。
そんなGutenbergエディタ(ブロックエディタ)では、カラム機能が標準でついています。
2カラムにしたり、3カラムにすることが可能です。
以前よりも、柔軟にカラムを追加出来るようになっています。
WordPressテーマのカラム機能を使用
Gutenbergエディタに抵抗がある方が一定数いるようです。
旧エディタをClassic Editor (クラシックエディター)といいます。
このエディタを使用している場合、今回解説した「Shortcodes Ultimate」プラグインか、「Elementor」プラグインを利用してください。
それともう一点、WordPressテーマにカラム機能を搭載している物もあります。
現在カラム機能がついているのを確認しているのが、以下のテーマです。
※「SWELL」テーマも人気ですが、このテーマはGutenbergエディタを使用した方がオススメなので、割愛しています。
上記テーマの中には、ショートコード機能という物があり、その中にカラム機能があります。
(ただ、Gutenbergエディタに比べ、編集方法がとっつきにくいです。)
自由にページレイアウトを組めるようになるのは、デザインの幅が広がります。
編集後記
今回は、「WordPressでページ内にカラム(レイアウト)を作成する方法」についてご紹介しました。
これでページレイアウトを自由に組むことが出来ますね。
正直、レイアウトについてはピンときてない方もいると思います。
以下のような書籍も確認し、ウェブデザインの知識を最低限でいいので取り入れてみてください。