Cocoonのブロックエディタの使い方｜初心者はまずこの6つだけ覚えよう

こんな悩みに応えます。

Cocoonのブロックエディタは種類がたくさんあって、どれを使えばいいのか迷ってしまいますよね。

実は、最初に覚えるべきブロックは6つだけでOKです。

6つのブロックを使えるようになれば、記事を書くことはできますので、まずはそこを目標にしてください。

この記事では、Cocoon初心者の方が最初に覚えるべき6つのブロックに加えて、記事をさらにレベルアップさせる便利機能についても解説していきます。

✅この記事でわかること

Cocoonのブロックエディタとは？

最初に、ブロックエディタの仕組みを簡単に説明しておきます。

ブロックエディタとは、記事を「ブロック」という単位で組み立てていく記事作成画面のことです。

「Gutenberg（グーテンベルク）」とも呼ばれていて、WordPress 5.0（2018年）から標準搭載されています。

✅ブロックエディタの投稿画面

テキスト・画像・吹き出しなど、それぞれの要素がブロックとして用意されており、追加・移動・削除が直感的にできます。

Cocoon独自のブロックも豊富に用意されていて、「/吹き出し」「/ボタン」など、「スラッシュ（/）＋ブロック名」を入力するだけで、必要なブロックをすぐに呼び出せるので、作業効率もぐっと上がります。

Cocoon初心者が最初に覚えるべき6つのブロック

ではまず最初に、記事を書くために必要な6つのブロックをご紹介します。

✅最初に覚えるべき6つのブロック

この6つを使うことで、読みやすい記事は書けるようになります。

ただし、ブログで収益化していくには、広告の設置や内部リンクなど、もう少し踏み込んだ機能も必要になります。

慣れてきたら、次の章で紹介する機能もあわせて使ってみてください。

それでは、一つずつ解説していきます。

①：段落ブロック

段落ブロックは、普段の文章を入力するための、最も基本的なブロックです。

特別な使い方はなく、そのまま文字を打っていくだけでOKです。

太字やリンクの設定、文字色の変更などもこのブロックから行えますので、後ほど詳しく解説していきます。

②：見出しブロック

見出しブロックは、記事の見出し（h2・h3・h4など）を作るためのブロックです。

見出しがあることで、記事全体の構造がわかりやすくなり、読者が知りたい部分をすぐに見つけられるようになります。

僕の場合、基本的には「h2」「h3」の2つだけを使うようにしています。細かく階層を分けすぎると、かえって読みにくくなってしまうからですね。

SEO的にも、見出しを適切に使うことは重要なので、記事全体の見通しを意識しながら見出しを設定していきましょう。

③：吹き出しブロック

吹き出しブロックは、アイコン画像とセリフを組み合わせて、会話形式で表示できるブロックです。

キャラクターのアイコンと一緒にセリフを表示できるので、記事にメリハリが生まれて読みやすくなります。

✅使い方

あらかじめ設定したアイコン画像を選んで、セリフを入力するだけなので簡単ですよ。

④：画像ブロック

画像ブロックは、記事内に写真やスクリーンショットを挿入するためのブロックです。

文章だけの説明よりも、実際の画面を見せた方が読者に伝わりやすくなります。

✅使い方

アップロード後は、画像の下にキャプション（説明文）を追加することもできます。

⑤：リストブロック

リストブロックは、箇条書きや番号付きリストを作るためのブロックです。

情報を並べて見せたいときに使うと、文章だけで書くよりも視覚的にスッキリと整理され、読者が理解しやすくなります。

✅使い方

チェックマークのアイコンをつけたり、色を変えたりすることもできるので、記事の雰囲気に合わせて使い分けられますよ。

⑥：ボタンブロック

ボタンブロックは、リンク先へ誘導するための、目立つボタンを作れるブロックです。

テキストリンクよりも視認性が高く、「ここをクリックしてほしい」というポイントで使うと効果的です。

✅使い方

ボタンの色や形、サイズなども自由に変更できるので、記事のデザインに合わせて調整できますよ。

Cocoonの記事をレベルアップさせる便利機能（収益化・装飾）

6つのブロックに慣れてきたら、次の機能・ブロックも使ってみてください。

✅記事をレベルアップさせる機能とブロック

テーブルブロックは商品やサービスを比較する場面で活躍し、装飾機能を使えば文章をより見やすく整えられます。

さらに、カスタムHTMLやブログカードを使えば、広告設置や内部リンク誘導もできるようになりますよ。

それでは、一つずつ解説していきます。

①：テーブルブロック

テーブルブロックは、表形式でデータを整理できるブロックです。

複数の商品やサービスを比較する場合、文章で説明するよりも表にまとめた方が、圧倒的にわかりやすくなります。

✅使い方

列数・行数は後から変更できるので、最初は少なめに作っておいて、必要に応じて追加していくのがおすすめです。

セルごとに背景色や文字色を変えることもできるので、見やすく整理された表を作れますよ。

②：カスタムHTMLブロック（広告貼り付け用）

カスタムHTMLブロックは、HTMLコードをそのまま貼り付けられるブロックです。

主に、広告（アフィリリンクのバナーなど）を設置するときに使います。

✅使い方

ブログで収益を得るには広告の設置が欠かせないので、頻繁に使うことになりますよ。

③：ブログカードブロック

ブログカードブロックは、他の記事へのリンクを、画像・タイトル・抜粋文つきのカード形式で表示できるブロックです。

実際にブログカードを使うと、内部リンクはこんな感じで表示されます。

テキストリンクだけよりも視覚的にわかりやすく、クリックされやすいというメリットがあります。

✅使い方

SEO的にも内部リンクは重要なので、頻繁に使うことになりますよ。

④：装飾機能（太字・マーカー）

装飾機能とは、文字を太くしたり、マーカーを引いたりして、文章を見やすくできる機能です。

✅装飾機能の一例

太字にしてマーカーで目立たせせることで、読者が重要な部分を見逃しにくくなります。

✅使い方

使いすぎると逆に読みにくくなるので、本当に伝えたいポイントだけに絞って使うのがおすすめです。

まとめ：まずは6つのブロックを使えるようになろう

ここまで、Cocoonのブロックエディタで最初に覚えるべき6つのブロックと、記事をレベルアップさせる便利機能について解説してきました。

✅この記事のまとめ

Cocoonのブロックエディタは、使えば使うほど便利さがわかってきます。

最初は6つだけ覚えて、慣れてきたら少しずつ装飾や機能を取り入れながら記事を書いてみてください。

まだCocoonの初期設定が終わっていない方は、こちらの記事も参考にしてください⬇️

Cocoonのおすすめプラグインについては、こちらにまとめています⬇️