【Cocoon】アップデートしてから吹き出し画像が表示されない

職業訓練が始まって早くもブログがご無沙汰なitachy（@itachy_blog）です。

このブログのテーマスキンは『Cocoon』を使用しています。
htmlを触ったことのある身としてはクリック一つで色々出来るので便利すぎる！！！！
と、いちいち感動しているのですが、便利さにびっくりした機能の一つに『吹き出しブロック』があります。

けどそれを使おうとしたらアイコン画像が出てこない…
ちょっと前は出てたのに…

前に書いた記事に使った吹き出しを『再利用ブロック』とやらにして使いまわしてみたりするけどやっぱり不便！！

という訳でいろいろやってみたら無事に表示されるようになったので、備忘録も兼ねて書いていきますね。
同じような内容でお困りの方の参考になれば幸いです。

不具合の内容
今回の原因
解決までの経緯
まとめ
おまけ：もう解決策載ってた…

不具合の内容

ビジュアルエディター上で吹き出し画像が出ず『・』になる。
プレビューしても表示されない。
『・』をクリックすれば画像変更は出来る。
違う画像に変更するとプレビューで表示される。
吹き出しブロックは出てくるので選択、編集は一応可能。

↑こんな感じ。
　COCOONブロック内の『吹き出し』をクリックして表示させると、アイコンが点になる。

今回の原因

ざっくり原因を説明すると、

『Cocoonテーマのアップデート後、親テーマが２つあったので「cocoon-master」に一本化。
その後も、吹き出しに使われていた画像の指定ファイル名を「cocoon」のままにしていたため。』

でした。

ホームページ制作やブログ歴の長い方にとってはそれだけの事かよ！という感じの不具合でしたが、どゆこと？な方は以降を読んでいただけると分かるかもしれません。

ちなみに、Cocoonの親テーマを１つにする方法はこちらの記事を参考にしました↓

https://masuomemo.com/%E8%A6%AA%E3%83%86%E3%83%BC%E3%83%9Ecocoon%E3%81%8C%EF%BC%92%E3%81%A4%E3%81%82%E3%82%8B%EF%BC%81/

解決までの経緯

ググる（検索する）

まずは人類の集合知、何でも知ってるGoogle先生に聞いてみます。

『cocoon ビジュアルエディター吹き出し画像出ない』と検索。
原因として３つのケースが出てきました。

試してみる

ケース①：プラグインが邪魔している

Cocoonで吹き出し画像が表示されない？干渉しているプラグインは停止か削除しよう！

Cocoonを更新すると吹き出し画像が表示されなくなったとき、まずは干渉しているかもしれないプラグインを疑ってみましょう。Lazy Load機能が追加されたあとの不具合は、同じ機能を持っているプラグインを停止、削除することで解決しました。

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

ケース②：旧エディターにすれば出てくる

http://niaburo.com/2019/08/10/%E3%80%90wordpress%E3%80%91%E3%80%8Ecocoon%E3%80%8F%E3%81%A7%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97%E6%A9%9F%E8%83%BD%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E5%8E%9F%E5%9B%A0/

ビジュアルエディタに吹き出しが表示されません

タイトル通りなのですが、表示されるのは「段落」と「スタイル」が中心になります。 Wordpressバージョン：4.9.6 PHPバージョン：5.6.21 ブラウザ：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101...

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

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

エディターの表示が変わりました。
最初『・』だったアイコンの外枠だけが出ましたが、画像が見られないのは変わりません。

けどこの画像が見えない表示…どこかで……

リンク切れか？

ケース③：画像が変わったので画像置き換えが必要

新しいアイコンを利用した「吹き出しデモ」を手っ取り早く登録する方法

v0.7.0より、デフォルトの吹き出しアイコンが変わりました。ただ、以前のバージョン既に使っている方は、新しいアイコンを使用したデモ吹き出しは登録されません。新しいアイコンを利用する場合は、以下からダウンロードして登録する必要があります。た

吹き出し用イラストのダウンロード

吹き出しアイコン用のイラストダウンロードページです。

『デフォルトで使われてる画像が変わったから差し替えてね！』というケースです。
以前はいらすとやさんの画像が使用されていたんですね…

余談はさておき、
Cocoonの『吹き出し』ブロックは、あらかじめオリジナルの吹き出しを作って登録しておけるそうで、その時にアイコンの画像を指定することが出来ます。

WordPress画面左のメニューから『Cocoon設定』にカーソル持って行って、その右横に出る『吹き出し』をクリックすると編集画面になります。

どれか１つの吹き出しの「編集」をクリックすると、上の画面になりました。

編集画面上でもアイコン画像がホームページの『リンク切れ』と同じ状態で、表示されていません。

やはり！(｀・ω・´)
画像のフォルダの指定が間違っとる！！

解決方法確定！

原因が分かったので対処していきます。

【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を利用させて頂いている者です。親テーマと子テーマをダウンロードし、子テーマを有効化して使っていますが吹き出しの画像が表示されず、「.」になってしまいます。プラグインは1つずつ無効化してみましたが、変化はありませんでした。その他同様...

頑張って自力で解決出来ましたが、もうCocoonさんの公式コミュニティで解決されておりました…

私の説明で分かりにくかったらこちらも参考になさってください…(´・ω・｀)