ボックス風のリストとは
例えばこのような感じのものです。この他にもボタン1つで色々なボックスを呼び出すことができます。CSSもHTMLも使いません。
さらにこのようなことまでボタンで簡単にできてしまいます!
エディタはGutenberg、テーマはCocoon
こちらはWordpress5.5の新エディタGutenberg(グーテンベルグ)を使用しての記事の書き方になります。 テーマはCocoonを使っています。ワードプレスの投稿画面も日に日にバージョンアップして変わっていくので、2021年に加筆修正しています。
それでは具体的にご説明していきます。
ボックスの作成方法
投稿画面左上か右横の〇(⊞のマーク)をクリックします。

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

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

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

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

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

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

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

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

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

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

さいごに
ほかにもWordpressの使い方を記事にしています。よかったらご覧くださいね。

耳寄り情報
エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ
ドメインをエックスドメイン
Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

◆エックスドメインただいまキャンペーン中
2021年3月31日までの期間限定で.jp .com .net他8種類ドメインの移管料金が利用料込みでなんと1年間110円(税込み)になるキャンペーン中です。


◆エックスサーバー以外のサーバーを利用しているというかたへ
エックスサーバー
“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。
なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。
ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。
わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!
\エックスサーバーキャンペーン中/
さらに上を行くWordpressのテーマはこちら↓

- 圧倒的にSEOに強い
- おしゃれで美しいデザイナーズサイトが簡単に作れる
- アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
- ランキングサイト・口コミサイトなどが簡単に作れる など

- ブロガー向けのシンプルで高機能なテーマ
- カスタマイズに時間をかける必要がない
- 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群
インターネット接続キャッシュバックでお得です↓