Ryunosuke
方法は2つあります。タグを直書きする方法と、ショートコードで挟む方法です。
- ショートコードの中でタグを書く方法
- ショートコードでリストブロックを挟む方法
以下、詳しくご紹介していきます。
その際はコメントで教えていただければ大変嬉しいです。
この記事のもくじ
Gutenbergのショートコードブロック内でリストを使う方法は2つ
Gutenberg以前のエディター（以下クラシックエディター）では、ショートコードの中でリストを使うことは簡単でした。
しかし、現状のGutenbergでは一工夫必要になっています。
方法A ショートコードブロックの中にHTMLタグを書く
① まずは使いたいショートコードを再利用可能ブロックから選択するか、新たに用意します。
② ショートコードブロック内で、リストを使いたい箇所にHTMLタグを書きます。
このように、ショートコードブロックの中にHTMLタグを書くことでリストを表現することができました。
↓上記のショートコードです。ボックスの中でリストが使えていることが分かります。
- 追加したいリストの中身1
- 追加したいリストの中身2
もちろんリスト以外のタグも使えますので、お試しください。
次はもっと簡単なやり方です。
B) ショートコードブロックでリストブロックを囲む
① まずは先ほどと同じように、ショートコードブロックを用意します。
② ショートコードの閉じタグを、別のショートコードブロックに分けます。
③ 分けた2つのショートコードブロックの間にリストブロックを追加します。
以上で完了です。↓一つ目の方法と同じく表示されていることが分かります。
- 追加したいリストの中身1
- 追加したいリストの中身2
一見、手順が多いよいうに見えますが、後の方法Bの方がHTMLタグを書く必要がないので簡単で楽ですね。
ただし、「リストブロック」はあるので良いですが、専用のブロックが用意されていないタグは、今回の方法Aか、もしくは方法Bで「カスタムHTMLブロック」を挟んで実現しましょう。
↓ボックスの中にdlタグの中身が表示されていますね。
- dlタグを使う例
- ここに説明
- ここにタイトル
- ここに説明
おまけ：リストブロックを素早く使う方法
リストブロックを使いたいときに、プラスボタンからリストブロックを選んだり、「/」を押して出てきた中からリストブロックを選ぶと思います。
もう少し素早くリストブロックを呼び出す方法をご紹介します。
「* 」（アスタリスク+半角スペース）で書き始めると自動でリストブロックに変化します。
「1. 」（数字の1 + ドット + 半角スペース）で書き始めると、自動で番号リストブロックに変化します。
半角で打つ必要がありますが、慣れればこちらの方が早くリストブロックを使うことができますね。
WordPressオススメ書籍
Gutenbergに関しての書籍は残念ながらまだ出ていませんが、これらの書籍でWordPressの基礎を学ぶことは可能です。
AmazonベストセラーのWordPress教本です。
初心者向けの超入門本
まとめ
いかがでしたか？
今回は、慣れていないと「あれ？どうやって使うんだ？」となりやすそうな、ショートコード内でのリストの使い方をご紹介しました。
まだ利用者が少なそうなGutenbergでなかなか検索しても情報が出てこないですよね。この記事が困っている方の一助となれば幸いです。
- ショートコードボックスの中にはHTMLタグが書ける
- ショートコードボックスで囲めば中でリストが使える
- リストブロックは「* 」か「1. 」で書き始めると素早く使える
それでは良き WordPress Gutenberg ライフを！
Ryunosuke
