WordPressで多彩なデザイン表現が可能になった最新ブロックエディタ機能をご紹介

クリエイティブ WEBサイト制作

ブロック

WordPress5.0から搭載されたブロックエディタは当初賛否両論でしたが、だいぶ機能も充実し、使い勝手も向上してきました。特にWordPress5.4からは様々な「見た目」を細かく素早く作成出来るようになったと思います。

ここでは見た目度アップのためにどんなことが出来るブロックがあるか紹介したいと思います。

見出しブロックの機能

かなり機能が充実しました。

hontono logo こんな見出し作れます

インラインイメージというのが設定でき、見出しの途中にイメージを入れることが出来るようになりました。また文字色も細かく部分指定変更でき、アンダーラインなども入れられます。

WELCOME-JAPANようこそJAPAN-KIMONO-GIRL日本

上記も見出し機能だけで作っています。文字と文字の間に画像を入れることもできます。かなりインパクトのある見出しが作れるようになりましたね。

段落ブロックの機能

段落内にも画像を入れられるようになりました。

前からあったドロップキャップ(使いどころが難しいのですが)、文字色も部分設定出来るようになり、文字の間に画像「 」を入れられます。太字アンダーラインももちろん可能です。

背景色はブロックごとに指定可能です。

背景色をブロックに設定した例です。こんな感じで背景色が設定できるのですが、コントラスト比を判断して「読みにくいですよ」とアラートを出してくれます。

この文字への詳細設定はほとんどの文字を扱うブロックに対して有効です。

表の中に画像を挿入

今まで何気にHTMLモードでしかできなかった表の中に画像を入れるという機能ですが、こちらも簡単に実現可能になりました。

着物A着物BJAPAN-KIMONO-BOY2着物CJAPAN-KIMONO-GIRL
50人20人12人

↑こんな表も簡単にブロックエディタの機能だけで作れます。

↓リストにもこんな感じで画像を入れられます。画像のサイズ(幅)も指定可能です。

  • 着物の女の子20人
  • 着物の男の子15人JAPAN-KIMONO-BOY2
  • 着物の女の子5人JAPAN-KIMONO-GIRL

詩ブロックって何?

詩という謎のブロックですが、通常の段落ではできないポエムな表現が可能です。これは「詩」ブロックです。
例えば、スペースを使って 文字間を表現し た り。できます。

下の例をみると分かると思います。

aaa aaa aaaa aaaaa

上は通常の「段落」ブロックですが、同じ内容で下は「詩」ブロックなのです。

aaa   aaa    a a a a      a  a  a  a  a

使いどころが…。日本語では全角スペースでいくらでもできるので英語のポエマーの方には便利なのでしょう。きっと…。

引用ブロックはおなじみかと思うので、hontono logoこちらの説明は割愛します。

ここは引用元を記述します

引用に似たプルクオートブロック

名前からなんのブロック?と思われるかも知れない「プルクオート」ブロックですが、プル(推す!)クオート(引用)という意味です。普通に使うと下のようになります。

プルクオートブロック

引用に似ていますが、より強調できます

名言集とかに使えそうですね。

プルクオートは
こういう
感じにも使えます

決め台詞や文章中ですごく強調したいときなどに便利?

「スタイル」から「単色」を選ぶと上のようにもなります。絶対ここは伝えたい!と言ったキャッチコピー、社長の言葉、アクセントとして使えそうです。

画像の「カバーブロック」は使える!

画像バックでテキスト表現が可能なブロックで、固定背景もできます

さらにグラデーション
オーバーレイもできます

※固定背景はスマートフォンではオフになるようです

このカバーブロックの中の文章は「見出し」や「段落」といった設定が可能です。なので見出しのデザインにも使えます。

さらに画像も入れて

WELCOME-JAPAN

グラデーションオーバーレイは「透過率(透明度)」が設定できて、透過率を100に設定すれば、塗りつぶすこともできます。さらにエリア内に画像を入れることもできます。ここまでブロックエディタだけで出来ると結構嬉しいですね。

充実のボタン

ボタンの見た目も非常に充実してきています。あと、さりげなくボタンをブロック内で連続で配置できるようにもなっています(以前は1つしかできなかった)。

上記は以前から可能でしたが、下のような派手なボタンも作れます。

ただ、あんまり派手なボタンがユーザーのアクションに寄与するかは判断が難しいところです。サイト全体のデザインに合わせて活用するのが良いでしょう。

グラデーションはプリセットでいくつか選べます。また自分で細かく色や多色指定もできるので、カスタマイズは無限大です。

これも使えそうな「メディアと文章」ブロック

Apple Wood Square

こんな感じになります。

上は「見出し」でここは「段落」です。メディア(この場合画像)は左にしたり右にしたりできます。

Apple Wood Square

画像を右に

今までこれを実現するにはカラムを利用しないとダメでしたが、気軽に画像の横にテキストブロックを配置でき、縦センターなどが可能になりました。

※上記「メディアと文章」ブロックはスマートフォンだと2カラムのように上下に移動します。スマホを横にすると分かりやすいかもです。

新しいブロックエディタを活用しましょう

どうでしょうか?もっと他にもいろいろ便利なブロックがあるのですが、全部紹介するのは大変なので、ざっと目立ってページデザインに活用できそうなブロックを中心に紹介しました。

固定ページをもっとデザインしたい!と言った要望には、かなり現在のWordPressのブロックエディタは充実してきたと言えるでしょう。クラシックエディター派の人も心が揺らいだのでは?

投稿ページには使いどころ注意?

ただ、ブログ(投稿ページ)に今回紹介した凝ったレイアウトを導入するかは別問題です。派手な見出しが必ずしも読みやすい見出しになるとは限りませんし、基本はそれぞれのブロックに対して手作業で設定するので、時間もかかります。

見出しなどはCSSに直接書いた方がもちろん効率は良いでしょうし、サイト全体のデザインを考慮して使いどころをわきまえて活用するのが良いと思います。

皆様もぜひ試してみてください。

関連記事