WordPressテーマ「SWELL」で、リストブロックの周辺を装飾して強調する方法!

2020 3/21
WordPressテーマ「SWELL」で、リストブロックの周辺を装飾して強調する方法!

WordPressテーマ「SWELL」のブロックは、標準ブロックでも豊富なデザインを簡単に装飾することができます。

リストブロックは、リストブロック単体で、周囲や背景の装飾をすることができません。

もっとリスト内容を立たせたい。装飾する方法があります。

リストブロックをグループ化し、グループ化したブロックに装飾を施す方法。

あと、SWELL専用ブロック「キャプション付きブロック」を使用すれば、さらにリストを強調することができます。

もちろん、ショートコードを書く必要も当然なく、クリックだけで行えちゃいます!

目次

リストブロックをグループ化

WordPressテーマ「SWELL」のリストブロック表示

「SWELL」のリストブロックは、文頭に点やチェックマーク、連番などを表示させることができます。下線をつけて、一つ一つを区分けさせて見せる表示もできます。

WordPressテーマ「SWELL」のリストブロック装飾設定
WordPressテーマ「SWELL」のリストブロック装飾設定

しかし、背景色を変えたり、ブロックを線で囲うことはできません。そこで、グループブロックを使用します。

SWELLの旧バージョンでは、装飾ブロックと言うものがありました。WordPressがバージョンアップにともない、グループブロックが新たに組み込まれことで、装飾ブロックは廃止されています。

WordPressのグループブロック

グループブロックは、レイアウト要素にあります。グループブロックを追加して、この中にリストブロックを入れることができます。

先にリストブロックを作った場合、後からリストブロックをグループブロックに組み込むことも簡単にできます。

WordPressテーマ「SWELL」のリストブロックをグループ化

リストブロックを選択し、メニューの変換項目の中に、グループブロックがあります。

WordPressテーマ「SWELL」のリストブロックをグループ化

グループを選択すると、グループブロックの中にリトスブロックが組み込まれます。

WordPressテーマ「SWELL」のグループブロックの装飾設定
WordPressテーマ「SWELL」のグループブロックの装飾設定

グループブロックには、SWELL専用のスタイル設定が用意されているので、そこから設定するだけです。

  • リスト
  • リスト
  • リスト

▲グループブロックに、ポイントの装飾を使用したものです。

キャプション付きブロックでリスト表現

キャプション付きブロックの例
  • リスト
  • リスト
  • リスト

枠で囲ったところに、タイトルっぽく文字を入れることができるSWELL専用ブロック。

リストの内容をまとめたタイトルを入れると、要点をまとめた表現ができちゃいます。

WordPressテーマ「SWELL」のキャプション付きブロック

作り方は簡単! SWELLブロックの中から、キャプション付きブロックを選ぶだけです。

WordPressテーマ「SWELL」のキャプション付きブロック

キャプション部分のスタイルも6つ用意されています。

SWELL専用ブロックのキャプションブロック

クリックで選択するだけです。

WordPressテーマ「SWELL」のキャプション付きブロックに入れ子

すでにリストブロックを作ってしまっている場合は、リストブロックを選択し、左側に表示される位置操作のハンドルをつかみます。

そして、キャプション付きブロックの中に、ドラッグ&ドロップすることで、キャプション付きブロックの中に入れることができます。

まとめ

WordPressテーマ「SWELL」で、リストブロック周りを装飾して、強調させるには2通り。

  1. グループブロックでグループ化し、スタイルを設定する
  2. キャプション付きブロックを使用する

グループブロックは、リストブロックだけでなく、段落ブロックも複数グループ化できるので、装飾して強調させることができます。

WordPressテーマ「SWELL」なら、簡単にできちゃいます!

WordPressテーマSWELL シンプル美と機能性の両立

合わせて読みたい関連記事

この記事が気に入ったら
いいね または フォローしてね!

目次
閉じる