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

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

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

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

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

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

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

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

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

Cocoonのボックス装飾とは？

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

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

ボックス（アイコン）

ボックス（案内）

ボックス（白抜き）

ボックス（タブ）

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

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

ボックス（付箋風）

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

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

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

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

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

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

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

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

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

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

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

問題は次の工程です。

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

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

こうなっちゃいます。

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

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

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

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

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

ほぼ完成しました。

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

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

すると

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

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

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

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

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

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

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

Cocoon

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

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

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

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

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

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

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