WordPress無料テーマ「COCOON」 初心者の私ですが「吹き出しを使ってみたい!」
という事で初心者の方でもできる!吹き出しの使用方法をまとめてみました。
![ウメ](https://yorks-design.com/wp-content/uploads/2021/07/ウメ吹き出し用.png)
こんな感じのですね!!
それではやって行きましょう!
「COCOON 」は吹き出し機能が標準搭載されていて便利
COCOON には吹き出し機能が搭載されているため、すぐに使用することができます。
ここではGutenberg(ブロックエディタ)を使用した、吹き出し機能の基本の使い方からご紹介します。
①ブロックの追加で吹き出しを選択(または検索に「吹き出し」と入力して検索)
![](https://yorks-design.com/wp-content/uploads/2021/08/吹き出し-1-1-1024x607.png)
②右ツールバーの吹き出しブロックのスタイル設定より詳細設定がが可能
【タイトル】・【名前】・【アイコン画像】・【吹き出しスタイル】
【人物位置】・【アイコンスタイル】 ・【背景色】・【文字色】・【ボーダー色】
を選択していきます。
![](https://yorks-design.com/wp-content/uploads/2021/08/吹き出し-2-1024x443.png)
![](https://yorks-design.com/wp-content/themes/cocoon-master/images/man.png)
男性(左)
スタイル:デフォルト
人物位置:左
アイコンスタイル:丸(枠線あり)
背景色:淡い青
![](https://yorks-design.com/wp-content/themes/cocoon-master/images/b-woman.png)
ビジネスウーマン(右)
スタイル:考え事
人物位置:左
アイコンスタイル:四角(枠線あり)
文字色:茶色
③アイコン部分・名前部分をクリックして、お好みの画像や名前に変更可能。
![](https://yorks-design.com/wp-content/uploads/2021/08/吹き出し-7.png)
左右交互に配置していく事で会話風になりますね。
とても簡単に使用することができました。
オリジナルの吹き出しの作成方法
次によく使用するオリジナルの吹き出しの登録方法の手順をご紹介します。
【COCOON 設定】→【吹き出し】
【新規追加】またはデフォルト吹き出しスタイルの【編集】より設定可能。
![](https://yorks-design.com/wp-content/uploads/2021/08/吹き出し-5-1024x607.png)
![](https://yorks-design.com/wp-content/uploads/2021/08/吹き出し-6-3-1024x607.png)
【タイトル】・【名前】・【アイコン画像】・【吹き出しスタイル】
【人物位置】・【アイコンスタイル】を選択。
【TinyMCE】エディターのリストに☑・・・次回からブロックエディタで吹き出しを選択した場合に
スタイル設定【人物】のドロップダウンリストに入ります
以上を設定したら【保存】で終了です。
画像が横長・縦長の楕円になってしまう時
アップロード・選択した元の画像が横長・縦長の場合に楕円になってしまいます。
![ヨーさん](https://yorks-design.com/wp-content/uploads/2021/08/2171659-3.png)
なんで!?
その場合は画像を正方形にトリミングしてあげると正円になります。
![ヨーさん](https://yorks-design.com/wp-content/uploads/2021/08/2171659-2-150x150.png)
直った!!
![ウメ](https://yorks-design.com/wp-content/uploads/2021/07/ウメ吹き出し用-e1627812119498-150x150.png)
イラストもいいですね
初心者にも簡単に吹き出しスタイルが使用可能
以上、WordPress無料テーマCOCOON で初心者でも簡単に使える吹き出し機能の解説でした。
ブログなどに上手に取り入れると、読みやすさ等も向上しそうですね!