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

ボックス風のリストとは

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

  • 『お名前.com』などのドメインを利用している方!
  • XドメインならXサーバーと一元管理できてかなり便利!!
エックスドメイン キャンペーン中

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

  1. 『お名前.com』などのドメインを利用している方
  2. XドメインならXサーバーと一元管理できてかなり便利!!
エックスドメイン キャンペーン中

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

こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。ワードプレスの投稿画面も日に日にバージョンアップして変わっていくので、2021年に加筆修正しています。

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

ボックスの作成方法

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

ワードプレスコクーンリスト&ボックス

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

ワードプレスコクーンリスト&ボックス

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

ワードプレスコクーンリスト&ボックス

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

ワードプレスコクーンリスト&ボックス

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

ワードプレスコクーンブロック

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

案内ボックス

1行目

2行目

付箋風ボックス

1行目

2行目

アイコンボックス

1行目

2行目

白抜きボックス

1行目

2行目

タブボックス

1行目

2行目

アイコンリスト

  • 1行目
  • 2行目

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

リストも入れられる!

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

  • 1行目
  • 2行目

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

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

1行目

2行目

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

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

ワードプレス コクーン ボックス

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

ワードプレス コクーン リスト

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

ワードプレス コクーン リスト

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

  1. ボックス風リスト
  2. グーテンベルグエディタならとにかく簡単!
  3. 参考になったら嬉しいです。

こんな感じになります。

枠と背景の色の変え方

  1. タブボックスに
  2. リストを入れました
  3. 枠の色は紺
  4. 背景色は薄ピンク
  5. 文字色はキーカラーにしました

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

ワードプレス コクーン ボックス

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

ワードプレス コクーン ボックス

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

ワードプレス コクーン ボックス

さいごに

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

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