こんにちは、さこっしーです。
「Cocoon」の便利な機能の一つに、「ボックス」というものがあります。
下記のように、いろいろなボックスを使えるようになると、見栄えもよくなるし記事もスッキリと見せられるようになります。
- コーヒー
- 水
- ジュース
- コーヒー
- 水
- ジュース
↑↑
こういうのがやりたいんだけど、どうやってやるの?
ということで、今回は、「Cocoon」で囲み枠の中にリストを入れる方法をご紹介します。
一応、検証で使ったWordPressとテーマのバージョンを記載しておきます。
- WordPress:5.7.1
- Cocoonバージョン:2.2.8.1
- Cocoon Childバージョン:1.1.2
- エディタ:Gutenberg(グーテンベルグ)
ボックスの作成方法
投稿画面右側の「⊞のマーク」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/c3d32701e745c8bd7bad2b7439401518.png)
右側の「⊞のマーク」をクリックすると、下記のような画面が出てきます。
![](https://sakossy.com/wp-content/uploads/2021/04/37b3f60e1204cfa12c48a0df18d2809b.png)
右の⊞をクリックすると、上部にはよく使うものが表示されます。
その中に「ボックス」が入っていないときは、下の「すべて表示」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/f24909c50d6e0fae37f076249b05285c.png)
「すべて表示」をクリックして、下の方にスクロールしていくと「Cocoonブロック」があります。
この「Cocoonブロック」の中から、好きなものを選んでクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/db8ff72304c3a439ffba4795499b30c1.png)
実際に「ボックス」がどのようなものか、ご紹介します。
案内ボックス
1.
2.
アイコンボックス
白抜きボックス
1.
2.
付箋風ボックス
1.
2.
タブボックス
1.
2.
アイコンリスト
こんな感じで、いろいろなボックスがあります。
では、次の章では、囲み枠の中にリストを入れる方法をご紹介します。
囲み枠の中にリストを入れる方法
「ブロックの追加(⊞)」→「Cocoonブロック」→「白抜きボックス」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/a70506174c86429b159fbae72e473bf7.png)
![](https://sakossy.com/wp-content/uploads/2021/04/b25db2fc02de34e28d7f482c40d33a73.png)
つぎは、右側のサイドバーから、白抜きボックスの「枠線」「文字」「背景」の色を決めましょう。
![](https://sakossy.com/wp-content/uploads/2021/04/2583da33b6b7cbe6e56dc4762201a41a.png)
ボックスができたら「文章を入力、または/でブロックを選択」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/da3d6e15e0bd700dacca691e922442eb.png)
つぎに「ブロックの追加(⊞)」→「テキスト」の中の「リスト」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/8027547da9134acad2a479b0496d1e5e.png)
すると、下記のように「白抜きボックス」のなかに「リスト」ができます。
![](https://sakossy.com/wp-content/uploads/2021/04/82e60fbc3e2f7fdb0c4b235e3ea1ea59.png)
リストで数字を選びたい場合は、となりの数字をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/04/c8876f7cfa16ae099cbddde41e418edf.png)
- 実際にボックスの中にリストを入れると
- こんな感じになります
- 数字に変えると
- こんな感じです
- 色を変えると
- いろんなバージョンができます
ボックスの中にリストをいれる方法は、どのボックスを使っても同じなので、いろいろなボックスを使って、試してみましょう。
まとめ
今回は、「Cocoon」で囲み枠の中にリストを入れる方法をご紹介しました。
最初は、とくにリスト表示に苦戦することが多いので、これを見て作れるようになれば幸いです。
さいしょは難しくても、慣れると意外と簡単です。
囲み枠やリストをたくさん使って、見やすい記事をめざしていきましょう。
今回は、以上となります。
最後まで読んでいただき、ありがとうございました。
コメント