【保存版】Cocoonで吹き出しを作る方法

この記事では、ワードプレスのCocoonで吹き出しを作る方法をまとめています。

方法はとても簡単ですが、画像でも説明します。

せのけい

吹き出しを作れるようになると楽しいですよ！

自分の好きなキャラを吹き出しに作りたいですよね！

Cocoonで吹き出しを作る手順

手順はこんな感じです。

画像で順に説明してきます。

ステップ1

ワードプレスの画面左側の『Cocoon設定』にカーソルを合わせます。

ステップ2

カーソルを合わせると、画像のようにいくつか項目が表示されるので、その中の『吹き出し』をクリックします。

ステップ3

すると、画像のような画面になりますので、『新規追加』をクリックします。

ステップ4

吹き出しを登録する画面まで来ました。

『タイトル』などの必要項目を入力していきます。

入力する項目について、少し説明しますね。

こんな感じです。

せのけい

私は「せのけい」と表示させたかったので、「名前」のところに「せのけい」と入力しました。

アイコンは、好きな画像を選択しましょう。

フリー素材から画像を取ってくるのが便利です。

▽「いらすとや」の使い方を簡単にまとめています。

【ブログ初心者必見！！】『いらすとや』の使い方

この記事では、『いらすとや』の使い方についてまとめています。 ちなみに、『いらすとや』はサイトの名前のことですよ 最近ブログを始めた人 フリー素材の画像を探している人 ▽気...

senokei.com

私は、ココナラでアイコン画像を作ってもらったので、それを吹き出しに使っています。

吹き出しスタイル、人物位置、アイコンスタイルは、好きなものを選びましょう。

後で、変更できるので、最初は『デフォルト』でいいと思います。

TinyMCEはチェックを入れておく必要があります。

もともとチェックは入っているので、そのままです。

ステップ5

最後に『保存』をクリックします。

ステップ6

投稿の編集画面の『吹き出し』をクリックすると、自分が作った吹き出し等が出ますので、使いたい吹き出しを選択します。

選択すると、こんな感じで吹き出しが出現します。

Cocoonの吹き出しで使う画像を編集

吹き出しに使いたい画像が横に長すぎるなど、サイズが正方形でないときは、編集する必要があります。

サイズの編集方法はいくつかありますが、ここでは最も簡単な方法を説明します。

まずは、使いたい画像を右クリックして、『プログラムから開く』→『ペイント』をクリックしていきます。

そのあと、①の切り取りボタンを押し、②のように切り取りたい場所を選びます。

最後に、③の『トリミング』というボタンをクリックします。

すると、こんな感じで、選んだ場所だけが残ります。

最後は、上書き保存をクリックして、閉じるだけで完了です。

せのけい

この『ペイント』を知っておかないと、使いたい画像が使えなかったりしますよ！

Cocoonで吹き出しを作る方法のまとめ

最後に手順だけ、もう一度まとめておきます。

吹き出しが自由に作れるようになると、ブログの記事を書くのも楽しくなってくるかもしれませんね。

それでは、今回はこのへんで。

せのけい（@senokei_jp）でした。