ボックス風のリストとは
例えばこのような感じのものです。この他にもボタン1つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。
さらにこのようなことまでボタンで簡単にできてしまいます。
- 『お名前.com』などのドメインを利用している方
- XサーバードメインならXサーバーと一元管理できてかなり便利です

エディタはGutenberg、テーマはCocoon
こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています
それでは具体的にご説明していきます。
ボックスの作成方法
投稿画面左上か右横の〇(⊞のマーク)をクリックします。

左上の〇をクリックすると下のような画面が、

右横の〇をクリックすると下のような画面が出てきます。

左上の⊞を押したときは下の方にスクロールしていくと『Cocoonブロック』が見つかると思います。かなり下のほうです。その中からお好きなものをクリックします。

右の⊞をクリックすると上部にはよく使うものが表示されます。その中に“ボックス”が入っていないときは、下に【すべて表示】の文字が出てくるのでそちらをクリックして“ボックス”を探します。

それでは実際のボックスがどのようなものかこれからご紹介していきます。
案内ボックス
1行目
2行目
付箋風ボックス
1行目
2行目
アイコンボックス
白抜きボックス
1行目
2行目
タブボックス
1行目
2行目
アイコンリスト
ざっとこのようなボックスがいとも簡単に作れます。
リストも入れられます
例えば先ほど出てきた『タブボックス』に『リスト』を追加してみると
- 1行目
- 2行目
このようになります。違いがお分かりになりますか?
先ほどのただのタブボックスはこちらです。
1行目
2行目
ボックスにリストを入れる方法
タブボックスを出した状態で〇をクリックします。

『リスト』を選択します。

するとボックスの中にリストを入れることができました。

もちろん番号付きのリストも作成できます。
- ボックス風リスト
- グーテンベルグエディタならとにかく簡単!
- 参考になったら嬉しいです。
こんな感じになります。
枠と背景の色の変え方
- タブボックスに
- リストを入れました
- 枠の色は紺
- 背景色は薄ピンク
- 文字色はキーカラーにしました
呼び出したボックスが選択された状態で右側の『ブロック』を見てみると『色指定』が見つかると思います。

『色指定』を開くと枠や背景、文字の色を変更することができます。

現在選択中の色は下のようにチェック✓が入るのでわかりやすいです。

さいごに
ほかにもWordpressの使い方を記事にしています。よろしければご覧ください。
