[Cocoon]リストをボックスで囲みたい,ボックスの作り方。ワードプレスならHTML不要

ボックス風のリストとは

例えばこのような感じのものです。この他にもボタン１つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。

さらにこのようなことまでボタンで簡単にできてしまいます。

エディタはGutenberg、テーマはCocoon

こちらはWordpress5.5の新エディタGutenberg（グーテンベルグ）を使用しての記事の書き方になります。 テーマはCocoonを使っています

それでは具体的にご説明していきます。

ボックスの作成方法

投稿画面左上か右横の〇(⊞のマーク)をクリックします。

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

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

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

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

それでは実際のボックスがどのようなものかこれからご紹介していきます。

案内ボックス

付箋風ボックス

アイコンボックス

白抜きボックス

タブボックス

アイコンリスト

ざっとこのようなボックスがいとも簡単に作れます。

リストも入れられます

例えば先ほど出てきた『タブボックス』に『リスト』を追加してみると

このようになります。違いがお分かりになりますか？

先ほどのただのタブボックスはこちらです。

ボックスにリストを入れる方法

タブボックスを出した状態で〇をクリックします。

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

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

もちろん番号付きのリストも作成できます。

こんな感じになります。

枠と背景の色の変え方

呼び出したボックスが選択された状態で右側の『ブロック』を見てみると『色指定』が見つかると思います。

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

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

さいごに

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

ワードプレスCocoon

WordpressのCocoonテーマでグーテンベルグエディタを使用しての記事の書き方や設定方法をご紹介しています。その他サイト型トップページ作成方法、Cocoon設定一覧など。できるだけ簡単に設定できる方法をご紹介しています。分かりやすい説明を心がけています。

osaifull.com