Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

吹き出しと囲み枠について質問
 
共有:
通知
すべてクリア

[解決済] 吹き出しと囲み枠について質問

28 投稿
3 ユーザー
7 Reactions
664 表示
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

不具合・カスタマイズ対象ページのURL:編集ページ

相談内容:編集のページで吹き出しや、囲み枠が表記されなくなってしまった(プレビューするときちんと出ます)

そのまま文字を入力することもできるのですが、分かりづらいため吹き出しの枠を表示させるようにしたいです。昨日までは出来ていたと思うのですが、できなくなってしまいました。設定をいじってしまったのかもしれません。

恐れ入りますが、解決方法ありますでしょうか。

不具合の発生手順:記事を編集し、吹き出しをクリックして追加しようとするとアイコン画像が大きく表示され、吹き出しの文字を入力する部分の枠が出なくなってしまった

解決のために試したこと:プラグインのオフ

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

----------------------------------------------
サイト名:さらさらとBL沼
サイトURL: https://sarasarabl.com
ホームURL: https://sarasarabl.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-fuwari-ebicha/style.css
WordPressバージョン:6.1.1
PHPバージョン:7.4.33
ブラウザ:Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Mobile/15E148 Safari/604.1
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:2.5.3
カテゴリ数:2
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.6.1
Akismet Anti-Spam 5.0.1
ConoHa WING コントロールパネルプラグイン 1.2
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.6.4
EWWW Image Optimizer 6.9.2
Rinker 1.9.12
SiteGuard WP Plugin 1.7.3
XML Sitemap & Google News 5.3.3
----------------------------------------------

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

確認してみましたが、僕の環境ではスタイルが表示されているようです。
sara2saraさんが添付された画像の公開ページの吹き出しスタイルは表示されていますか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

私の環境でも再現しないですね。

どういう方法・手順等で、再現できるか分かると助かります。
(以下のような手順では再現しないんですよね)

 
デベロッパーツールだから?
(スマホ実機でも、後(明日?)で確認してみます、Androidですが)

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

Androidスマホ実機でも、再現しませんでした。


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

わいひら様

ご返信ありがとうございます。

公開すると、吹き出しが表示されました。

2日前くらいに吹き出しを作成したときは、mk2様に添付頂いているの手順で編集ページでも公開ページと同じように表示されておりました…。

 

 

 


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

ご返信ありがとうございます。

手順ですが、貼り付け頂いた動画と同じ手順で

吹き出しを選択しております。

画像も貼り付けますが、分かりづらいようでしたら申し訳ありません…。

 

+マークをクリックし、

吹き出しのマークをクリックしております。

この投稿は2年前 2回ずつsara2saraに変更されました

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

PCでも、同じ現象が起こるということですね。

ご利用のPCは、Windowsでよろしいでしょうか。
ブラウザはChromeでしょうか。

そうであればですが。

吹き出し画像に、マウスを重ねて、右クリックしてみてください。
開いたメニューの1番下に、「検証」とあるはずですので、それを左クリックして、開いた画面のキャプチャ画像が欲しいです。

スマホで撮るのではなく、キャプチャして欲しいです。
(スマホで言えば、スクリーンショットのこと)

以下の手順です。
https://wp-cocoon.com/community/postid/50624/

 

管理画面内のことは、外部からは調べることが難しいです。
そのため、操作等はsara2saraさんにお願いしないと、調査・確認も難しいです。
ご協力いただければと思います。
(場所が違う、もっとこっち等、やりとりが増えるかもしれませんが、ご協力いただければと)


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

ご返信ありがとうございます。

PCでも試しにやってみたところでした。

Windowsでchromeです。

 

ご指示いだいたキャプチャ、

こちらで良いでしょうか?

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

もう少し広い範囲が見たいです。
イメージは以下のような感じです。

 
吹き出し画像の部分が、赤矢印の部分です。
 
その少し下に「div class="speech-balloon"」という場所があるはずです。
(青矢印部分)
 
その「speech-balloon」の行をクリックした時に、青枠部分はどういう感じでしょうか。
 
青枠部分は、下にまだ続くと思いますので、2~3スクロール画面分くらいの画像が欲しいところです。

   
わいひら reacted
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

3スクロールし、撮ってみました。

恐れ入りますが、ご確認いただけますでしょうか。

 

 


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

2つ目


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

3つ目


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

「Cocoon設定」-「エディタ」-「エディタースタイル」を、ご確認いただけますでしょうか。

エディターにテーマスタイルを反映させる」のチェックが外れているようでしたら、チェックを入れて、保存してみてください。


   
わいひら reacted
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

ご返信ありがとうございます。

チェック入っておりました。

念のため一度外して、もう一度チェックしなおしてみましたが、

変わらずでした。何度も申し訳ございません。

 

 


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

すみません、全く関係ないかもしれないのですが、

編集中の記事に「以下のバージョンよりも新しい自動保存された投稿があります。」

という表記がありクリックすると先ほど教えていただいた吹き出し画像の「検証」の時のような

式が出てきたのですが、何か関係ありますでしょうか??

念のためお伝えさせて頂きました。


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

コードのようなものがありました


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

その投稿の下に、「吹き出し」ブロックを追加していただけますでしょうか。

今ある「吹き出し」はそのままで、その下に追加してみてください。

新規追加した「吹き出し」の表示はどんな感じでしょうか。


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

追加しました。

画像を添付いたします。

よろしくお願いいたします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

2点ほど。

お手数ですが、再度「Cocoon設定」の先ほど「エディタスタイル」の場所に、チェックが入っているか、ご確認いただけますでしょうか。

チェックが入っているようであれば、そのまま何も変更せずに、「変更をまとめて保存」を押してみてください。

チェックが入っていなければ、チェックして「変更をまとめて保存」してください。

コードエディタに切り替えて表示されるソースを、すべてフォーラムに貼り付けていただけますでしょうか。

 

【追記】

②については、テキストファイルに貼り付けて、添付いただけますでしょうか。


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

ご返信ありがとうございます。

①対応いたしました

 

②貼り付けます

<!-- wp:cocoon-blocks/balloon-ex-box-1 {"index":0,"id":"1","icon":"https://sarasarabl.com/wp-content/themes/cocoon-master/images/man.png"} -->
<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://sarasarabl.com/wp-content/themes/cocoon-master/images/man.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon"></div></div>
<!-- /wp:cocoon-blocks/balloon-ex-box-1 -->

この投稿は2年前ずつsara2saraに変更されました

   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

「外観」-「テーマ」から、親テーマに切り替えると、状況は変わりますでしょうか。


   
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

 

変えてみたのですが、

残念ながら吹き出しに変化はありませんでした。

何度もありがとうございます。

初期化など試してみた方が早いでしょうか…。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17375
 

念のため以下のファイルでCocoonのアップデートも試してみていただいてよろしいでしょうか。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

編集画面で、本来出るはずのstyleタグが出ていない・・・みたいです。
(細かい話ですが)

sara2saraさんに添付いただいたソースを、私の環境に貼り付けてみると、正しく表示されます。

何が問題なのか・・・、なかなか外部から難しいです。

親テーマに切替ても変化がないということは、親テーマ側に何かあるのかもしれません。

以下の手順で、親テーマをアップデートしていただけますでしょうか。

Cocoonテーマファイルを手動でアップデートする方法
https://wp-cocoon.com/manual-update-of-cocoon-theme/

上記手順に記載のある、GitHubからCocoonをダウンロードして、それを適用してみてください。

なお、バージョンは同じかもしれませんが、そのままアップデートしてください。

 

【追記】

被りました・・・。


   
わいひら reacted
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

わいひら様

mk2様

 

ご返信ありがとうございます。

親テーマを更新し、やはり出来なかったのですが、

色々と設定を見ていたら添付した画像の設定部分に「テーマスタイルの使用」

というものがあり、以前教えて頂いたcocoon設定のエディタスタイルと

文面が似ていたので、押してみましたら、吹き出しが出るようになりました!!!

知らない間にいじってしまったのでしょうか・・・。

 

何度も親切に対応してくださり、ありがとうございました。

無事に解決し、ほっとしました。

感謝申し上げます。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

sara2saraさん

良かったです。

デベロッパーツールでご確認いただいた時に、テーマスタイルのことは疑ったのですが・・・。

「Cocoon設定」-「エディター」の方だと思っていました。

こちら側にも、同じ?設定があったとは・・・。

只今スマホなもので、後で確認してみます。

 

解決して何よりです。

 


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

うーん、これはちょっと戸惑いますね。

「Cocoon設定」-「エディタースタイル」と。

 
Gutenbergの「設定」-「テーマスタイルの使用」。
 
どちらも同じものを指しているっぽいです。
 
そして、どちらか一方でも「無効」になっていると、テーマスタイルがあたりません。
(つまり、両方「有効」でないとあたらない。)
 
「Twenty Twenty-One」「Twenty Twenty-Three」を確認しましたが、同じく「テーマスタイルの使用」はありましたので、WordPress標準の機能なんですね。
 
 
「Cocoon設定」の方は、「旧エディター設定」にしても良いかもしれないと思いました。
(Gutenbergの方は、WordPressに任せる)
 
そうしてしまうと、Cocoonに馴染みのある方は戸惑ってしまうかも・・・?
ただ、そんなに設定を変更するものでもなさそうには思います。
 
今回、こういうことがあると分かりましたので、覚えておこうと思います。
 
 
Gutenbergの方は、気づいていませんでした。
 
sara2saraさんには、何度もお手間をとらせてしまい、申し訳ないです。
 

   
わいひら reacted
(@sara2sara)
Active Member Registered
結合: 2年前
投稿: 15
トピックスターター  

mk2様

 

今回のことで色々と勉強させていただきました。

一人で悩んでるときは全くわかりませんでしたので…

とても助かりました。

また何かあればよろしくお願いいたします。


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました