Cocoonの「吹き出し」アイコン画像が表示されない時の対処法

Cocoonの「吹き出し」は、使っていますか?

Webページを作成する上で、表現の幅を広げてくれる機能ですよね。ブログ記事の内容に合わせて、効果的に取り入れると見た目も楽しめます。

その便利な機能の1つ「吹き出し」ですが、今回はアイコン画像が表示されない時の対処法ついて解説していきます。

目次

「吹き出し」のアイコン画像が表示されない!?

この記事を書いた人

itolico(いとりこ)| itolico log 管理人

  1. ブロガー歴10年越え&Webライティング6年目
  2. Twitter:1,000フォロワー(5か月で達成)
  3. HTMLの簡単なカスタマイズも独学でマスター

WordPressに登録してすぐに「吹き出し」をテストしてみました。

ところが「吹き出し」のアイコン画像が表示されないという事態に見舞われました。いろいろ調べてみると同じような実例があったので共有できたらと思います。

itolico

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

…だよね。

ちなみに私は2021年8月の初旬に ConoHa WING 経由で登録しました。

→ ConoHa WINGは月初がお得!丸々1か月無料で使えるからタイミングをみて登録しよう。私も使っている ConoHa WING のお申し込みは こちら

▼ブログ運営に必須なプラグインを網羅しています。プラグインの導入に悩んでいる方やWordPress初心者さんは、ぜひ一読くださいね。

WordPress歴50日の私がCocoonに導入したプラグイン16選

「吹き出し」の表示・表示されないが混在

ダッシュボードの「Cocoon設定」→「吹き出し」をクリックしてみます。

ご覧の通り、吹き出し一覧も↑こちらの画像のようになりました。

表示するアイコン画像と、表示されないアイコン画像があり、表示・非表示が混在していたという感じですね。

表示されないの「アイコン画像」を表示させる対処法

※まずはバックアップを取った上で、ご自身の責任とご判断の下お試しくださいね。

アイコン画像を表示させる方法は、「吹き出し」のアイコン画像がアップロードされている場所(階層)を指定してあげれば良いということがわかりました。

手順は次の通りです。

STEP
ダッシュボードの「Cocoon設定」→「吹き出し」をクリック
STEP
「吹き出し一覧」→非表示のアイコン横の「編集」をクリック
STEP
「アイコン画像」URL内のcocoonの後に「-master(ハイフンmaster)」を追加→「保存」をクリック

アイコン画像がある場所(階層)は、テーマ「Cocoon」ではなく「Cocoon-master」内にあるということです。

「吹き出し」の使い方

グーテンベルクの場合

ブロックエディター(Gutenberg)は使えるようになると、いろいろな設定ができて便利です。

STEP
「ブロックを追加」→「吹き出し」をクリック
STEP
吹き出し部分を編集して完了

オリジナルの「吹き出し」を設定してみよう

オリジナルの「吹き出し」を設定することができます。

一度設定しておくと必要な時に繰り返し使えて便利ですよね。

itolico

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

左右にわけて設定しておくと、会話風な表現ができちゃうんだ。

オリジナルの「吹き出し」の設定方法

あらかじめオリジナルアイコン画像を用意しておくとスムーズに設定ができます。

STEP
「Cocoon設定」→「吹き出し」をクリック
STEP
新規追加をクリック→お好みで設定→「保存」をクリック

画像のサイズは、160px以上で160px~200pxのスクエア(正方形)が良さそうですよ。ちなみに私は 200×200の画像を使っています。

スポンサーリンク
\今日のランキングは何位でしょうか/
ブログランキング・にほんブログ村へにほんブログ村


WordPressランキング

まとめ

「吹き出し」のアイコン画像が表示されない時の対処法について解説してきました。

プラグインを導入しなくても簡単にすぐ使うことができる、Cocoonの「吹き出し」機能は便利ですね。

さまざまなキャラクターを設定して、ついつい遊んでしまいそうです。今後、何かアピールしたい時などに取り入れてみたり、ストーリー性があると楽しめそうですね。ではまた。

おすすめ記事

▼ブログが工事中の時は落ち着いて作業をしていきたいですよね。ワードプレスでも「一時非表示」の設定が可能ですよ。

▼セキュリティ系プラグインからお役立ちのプラグインを導入していきます。

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

スポンサーリンク
吹き出しのアイコン画像

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる