Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの吹き出しの使い方と設定項目のサンプル

スポンサーリンク
使い方

Cocoonには、キャラクターや自分のアバターなどのアイコンで会話形式 の吹き出しを表示する機能があります。

 

今回はその使い方をまとめています。

 

吹き出しのカスタマイズについては以下をご覧ください。

 

スポンサーリンク

吹き出しの設定

Cocoon設定吹き出し

 

Cocoon吹き出し

 

初期デザイン10種

デフォルトで10種類の吹き出しが用意されています。

サンプルから、好みのデザインの吹き出しの「アイコンだけ」を好きな画像に変更すれば、すぐに使えます。

  • アイコン〇囲み・考えごと(左・右)
  • アイコン□囲み・会話(左・右)
  • アイコン〇囲み・吹き出し枠なし(左・右)
  • アイコン〇囲み・会話(左・右)※LINE風グリーン
  • アイコン〇囲み・会話(左・右)

 

アイコンを用意する

吹き出しで使いたいアイコン画像を用意します。

サイズは160~200pxくらいの正方形を推奨。

 

初期アイコンは、以下の場所にあります。

/cocoon-master/images/

 

Cocoon吹き出し:初期アイコン

※160*160pxの正方形

 

吹き出しを作る・編集する

新規作成も出来ますし、サンプルを編集して使う事も出来ます。

 

新規追加

吹き出し新規追加

 

サンプルの好みのデザインの吹き出しの「編集」から。

Cocoon吹き出し編集

 

設定

吹き出し設定

 

タイトル

Cocoon吹き出し設定:タイトル

 

ビジュアルエディタから挿入する際の名前になるので、わかりやすい名前を付けます。

Cocoon吹き出し挿入

 

名前

Cocoon吹き出し設定:名前

 

キャラの名前を設定します。

吹き出しアイコンの下に表示されるものですので、長すぎると見た目が不格好になる為、6文字以内推奨。

 

Cocoon吹き出し:名前表示サンプル

 

アイコン画像

Cocoon吹き出し設定:アイコン

 

「選択」ボタンを押して、好みの画像をセットします。

サイズは160~200pxくらいの正方形を推奨。

 

吹き出しスタイル

Cocoon吹き出し設定:吹き出しスタイル

デフォルト

吹き出しスタイル:デフォルト

フラット

吹き出しスタイル:フラット

LINE風

吹き出しスタイル:LINE風

考えごと

吹き出しスタイル:考えごと

人物位置

Cocoon吹き出し設定:人物位置

 

アイコンを左側に表示するか、右側に表示するかを選択します。

 

 

アイコンスタイル

Cocoon吹き出し設定:アイコンスタイル

四角(枠線あり)

吹き出しスタイル:デフォルト

 

四角(枠線なし)

アイコン:四角(枠線なし)

丸(枠線あり)

吹き出しスタイル:フラット

 

丸(枠線なし)

アイコン:丸(枠線なし)

TinyMCE

Cocoon吹き出し設定:TinyMCE

 

ビジュアルエディターのリストに表示」にチェックを入れます。(初期値)

最後に「保存」ボタンを忘れずに!

 

使い方

クラシックエディタの場合

記事編集のビジュアルエディタに「吹き出し」メニューがあり、プルダウンする事で設定した吹き出しを選択出来ます。

 

 

吹き出しビジュアルエディタ

 

ブロックエディタの場合

ブロックの追加から「Cocoonブロック」を選択し、「吹き出し」を選びます。

 

吹き出し:ブロック

 

挿入後、右側のメニューから吹き出しのスタイルを変更出来ます。

 

吹き出し:ブロック

 

その他、吹き出しの背景色、文字色、枠線色の変更も可能。

注意事項

ブロックエディターの「吹き出しブロック」で利用後、設定を変更すると、ブロックエディター上で再編集できなくなります。

 

 

コメント

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