Cocoonのブロックエディタで使えるブロックをまとめてみた

ここでは、ブロックエディタで使えるCocoon独自のブロックについてまとめています。

ブロックの特徴やデザインなどがわかるようになっているので、Cocoonのブロックを確認したい場合に役に立つでしょう。

解説の補足

解説についての補足です。

ブロックの挿入手順

記事にブロックを挿入する場合は、エディタ画面の左上にある「＋」のアイコン（ブロックインサーター）をクリック→目的のブロックをクリック、という手順で挿入します。

ただ、この方法だとかなりの数の中から目的のブロック探すことになるので、時間もかかって非常に面倒くさいんですよね。

そこで、この記事ではスラッシュコマンド（ブロック名検索）を使って、簡単にブロックを挿入できる方法を紹介します。

例えば「吹き出し」ブロックの場合、

未入力の段落ブロックでスラッシュ「/」のあとに「bal」（①）と入力すると、「bal」が含まれる名前のブロックが候補として表示されるので、あとは目的のブロックを選択（②）するだけでOKです。

ブロックのスタイル変更について

ブロックによっては、ボーダー色、背景色、文字色などのスタイルを変更できるものがあります。

以下の表で「〇」と記載されているものは、スタイルの変更が可能なブロックであることを示しているので、参考にしてください。

ボーダー色	背景色	文字色
〇	〇	〇

具体的には、エディタ画面のサイドーバーにある「色変更」で、カスタマイズが可能です。

ボックス系ブロック

まずは、種類も豊富でよく使われるボックス系のブロック。

アイコンボックスブロック

/icon　※「icon-box」

タブボックスブロック

/tab　※「tab-box」

ボーダー色	背景色	文字色
〇	〇	〇

見出し付きのボックス

見出しがついている「見出し付き」ボックスには3つのボックスがあり、見出しに好きなものを入力できます。

なお、「見出し付き」ボックスは全て色のカスタマイズ可能です。

ボーダー色	背景色	文字色
〇	〇	〇

見出しボックス

/cap　※「caption-box」

タブ見出しボックス

/tab-cap　※「tab-caption-box」

ラベルボックス

/lab　※「label-box」

案内ボックス

/info　※「info-box」

白抜きボックス

/blan　※「blank-box」

ボーダー色	背景色	文字色
〇	〇	〇

付箋風ボックス

/sti　※「sticky-box」