【WordPress】Cocoonで吹き出しを作る方法

WordPress

応援クリックしていただけると励みになります!ブログランキング・にほんブログ村へ

ブログ環境について

あろうのブログ環境は、以下の通りです。

  • WordPress(ワードプレス)を使用
  • cocoon(コクーン)テーマを使用

吹き出しの使い方(デフォルトのまま使用)

こんな吹き出しを使ってみたいけど、どんな風にしたらいいのかわからないな

吹き出しは、左右どちらからでも作ることができるのよ

いろんなサイトを見ていると、吹き出しを使用しているものをよく見かけますよね。
この吹き出し、WordPressのCocoonなら簡単に作成することができます。

まずは、デフォルトで設定されている吹き出しの使い方をご紹介します。
手順はとっても簡単です。

  1. 通常の記事編集画面で、+(ブロックの追加)をクリックして、検索窓に「吹き出し」と入力します。
  2. 表示される吹き出しマークをクリックします。
  3. 以下のような吹き出しが挿入されます。

これで、吹き出しの挿入は完了です。
とっても簡単ですね。

続いて、吹き出しのスタイルを設定します。
挿入した吹き出しをクリックすると、画面の右側にこのような表示が出てきます。

ここで、人物(男性・女性・医師・ビジネスマンなど)を選択します。
また、人物の位置を右か左好きな方に設定したり、
吹き出しのスタイルをLINE風にしたり等、いろいろなスタイル設定ができるので、
いろいろ設定をして、自分の好みのスタイルを見つけてください。

なお、人物をクリックすると、簡単に画像を変更することもできます。
このやり方では、その都度画像を変更することになりますが、あらかじめ、自分の好きな画像を吹き出しの人物に設定することも可能です。

吹き出しの画像を自分の好みに変える方法

先ほど紹介した方法では、記事を書くたびに吹き出しの画像を変えなくてはなりません。
それは大変手間なので、あらかじめ吹き出しの設定で自分の好きな画像に設定をして、
記事を書くときにはそれを挿入するだけという方法をとることもできます。

吹き出しの設定は、Cocoon設定の吹き出しを選択します。

続いて、画像を変えたい吹き出しのイラストの右にある「編集」をクリックします。

下にスクロールするとアイコン画像を選択する欄が出てくるので、「選択」をクリックして使いたい画像を選択します。

ここで、吹き出しのスタイルや人物の位置なども設定することができます。
好みのスタイルの設定したら、画面下の「保存」を忘れずにクリックします。

なお、デフォルトの吹き出しの編集の他、「新規追加」から新しく吹き出しを作成することもできます。


実際の記事で自分が作った吹き出しを使用する場合には、
まずはデフォルトの吹き出しを挿入し、スタイル設定の人物で作成した吹き出しを選択します。

そうすると、先ほど作成した吹き出しが挿入されているはずです。
ぜひ、お試しください!

応援クリックよろしくお願いします!ブログランキング・にほんブログ村へ

コメント

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