Cocoonの「吹き出し」は、使っていますか?
Webページを作成する上で、表現の幅を広げてくれる機能ですよね。ブログ記事の内容に合わせて、効果的に取り入れると見た目も楽しめます。
その便利な機能の1つ「吹き出し」ですが、今回はアイコン画像が表示されない時の対処法ついて解説していきます。
「吹き出し」のアイコン画像が表示されない!?
WordPressに登録してすぐに「吹き出し」をテストしてみました。
ところが「吹き出し」のアイコン画像が表示されないという事態に見舞われました。いろいろ調べてみると同じような実例があったので共有できたらと思います。

初っ端から何かやらかしてしまったかと思いました💦



…だよね。
ブログ運営に必須なプラグインを網羅しています。プラグインの導入に悩んでいる方やWordPress初心者さんは、ぜひ一読くださいね。
→ WordPress歴50日の私がCocoonに導入したプラグイン16選
「吹き出し」の表示・表示されないが混在


ダッシュボードの「Cocoon設定」→「吹き出し」をクリックしてみます。
ご覧の通り、吹き出し一覧も↑こちらの画像のようになりました。
表示するアイコン画像と、表示されないアイコン画像があり、表示・非表示が混在していたという感じですね。
表示されないの「アイコン画像」を表示させる対処法
アイコン画像を表示させる方法は、「吹き出し」のアイコン画像がアップロードされている場所(階層)を指定してあげれば良いということがわかりました。
手順は次の通りです。
アイコン画像がある場所(階層)は、テーマ「Cocoon」ではなく「Cocoon-master」内にあるということです。
「吹き出し」の使い方
グーテンベルクの場合
ブロックエディター(Gutenberg)は使えるようになると、いろいろな設定ができて便利です。
オリジナルの「吹き出し」を設定してみよう
オリジナルの「吹き出し」を設定することができます。
一度設定しておくと必要な時に繰り返し使えて便利ですよね。



「吹き出し」は、はじめて使ってみました。



左右にわけて設定しておくと、会話風な表現ができちゃうんだ。
オリジナルの「吹き出し」の設定方法
あらかじめオリジナルアイコン画像を用意しておくとスムーズに設定ができます。
画像のサイズは、160px以上で160px~200pxのスクエア(正方形)が良さそうですよ。ちなみに私は 200×200の画像を使っています。
「吹き出し」で表現の幅が広がる
「吹き出し」のアイコン画像が表示されない時の対処法について解説してきました。
プラグインを導入しなくても簡単にすぐ使うことができる、Cocoonの「吹き出し」機能は便利ですね。
さまざまなキャラクターを設定して、ついつい遊んでしまいそうです。今後、何かアピールしたい時などに取り入れてみたり、ストーリー性があると楽しめそうですね。ではまた。
おすすめ記事
ブログが工事中の時は落ち着いて作業をしていきたいですよね。ワードプレスでも「一時非表示」の設定が可能ですよ。
→ WordPressビギナー必見!「メンテナンスモード」を真っ先に導入しよう


セキュリティ系プラグインからお役立ちのプラグインを導入していきます。
→ WordPress歴50日の私がCocoonに導入したプラグイン16選


1万人以上のクリエイターが在籍!似顔絵・イラストを依頼するならココナラ!
→ 無料登録はこちら




itolico(いとりこ)| itolico log 管理人
- ブロガー歴10年越え&Webライティング6年目
- Twitter:1,000フォロワー(5か月で達成)
- HTMLの簡単なカスタマイズも独学でマスター