SWELLでリストにボーダー(枠線)をつけたり背景を修飾する方法

こんにちは、こんにちは、なお(@nao_koresore)です!

先日、WordPressの勉強やブログのネタ探しのためにいろいろなサイトを拝見していました。

そのとき、

WordPressテーマ「SWELL」で、リスト(箇条書き)へ枠線(ボーダー)をつけたり、背景を修飾する

というテクニックを知りました。

  • SWELLではグループ化を使って
  • リスト(箇条書き)へ
  • ボーダー(枠線)をつけたり
  • 背景を修飾したりできます

リスト(箇条書き)を目立たせたい時にはとても便利なので、私も今後ぜひ使っていこうと思っています。

手順も簡単なので、おすすめです!

目次

リストブロックについて

箇条書きをするための「リスト」は、ブロックエディタでは「リストブロック」を使って書きます。

当ブログでも使用しているテーマ「SWELL」の場合では、リストブロックに次の2つの設定が可能です。

  • スタイル(デフォルトを含め7種類)
  • リストの追加設定(下線をつける、横並び)

これだけでも綺麗なリストができます。

しかしリストブロックには、段落ブロックのようにまわりにボーダー(枠線)をつけたり、背景色やパターンを設定することができません。

いつものようにリストブロックで作ったリスト

  • リスト
  • リスト

そこで、「グループブロック」の登場です。

SWELLでは、グループブロックにいろいろな修飾を行うことが可能です。

グループブロックを使用した「グループ化」を利用することで、さまざまな修飾したリストを作ることができます。

グループブロックは、WordPress5.3から新しく加わったブロックです。

グループ化を利用して修飾したリスト

  • SWELLではグループブロックにいろいろ修飾できます
  • リストとグループブロックのデザインの組み合わせは豊富です
  • クリックだけで簡単に設定することができます

このリストを目立たせたい!」というときにとても便利です。

個人的には次のような効果が期待できると思います。

  • 記事の中で、目を止めてもらいやすくなる
  • 見やすくて、わかりやすくなる
  • かっこよくなる、かわいくなる など

それでは、具体的に作る手順をご紹介します。

また、テーマ「SWELL」についてはこちらでご紹介していますので、よろしければ合わせてご覧ください。

グループ化を使ってリストに修飾する方法

それでは、リストにへボーダーをつけたり背景を修飾する方法を、順番にご紹介します。

リストブロックを追加する

ブロックの追加から、「一般ブロック」にある「リスト」を選択して、リストブロックを追加します。

リストブロックを追加する

通常のリストを書くときと同じですね。

リストを書く

追加したリストブロックでリストを書いていきます。

リストを作る

これも通常のリストを書くときと同じです。

グループ化する

リストブロック上部のツールバーの「詳細設定(縦に3つ点が並んでいるアイコン)」の中にある「グループ化」を選択します。

グループ化をする

すると、リストブロックがグループ化され、左端のアイコンが「グループブロック」のアイコンに変わります。

グループ化できた

グループブロックを修飾する

グループブロックへの修飾は、右側のサイドバーで設定することができます。

グループブロックを選択した状態で、お好みの枠線や背景を設定しましょう。

グループブロックを修飾する

これで、リストにボーダーをつけたり、背景を修飾することができます。

SWELLに用意されているリストのデザイン、またグループブロックへ修飾できるボーダー、背景の色やスタイルなどの組み合わせはもう無数にあります。

私も今後はどんどん他の方のすばらしいデザインをパクっ・・・もとい参考にさせていただいて活用していきたいと思っています。

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

リストブロックをグループ化すると、どのようなことが起こっているのでしょう。

結論からいうと、グループブロックの中にリストブロックが入った、「入れ子」の状態になっています。
(グループブロックが「」、リストブロックが「」)

グループ化したときの構造イメージ

本来、グループ化は複数のブロックをひとまとめにする機能ですが、今回はひとつのリストブロックに対してグループ化を行いました。

リストブロックを選択した状態でグループ化を行うと、リストブロックの外側にグループブロックが作られます。

ちょうど、リストブロックをグループブロックで包み込むような感じです。

リストブロックグループブロックに変換されるわけではありません。

今回の方法は、

  1. リストブロックは、ボーダー(枠線)をつけたり背景の修飾をすることができない。
  2. SWELLでは、グループブロックにいろいろ修飾ができる。
  3. ブロック化で、リストブロックの外側にグループブロックを作る。
  4. 作ったグループブロックを修飾する。

これらにより、リスト(箇条書き)にボーダーをつけたり、背景を修飾することを実現しています。

まとめ

今回は、WordPressテーマ「SWELL」で、リスト(箇条書き)へボーダー(枠線)や背景の修飾する方法をご紹介しました。

リストブロックは、通常ボーダーをつけたり背景を修飾することはできません。

そこで、グループ化を利用することで、リストを含むグループブロックを修飾して実現しました。

このリストは目立たせたい」というときにはおすすめの方法です。

よろしければ一度お試しください。

コメント

コメントする

目次
閉じる