職業訓練が始まって早くもブログがご無沙汰なitachy(@itachy_blog)です。
このブログのテーマスキンは『Cocoon』を使用しています。
htmlを触ったことのある身としてはクリック一つで色々出来るので便利すぎる!!!!
と、いちいち感動しているのですが、便利さにびっくりした機能の一つに『吹き出しブロック』があります。
けどそれを使おうとしたらアイコン画像が出てこない…
ちょっと前は出てたのに…
前に書いた記事に使った吹き出しを『再利用ブロック』とやらにして使いまわしてみたりするけどやっぱり不便!!
という訳でいろいろやってみたら無事に表示されるようになったので、備忘録も兼ねて書いていきますね。
同じような内容でお困りの方の参考になれば幸いです。
不具合の内容
- ビジュアルエディター上で吹き出し画像が出ず『・』になる。
- プレビューしても表示されない。
- 『・』をクリックすれば画像変更は出来る。
- 違う画像に変更するとプレビューで表示される。
- 吹き出しブロックは出てくるので選択、編集は一応可能。

COCOONブロック内の『吹き出し』をクリックして表示させると、アイコンが点になる。
今回の原因
ざっくり原因を説明すると、
『Cocoonテーマのアップデート後、親テーマが2つあったので「cocoon-master」に一本化。
その後も、吹き出しに使われていた画像の指定ファイル名を「cocoon」のままにしていたため。』
でした。
ホームページ制作やブログ歴の長い方にとってはそれだけの事かよ!という感じの不具合でしたが、どゆこと?な方は以降を読んでいただけると分かるかもしれません。
ちなみに、Cocoonの親テーマを1つにする方法はこちらの記事を参考にしました↓
解決までの経緯
ググる(検索する)
まずは人類の集合知、何でも知ってるGoogle先生に聞いてみます。
『cocoon ビジュアルエディター 吹き出し 画像出ない』と検索。
原因として3つのケースが出てきました。
試してみる
ケース①:プラグインが邪魔している

『吹き出しを作るプラグイン等が邪魔している』ケースです。
プラグイン一覧を確認しましたが、私が使っているものの中に記事で挙げられているプラグインがなかったため、この原因ではなさそう。
ケース②:旧エディターにすれば出てくる

そもそも『吹き出しブロックを出す所が無いよ!』というケース。
多分違うだろうな…と思いつつも念のため試すことに。

まずは「Gutenbergエディターを有効にする」のチェックを外して、旧エディターに戻します。

エディターの表示が変わりました。
最初『・』だったアイコンの外枠だけが出ましたが、画像が見られないのは変わりません。
けどこの画像が見えない表示…どこかで……
リンク切れか?
ケース③:画像が変わったので画像置き換えが必要


『デフォルトで使われてる画像が変わったから差し替えてね!』というケースです。
以前はいらすとやさんの画像が使用されていたんですね…
余談はさておき、
Cocoonの『吹き出し』ブロックは、あらかじめオリジナルの吹き出しを作って登録しておけるそうで、その時にアイコンの画像を指定することが出来ます。
WordPress画面左のメニューから『Cocoon設定』にカーソル持って行って、その右横に出る『吹き出し』をクリックすると編集画面になります。

どれか1つの吹き出しの「編集」をクリックすると、上の画面になりました。
編集画面上でもアイコン画像がホームページの『リンク切れ』と同じ状態で、表示されていません。
やはり!(`・ω・´)
画像のフォルダの指定が間違っとる!!
解決方法確定!
原因が分かったので対処していきます。
【1】『吹き出し用イラストのダウンロード』のページを拝見し、見覚えのあるアイコン画像のデータ名を確認
【2】サーバーのファイルマネージャー内、『cocoon-master』の『image』フォルダに、【1】と同じ画像があるか確認
(あればOK、無ければダウンロードして 『image』 フォルダ内に入れておく)
【3】『吹き出し』編集画面に戻り、「アイコン画像」に書かれているアドレスの
・テーマフォルダ名
・画像データ名
を確認、訂正する
私の場合、
https://(中略)/cocoon/images/doya-woman.png
となっていたので、
https://(中略)/cocoon-master/images/doya-woman.png
に変更しました。(赤がテーマフォルダ名、青が画像データ名です)
【4】出た!!!!!!

【5】画像が表示されたのを確認したら、【3】の作業を表示されていない吹き出し全てに行います。
まとめ
『ちょっとの事で大違い』なのがデータ編集の大変な所だな…と感じた一件でした。 アドレスやファイル名の変更はきちっと確認しておかなければと思います。 ほなね~( ・ω・)ノシ
おまけ:もう解決策載ってた…

頑張って自力で解決出来ましたが、もうCocoonさんの公式コミュニティで解決されておりました…
私の説明で分かりにくかったらこちらも参考になさってください…(´・ω・`)
コメント