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

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」なら、簡単にできちゃいます!

しっかりウェブデザインを勉強したいなら、オンライン授業もある「インターネット・アカデミー」がオススメです。

  • 表面的な部分だけでなく質の高いWeb・ITのスキルを身に着けたい方
  • Webデザイナーやプログラマーとして副業を考えている方
  • 初心者から中級者まで、スキルアップしたい方
  • 給付金を活用してお得にWeb・ITの勉強を行いたい方
  • ライフスタイルに合わせて柔軟に勉強をしたい方

目的に合わせたコースのカスタマイズも可能。無料相談・カウンセリングも受けられます。

ウェブデザインWordPressを学びたい方にはオススメです!

  • 当日無断キャンセルの場合は、次回のカウンセリングをお断りさせていただく場合がございます。
あわせて読みたい
WordPressテーマ「SWELL」に変更!クールなデザインで、ブロックエディター完全対応でとても使いやすい! 2019年10月頭に、当サイトのWordPressテーマを「SWELL()」に変更しました。 以前は、「Snow Monkey」を使っていました。 どちらもWordPress最新型のブロックエディタ...
あわせて読みたい
WordPressで、WebサイトのようなトップページをWPテーマ「SWELL」で作る方法! WordPressテーマ「SWELL」は、ブログのデザインテーマだけでなく、Webサイト(ホームページ)風のトップページを作る機能があります。 もともとWordPressの機能として、...

ブログカフェ開催のご案内!Blog Cafe

ブログ記事を書いたり、情報交換したり、ブログの悩みを共有できる場です。

ブログを始めたい方も、オンラインで気軽に参加できます。

次回のブログカフェは、2024年10月14日(月・祝)夜開催

第67回ブログカフェ@オンライン10/14(月)夜開催

詳細・参加申し込みは、こちらから!

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

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

シェアはこちらから!
  • URLをコピーしました!
目次