【Cocoon初心者】箇条書きリストをボックスで囲む方法(ブログ)

  • URLをコピーしました!

【本ページはプロモーションが含まれています】

Cocoonの便利な機能の1つにボックス装飾というものがあります。

箇条書きボックスを使えるようになると、見栄えもよくなるし、記事もスッキリ見せられます。

Cocoonのボックスでリストを囲みたいんだけど上手くいかなんです。詳しくやり方をおしえてください。

それではCocoonのボックス装飾のやり方についてわかりやすく解説します。

※この記事はCocoonで作成しています。

→2020年5月に有料テーマSWELLに変更したのでリライト済み

有料テーマが気になる方はこちらの記事を参考にしてください。

本記事は以下の方におすすめです。

  • Cocoon初心者
  • Cocoonの便利な機能が知りたい方
  • 箇条書きをボックスで囲む方法がわからない方

ブログ初心者の方はこちらの記事も参考にしてください。

当サイトはWordPress有料テーマ「SWELL」を使用しています。
テーマ移行を考えているなら初心者の場合はSWELLがオススメです!

【 SWELLはこんなに使いやすい! 】

  • シンプルで飽きのこないデザイン
  • 初心者が使いやすいブロックエディター
  • 吹き出しなどの装飾が簡単!
  • アフィリエイトボタンの設置もラクラク
  • 記事作成の時間が大幅にカット!

\有料テーマで迷っているならコレで決まり!/

目次

Cocoonのボックス装飾とは?

cocoonにはボックス装飾がかんたんにできる機能がついています。

ボックス装飾のタイプは全部で5つあり以下で紹介します。

ボックス(アイコン)

サンプル
サンプル
サンプル
ボックス(アイコン)はこんな感じで左側に補足や注意などのアイコンがあるボックスです。

ボックス(案内)

サンプル
サンプル
ボックス(案内)は文字の背景を色付けで囲う装飾です。
冒頭部分でよく使用しています。

ボックス(白抜き)

サンプル
サンプル
ボックス(白抜き)は色枠をつけるだけの装飾です。

ボックス(タブ)

サンプル
サンプル
サンプル

ボックス(タブ)は色枠の左上にタブが付いていて、何についてのまとめて書いたのか読者かわかりやすくなります。

ボックス(タブ)を私はかなり多用しています。文章をまとめたり箇条書きにするときにとても重宝しています。

ボックス(付箋風)

サンプル
サンプル
ボックス(付箋風)はボックス(案内)に似ていますが、左側にワンポイントのラインがはいっていて付箋のような感じになっています。
私はcocoonスキンの見出しと同じようなデザインになってしまうためあまり使用していません。

箇条書きをボックスで囲む方法

それでは本題です。箇条書きやリストをボックスで囲む方法を説明します。

実はCocoonでリストや箇条書きをボックスで囲むときにコツがあります。

何も考えずにボックスで囲もうとするとこんな感じになってしまいます。

おすすめの動画配信サービス

1U-NEXT
2Amazonプライムビデオ
3NETFLIX

バラバラになってしまいました・・・。

でも下のようにしたいんですよね?

  1. U-NEXT
  2. Amazonプライムビデオ
  3. NETFLIX

それでは詳しいやり方を画像付きで解説します。

リストにしたいものを3行にして書いていきます。

そのあとに3行を全部選択して上のメニューバーにある「番号付きリスト」をクリックする。

そうすると、番号付きのリストが完成します。ここまでは問題なくできると思います。

問題は次の工程です。

そのまま3つをボックス装飾すると

  1. U-NEXT
  2. Amazonプライムビデオ
  3. NETFLIX

こうなっちゃいます。

ここででひと手間くわえます。

箇条書きの上下に何でもいいので文字をいれます。

私は数字の1をいれています。

この状態で全部を選択してボックス装飾をおこなってください。

上下の「1」と番号リストを全部選択したあとに、スタイル→ボックス(タブ)→「チェック」→黄色とすすみます。

ほぼ完成しました。

しかしまだ上下に余計な「1」のボックスが残ってしまっています・

不要なボックスは1の横にカーソルをあわせてBACK SPAEで消去します。

すると

  • U-NEXT
  • Amazonプライムビデオ
  • NETFLIX

ようやく完成しましたね!

他のボックスも同じように作業をすれば下記のようにボックス(案内)とかも完成します。

  1. 飛行機
  2. 自転車

Cocoonの機能 リストをボックス囲む (まとめ)

以上、Cocoonの便利な機能のボックス装飾のやり方について解説しました。

箇条書きリストをボックスで囲む方法(まとめ)

  1. 番号つき(番号なしでもOK)リストを作成する
  2. 上下に何でもいいから文字を入れる
  3. 上下の不要な文字も全部選択してボックス装飾する
  4. 最後に上下の不要なボックスを削除する

本記事がみなさまのお役に立てれば幸いです。

その他のCocoonの機能やダウンロードなどは公式サイトからできます。

Cocoon
Cocoon SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

word pressの無料テーマであるCocoonは初心者にはとても扱いやすいです。

※ブログを始めたばかりの方はこちらの記事もおすすめです。

【Cocoonの設定】親テーマから子テーマに移行する方法(ブログ)

【 Cocoon から有料テーマに移行を考えている人はSWELLが断然おすすめです。】

専用プラグインを使えば簡単に乗り換え可能!

詳しくはこちらの記事を参考にしてください。

当サイトはWordPress有料テーマ「SWELL」を使用しています。
テーマ移行を考えているなら初心者の場合はSWELLがオススメです!

【 SWELLはこんなに使いやすい! 】

  • シンプルで飽きのこないデザイン
  • 初心者が使いやすいブロックエディター
  • 吹き出しなどの装飾が簡単!
  • アフィリエイトボタンの設置もラクラク
  • 記事作成の時間が大幅にカット!

\有料テーマで迷っているならコレで決まり!/

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次