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

ワードプレス入力画面 ワードプレスCocoon

ボックス風のリストとは

例えばこのような感じのものです。この他にもボタン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設定一覧など。できるだけ簡単に設定できる方法をご紹介しています。分かりやすい説明を心がけています。

耳寄り情報

エックスサーバーを使いながらドメインは『お名前.com』や『ムームードメイン』などを利用しているというかたへ

ドメインをエックスドメイン に変更すればエックスサーバーと一元管理できてとっても楽です。

Xサーバー、Xドメインの管理画面です。サーバーとドメインが同じ画面で管理できてすっきりします。ミニマリストさんにもおすすめです。

エックスサーバー、エックスドメイン管理画面

◆エックスドメインただいまキャンペーン中

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

出典:エックスドメイン
詳しくはこちら→エックスドメイン

◆エックスサーバー以外のサーバーを利用しているというかたへ

エックスサーバー では、2021年4月1日(18:00)まで

“ドメイン永久無料&初期費用0円キャンペーン”を実施中です。

なんとエックスサーバーでアカウントを取るとドメインが1つ無料でもらえます。そしてそのドメインはエックスサーバーと契約している限りずっと無料で使っていいというのです。

ドメインの移管でもこのキャンペーンの対象となるのでこの機会にサーバーとドメインをXサーバーで統一してみてはいかがでしょうか?初回10日間は無料でお試しできます。

わたしはキャンペーンの少し前にXサーバーにドメイン移管をしてしまいました…。みなさんはこの機会をお見逃しなく!

\エックスサーバーキャンペーン中/

さらに上を行くWordpressのテーマはこちら↓

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインが抜群

インターネット接続キャッシュバックでお得です↓

タイトルとURLをコピーしました