cocoonの吹き出しを設定しよう!超簡単で効率UP

ワードプレス
スポンサーリンク
銀ペン
銀ペン

なになに?吹き出し?

sabo
sabo

こんな感じでブログなどに会話形式で表示ができるようになる設定だよ!

ここでは、上記のように会話形式でブログを書きたい時などに使えるcocoonの吹き出し初期設定をご紹介します。
初期に設定してしまえば、使う時は超簡単で効率UPになるので、是非やってみてくださいね。

スポンサーリンク

cocoon吹き出し設定

ダッシュボードでcocoon設定→吹き出しに入ります。

新規登録をクリックすると登録項目がでてきます。

吹き出しを作っていきましょう♪

タイトル
吹き出しのタイトルを入力してください。タイトルは管理画面(検索など)で利用されます

名前
アイコン下に表示される名前を入力してください。※未入力でも可

アイコン画像
選択からワードプレス内のメディアに進みますので、そこで自分の決めた画像をUPするかUPしてある画像を選択します。
※アイコンとなる画像を選択してください。160px以上の正方形画像を設定してください。

吹き出しスタイル
4つのうちから選びます。

sabo
sabo

デフォルト

sabo
sabo

フラット

sabo
sabo

LINE風

sabo
sabo

考え事

人物位置

アイコンスタイル
四角(枠線あり)
四角(枠線無し)
丸(枠線あり)
丸(枠線無し)

エディターのリストにチェックが入っていることを確認

保存をクリックします。

すると、保存後、上の方にデモが表示されます。

吹き出しはいくつか登録できるので、自分のブログなどに登場させたいキャラクターを登録しておきましょう。

銀ペン
銀ペン

saboputはいまのとこ、saboと銀ペンだけだな

cocoon吹き出し利用方法

では早速記事内に先ほどの吹き出しを使って表示させてみましょう。

ブロックエディターがデフォルトエディターとなっているかと思うので、先に吹き出しから入れていきましょう。

記事の適当なところをクリックします。

+ボタンが出るのでクリック
その中の吹き出しを選択しましょう。

すると、先ほど新規に作った吹き出しが出てきます。


※出てこない場合は画面の右側にツールバーが出てると思うのでスタイル設定→人物のタブで先ほど自分で決めた名前を選択します。すると表示が変わります。

あとはその吹き出し内に任意の文言を入力するだけです。

先ほどのツールバーで、記事編集中に少々背景を変えたいなぁなど思った場合はその場での変更も可能です。
色々実験してみてくださいね!

銀ペン
銀ペン

saboがいっぱいだな

sabo
sabo

よくばっちゃった^^

スポンサーリンク
ワードプレス
スポンサーリンク
saboをフォローする
saboput

コメント

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