【ブロック＆グーテンベルク専用】Diverで入力補助を使う方法　[リスト編]

WordPressでGutenberg（グーテンベルク）を利用されているユーザ様向けに

ワードプレステーマ【Diver】で入力補助を利用するやり方をお教えします。

• 箇条書きリスト
• 箇条書きリスト

1. 番号付きリスト
2. 番号付きリスト

ブロックエディタ（グーテンベルク）だと1種類しかリストを使えませんが、ある方法でDiverのデザイン性があるリストを作ることができました。

今回の記事ではその方法をご紹介します。

Gutenberg（グーテンベルク） の画面はこちら。

大きい画面で編集ができるエディタのことです。　

WordPressでは全体の2割しか使われていませんが、まだまだ需要のあるエディタで、僕もずっと使っています。

他に

もありますが、今回はグーテンベルク（ブロック）エディタのみで【Diverでデザインされたすべてのリストを表示する方法】を紹介します。

【ブロック＆グーテンベルク向け】Diverで入力補助を使う方法

ブロック＆グーテンベルクエディタの編集画面で、一番下までスクロールします。

すると、もう一つの画面が現れます。

オレンジ色枠内の左上にある【入力補助】をクリックしてください。

リストデザインをクリックします。

リストデザインの設定画面が出てきましたね。

箇条書きリストと順序付きリストの二つがあります。

箇条書きリスト（ul）　　順序付きリスト(ol)

とありまして、この英単語はそれぞれのタグを意味します。

今回は４行の順序付きリストを例に進めたいと思います。　

アイコンの色も変更することができます。

まずは好きなアイコンにチェックを入れます。（赤い〇の部分）

それから、左上の黒枠のアイコンを　

と順番にクリックすると、上記の画像のようにタグが表示されます。

今はタグの意味は解らなくても大丈夫です。

1行目、2行目、3行目、4行目に入れたい文字を入力します。

文字は<li>と</li>の間に入力します。

1行目～4行目の入力が終わりましたら、「デザインリストを挿入する」をクリックします。

デザインが挿入されました。

この画面が表示された人は、そのまま進めれます。もしビジュアルエディタで表示されていたら右上オレンジ枠のようにテキストのアイコンをクリックすればタグとして表示されます。

大きなオレンジ色枠内のタグをコピーします。

記事内の貼りたい所に【カスタムHTML】で貼り付けます。

↓に実際貼り付けてみました。

実際のページの様子

完成です！

プレビューで確認しましょう。

※エディタではアイコンが反映されていませんが、プレビューではきちんと反映されていますので安心してくださいね。

コピー元のタグを消し忘れないにしましょうね。

（忘れちゃうとサイドバーに表示されちゃうことになります。）

①囲い枠内②カスタムHTML③段落を組み合わせて下記のように表示させることも可能です。

こんな感じに作れます。

この記事はここまでです。最後までありがとうございました！