人気キーワード

Cocoonテーマで吹き出しがうまく表示されない!WPをサブディレクトリにインストールしてませんか?

人気の無料WPテーマ、Cocoon。使っている方もたくさんおられると思います。

機能が高い上に、SEO対策もバッチリでシンプルでカスタマイズで自分好みに作り替えられる、よく考え抜かれて作られています。

フォーラムを充実していて、WP初心者でも、作成者のわいひらさんは返答も気軽にしてくれてるし、他の利用者の方も返答してくれていて、本当に参考になっています。Cocoonは人気で、多数の方が利用していてフォーラムもいつも賑わっています。

大抵のエラーやカスタマイズ方法は、フォーラムか投稿記事に書かれていますが、たまに、自分の希望のカスタマイズ方法が載っていなくて、フォーラム以外でも、Google先生に聞いたりしつつ、いろいろ探し回ったりしますが。

先日、吹き出しの顔画面がうまく表示されなくて、困っていて、なんでかな~??困ったな~?と思ってて、でも、フォーラムにもGoogle先生に聞いてみても、全く分からなかったのですが、結局自力で解決したことを今回書いてみます。

この記事を読むとできること:WPをサブディレクトリにインストールしていても、「吹き出し」のキャラ画像が、表示されるようになる

画像で見てみるエラー例・成功例

エラー例
 
あれ?なんか変?キャラ画像が出てないよ!

 

成功例
 
うまく表示されてるみたいね!

 

原因は?

WordPressをインストールする際、

または
https://sample.com/wp
とwpサブディレクトリにインストールした場合、吹き出しの画像は表示されません。

画像リンクを確認する方法

テキストエディタに変えて、コードをみてみます。


調べてみれば、単純な理由だったんですけど、実は画像のリンクが間違っていたんです。wpというサブディレクトリに入れてしまったがために、画像のリンクが間違っている状態になってしまったということなんです。

そっかー!考えてみれば単純なことだったんだね!さっそく変更してみよう♪

解決法

この場合、画像のリンクを正しく書き直してあげれば良いわけですが、『Cocoon設定』から『吹き出し』を選んで、吹き出しキャラ全員の画像リンクを正しく入力しなければなりません。

えーーーー!!10つも!面倒だね。。。

キャラ画像出てこないのも、不便だし、やっぱり変更しておいた方が良いね。ちょっと面倒だけど、仕方ない

画像リンクを書き換える

デフォルトでは https://sample.com/wp-content/themes/cocoon-master/images/doya-woman.png になっているため、画像が表示されません。 これは画像リンクが間違っているためです。

吹き出しキャラは、デフォルトで10つなので、その10つを全部の画像リンクを書き換えます。ちょっと面倒だし、単純作業ですが、5分程度で終わります。

書き換えは、ただ『アイコン画像 』の欄の中の https://sample.com/ の後に、wp/と書き加えるだけです。

こんな感じ↓
https://sample.com/wp/wp-content/themes/cocoon-master/images/doya-woman.png

【書き換え前】https://sample.com/wp-content/themes/cocoon-master/images/doya-woman.png
【書き換え後】https://sample.com/wp/wp-content/themes/cocoon-master/images/doya-woman.png

キャラ画像が表示されました

おおーー!!ちゃんと表示されてたよ!
良かったね、解決じゃん♪

投稿ページでキャラ画像が出てくるか、試してみます

吹き出しを挿入してみます。

成功です!

キャラ画像がうまく表示されています。

うんうん!良かった良かった!!

まとめ

ある程度のHTMLのコードが分からないと、こういうトラブルに対処できないので、初心者でも基本のHTMLコードは勉強しておいた方が良いです。テキストエディタでコードを確認すると、エラー箇所が分かるので、こういうエラーが出た場合は、自分で対応できます。

単純なことのようですが、これを解決するのに、私は1時間くらいは、ウロウロさ迷っていたので、同じようなパターンにハマって困っている方もいるかもしれないので、記事にしてみました。どなたかの参考になれば、うれしいです。

私は、Word Press初心者で、つい3ヶ月前からWPを使い始め、2ヶ月前にブログをオープンしました。同時進行で、他ブログも作っているので、なかなか一つのブログに集中できないことはありますが、Cocoon、素晴らしい!の一言です。ちなみに他ブログも全てCocoonで作っています。

今後、テーマ変更することもあるかもしれませんが、機能も充実していて、Cocoonは頻繁にアップデートされているので、安心です。

⇒Cocoonテーマを見てみる>https://wp-cocoon.com/

iPhone充電ケーブルおすすめランキング

クリックでブログ内解説に飛びます⇩ 画像(クリックでAmazonに飛びます⇩) 価格
※調査時より価格変動があります
耐久性 充電速度
1位:Apple純正iPhone充電ケーブル 1.0m – 2,668円税込

0.5m – 2,668円税込

2位:Anker iPhone 充電ケーブル PowerLine II ライトニングケーブル 940円
3位:Anker PowerLine II ライトニングUSBケーブル 1,390円
4位:オウルテック・2年保証超タフ充電ケーブル 1,480円
5位:オウルテック巻き取り式iPhone充電ライトニングケーブル 1,780円
6位・ActionPie iPhone 充電ケーブル 【5本セット 1/1/2/2/3M】 1,199円
7位・Amazonベーシック ライトニングケーブル ダブルナイロン編組 USB MFi認証済 iPhone充電ケーブル 974円
Cocoonテーマで吹き出しがうまく表示されない!WPをサブディレクトリにインストールしてませんか?
最新情報をチェックしよう!
Amazonで人気アイテムを探す
Amazonで人気アイテムを探す