Cocoonで吹き出し機能を使ってみる

こんにちは、るんです。

今回は、Cocoonの機能の１つである吹き出しの使い方をまとめていきます。

るん

これが吹き出し機能です

旧エディタでの使い方はCocoonのサイトで紹介されています

吹き出し機能の使い方自体は、Cocoon制作者のわいひらさんがCocoonのサイトにてご紹介してくださっています。
しかし、WordPressの旧エディタでの解説となっており、現エディタの Gutenberg（グーテンベルク）を使っている場合だと、やり方が異なります。
私自身、少し戸惑ったので、今回は Gutenberg のエディタでの使い方を紹介していきます。
やり方が異なるのは、使用方法だけなので、基本設定の部分はCocoonのサイトで紹介されている手順で問題ありません。
設定はもうできたよという方は、以下の「吹き出しを使ってみる」の項目から読んでいただければ大丈夫です。

https://wp-cocoon.com/how-to-use-speech-balloon/

吹き出しで使用する画像の用意

まずは吹き出しで使用したい画像を用意します。
エディタがGutenbergに変わろうとも、この画像を用意する作業に関しては今まで通りなので、Cocoonのサイトで紹介されている通りにすすめてOKです。

また、あらかじめ画像付きの吹き出し設定がいくつがデフォルトで用意されているので、それを使うことも可能です。

吹き出しの設定

つぎに吹き出しの設定を行います。
ここも今までのやり方と変わらないため、Cocoonのサイトで紹介されている通りに進めましょう。

吹き出しを使ってみる

ここからが、Gutenbergのエディタを使用している人はやり方が異なる部分です。

ブロックの追加の「Cocoonブロック」の中にある「吹き出し」を選択します。

そうすると下図のようなブロックが作られます。

そして、作られた吹き出しブロックを選択していると下図のような設定項目が表示されます。
この設定項目をそれぞれ自分がやりたい設定に変更すればOKです。

まとめ

吹き出し機能は、あるととっても便利ですよねぇ。
新エディタのGutenbergを使っていると、Cocoonのサイトで紹介されているやり方と異なるため、私ははじめ戸惑いました。
この記事で、私と同じように戸惑っている人の助けになれば幸いです。

るん

それでは、またお会いしましょう♪