ブロックエディタを使ったランディングページの作り方 | OPENCAGE
新テーマ「STORK19」はこちら!

ブロックエディタを使ったランディングページの作り方

WordPressのブロックエディタでは、デフォルトでいくつかの「ブロックパターン」が用意されており、簡単にレイアウトパターンを挿入することができます。

このようなかんじの!

このブロックパターンをうまく使って、リッチなランディングページを作ることができるので、このページではその方法と考え方をご紹介します。

ブロックパターンを使ってリッチなページを作成する方法

「ストーク19」でデフォルトで用意しているブロックパターンを使用すれば、下記のようなページも手軽に作成できます。

以下にて手順を説明します。

固定ページで「フルワイド」テンプレートを設定

まずは【固定ページ > 新規追加】から固定ページを作成して、エディタの「ページ属性」で「テンプレート:フルワイド」を選択します。

「フルワイド」テンプレートを選択します

ブロックパターンを組み合わせてレイアウト

【ブロックの追加 > パターン】から、ブロックパターンを選択して、画像やテキストを置き換えるだけで簡単に独自のコンテンツに作り変えることができます。

今のところSTORK19で用意している「ブロックパターン」として使えるのは以下の7種類となります。今後も追加する予定はありますので、ぜひ活用していただければと思います。

STORK19専用のブロックパターンの種類

カバー
2カラム
3カラム
メディアと文章
吹き出し
CTAボタン
新着記事

あとは自由にカスタマイズ!

ブロックパネルの「色設定」から文字色や背景色を好きなように変更できます。その他、必要に応じてリンクボタンを設置するなど、通常のブロックを追加してのカスタマイズも可能です。

これまでHTMLやCSSでコーディングしてレイアウトを構築していたようなページも、ブロックパターンを使うことで、格段に早く、簡単に作成できるので、ぜひ活用してみてください。

どんなタイミングで使うべきか

ブロックエディタを使って作り込んだページをつくれることがわかりましたが、実際どういったときに利用するのが最適でしょうか。

いくつか考えられるのは以下のようなページがあがります。

  • 作り込んだトップページを作成する
  • 自身のサービスの紹介ページを作成する
  • メインで紹介したいアフィリエイト商品の紹介ページで利用する
  • 自己紹介ページで利用する
  • サイトのナビゲーションページとして利用する(例えばこのようなテーマ使い方ページ

また、このフルワイドテンプレートをうまく使えば、ブログサイトだけではなく、企業サイトの構築もノーコーディング可能になります。

もちろん、魅力的なページを作成するには、画像や色選びなどデザインスキルも必要にはなってきますが、コーディング(HTMLやCSS)のスキルがなくてもページを作成できるので、WordPressでのWEB制作の可能性がとても広がります。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

オープンケージ製テーマのアフィリエイトについて

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。