Still not Gutenberg?

WordPress5.4でグーテンベルクに新しい機能が続々追加!なにがどう変わったのかまとめ

2020年4月1日にワードプレスのアップデートがありました。

バージョンは5.4

アップデートする際は、各テーマのアナウンスを確認して、バックアップをとっておくのがおすすめです。

ヨハネス・G

よほほほ、今回もわしぁパワーアップしたぞ!

くま

成長猛々しいな

WordPress 5.4の主なアップデート内容

追加機能まとめ
  1. 文字のインラインカラー
  2. グラデーション設定追加
  3. ソーシャルアイコンブロック追加
  4. ブロックを選択する際のUI向上
  5. 最新記事ブロック強化

以上が目立った追加機能です。

menくん

この5つの機能追加について説明していきますね♪

この記事ではWordPressテーマのSONICを使って説明していきます。

文字のインラインカラーを設定できる

インラインカラー設定した状態

文章の一部テキストだけをカラー変更できるようになりました。

使い方は簡単です。

ツールバーから選択

テキストを選択した後にツールバーから文字色を選択できます。

色を変えたい部分を選択
ツールバーの下三角をクリック
ドロップダウンリストの文字色をクリック
変更したいカラーを選択
完了
menくん

いままでは各テーマ独自で似たような機能が追加していましたが、公式が対応しましたね

グラデーション設定追加

  1. ボタンブロック
  2. カバーブロック

この2つにグラデーションの設定が追加されました。

menくん

大量のグラデーション追加でわろた

ボタンブロックのグラデーション

12種類のグラデーションが追加されました。

  1. グラデーションパターン12種
  2. タイプ(線形・放射)
  3. 角度

この3つが細かく設定できます。

グラデーションパターン

グラデーションパターン

グラデーションのカラーが切り替わってることよりも、コントロールポイントの数が変わっていることが重要です。

コントロールポイント

コントロールポイントは、グラデーションの色が切り替わるポイントになります。

クリックすることで、カラーの変更、透明度の変更、コントロールポイントの削除をすることができます。

コントロールポイントの各種設定

タイプ・角度

タイプ・角度変更
menくん

放射は使わないですねw(個人意見)

カバーブロックのグラデーション

カバーブロックのグラデーション
くま

おーおーおーカバーブロックのグラデーションはしゃれてんなー

ソーシャルアイコンブロック追加

ソーシャルアイコンブロック
menくん

これね!個人的にすごく使いやすそう!!!!

ヨハネス・G

SNSの時代だな

ココがポイント!
  • 好きなショーシャルアイコンを使い放題!
  • デザインもシンプルで良き!
  • リンクが自由自在

使い方

ウィジェットにあるよ
たくさん並んでるけど左のこいつだけが有効

ソーシャルアイコンブロックを追加すると、6つのアイコンが並んでいます。

ただし、この中で有効になっているのは一番左のWordPressだけです。

試しに違うところクリックすると有効なものだけ表示される

有効にしたいもの、無効にしたいものそれぞれを設定していきます。

アイコンの追加

ブロックの追加をクリック
追加したいアイコンを選択する
こんな感じで追加される

ただし、リンクを設定しないと有効化されません。

アイコンをクリックして、URLを入力すると有効化します

完了

デザインの変え方

スタイル

デザインのスタイルは3種類。

menくん

色がブランドカラーに似た色を使ってくれてる方嬉しいね

デフォルト
アイコンのみ
カプセル型
くま

カプセル型は量が多いとはみ出るのウケる。めっちゃ自由やん

ブロックを選択する際のUI向上

  1. 選択ブロックを段階で表示
  2. 専用選択ツール追加

以上の2点が強化されました。

menくん

グーテンベルクではブロックの選択がしにくかったのは事実です。ただSONICは選択しやすくしてるので、そこまで恩恵はありません。

選択ブロックで段階を見える化

左下にブロックの入れ子段階を表示

いま自分がどの段階のブロックを選択しているかがひと目でわかるようになりました。

menくん

うん。使わなくはない

専用選択ツールで細かいところを選択

左上にあるツール

今まではクリックするとすぐに編集モードになっていたんですが、「選択」を使用すると一旦、選択された状態になり、続けてクリックすると編集モードになります。

menくん

うん。使わない。

最新記事ブロック強化

アイキャッチが追加できるようになり、汎用性が格段に上がりました。

こんな感じで記事一覧を表示できます
menくん

使ってる人あんまり見たこと無いけど、「最新の記事ブロック」すごいんよ

くま

いや、これすごいな

ココがポイント!
  • トップページを自分でつくるときにめちゃ使える
  • サイトマップを簡単につくることができる
  • 出し分けが豊富
ヨハネス・G

ただし、デメリットもあるんじゃよ!

こちらのブロックのデメリットは

  • デザインがそっけない
  • リンクがテキストだけ
  • 表示させたくない記事の設定ができない

ここらへんかなぁ。

デザインとリンクはCSSでなんとかなりそうだけど、表示させたくない記事に関しては今の所難しそうですね。

使い方

ウィジェットブロックのところにあります
投稿コンテンツ設定
menくん

記事本文や抜粋を表示できるようになります。最大文字数を設定できるのは嬉しいですね。

投稿日の表示設定
アイキャッチの表示設定
menくん

画像サイズと画像の位置が選べるのがいいですね

並び替えと絞り込み
menくん

ここすごい!表示する並び順、カテゴリー、項目数、カラムが選べるから

WordPress5.4のグーテンベルク情報まとめ

追加機能まとめ
  1. 文字のインラインカラー
  2. グラデーション設定追加
  3. ソーシャルアイコンブロック追加
  4. ブロックを選択する際のUI向上
  5. 最新記事ブロック強化

他にも細かいところが変更されていたり、追加されていたりしますが、大きなところではこの5つです。

次の5.52020年の8月なので、楽しみですね♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です