サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年3月10日 23:08
●経緯
以前、以下の投稿があり。
https://wp-cocoon.com/community/postid/67684/
同じ状況のブログを見付け。
私はInvisible reCaptchaを使っておらず、ヒアリングしただけなので、情報が足りないかと思います。
その点は申し訳なく。
ただ、情報共有として投稿させて頂きます。
●現象
Invisible reCaptchaを使用。
[Cocoon設定]→[コメント]→コメント入力欄表示「ボタンで切り替え」
この時、reCapthaのバッジが半分で切れる。「常に表示」だと正しく表示される。
Contact Form 7のページは問題なく表示されている。
●差異
前回、気付かなかったのですが、reCaptchaのclassに差異がありました。
classのrc-anchor-invisible-textに、smalltextが付くか否か。
付く場合、バッジマークが途切れず。
●気になった点
コメント欄を非表示にする際、以下となっている。
#respond {
display: none;
}
この時、フレーム内のreCaptchaに関連するHTMLタグが無い。
これが災いするの？visibility:hiddenだと問題ないのでは？
これが災いするの？visibility:hiddenだと問題ないのでは？
わいひら and Yamachan11 reacted
2023年3月11日 21:48
以前に書いたように 3 択だと思います。
- コメント入力欄を「常に表示」にする。※「ボタンで表示切り替え」でバッジの右端が切れるのは、コメント入力欄が display: none で非表示になっているため。非表示のところに <iframe> を追加するのは無理があります。
- 「バッジ位置」を「右下」にする。※「左下」もインラインのバッジのため不可。
- バッジを非表示にし、代わりとなるテキストを表示する。
visibility: hidden では、「コメントを書き込む」の下に余白が生まれてしまいます。
わいひら reacted
Topic starter
2023年3月11日 22:18
●根本原因
- visibility:hidden
要素はあるが見えない状態。 - display:none
要素も取得されず、完全にその場に無い。
結果、smalltextの付加されず、マークが途切れる結果となる。
Topic starter
2023年3月12日 03:39
少し案を考えてみました、汚いですが。
●対策案
display:noneを止める。
高さをゼロにし、はみ出た部分を消す。
#respond {
height:0;
overflow:clip;
}
クリックした時、高さを100%に変更する。
$('#respond').css('height','100%');
わいひら reacted
Topic starter
2023年3月12日 13:22
私の環境では2.5.7.12を修正し確認しました、問題なく表示されました。
[投稿]→コメント入力欄表示「ボタンで表示切り替え」
●修正箇所
上記の通り以下の2ファイルを修正。
- css-custom.php
- javascript.js
Invisible reCaptchaのバッジのカスタムCSSで付くはずのclass=smalltextを入力したが反映されません...
.rc-anchor-invisible-text {
font-size: 12px;
padding: 0 10px;
line-height: 16px;
white-space: normal;
}
わいひら reacted
Topic starter
2023年3月12日 14:45
Invisible reCaptchaのバッジのカスタムCSS
単にテーマにCSSが追加されるだけで、iframe内に反映させるものではなく...苦笑
2023年3月12日 14:52
幅の問題はなくなりますが、高さの問題を解決できません。
試したことは、以下のとおりです。
子テーマの style.css に CSS を書きました。
#respond {
display: block;
height: 0;
overflow: clip;
visibility: hidden;
}
※ visibility: hidden は必要です。height: 0 だけではフォーカスが当たります。
親テーマの javascript.js を変更しました。
$('#comment-reply-btn, .comment-reply-link').click(function () {
$('#comment-reply-btn').slideUp();
const respond = document.getElementById('respond');
respond.style.height = '100%';
respond.style.visibility = 'visible';
$('#respond').slideDown();
});
その結果、reCAPTCHA ロゴの下が切れています。これは visibility: hidden を指定しなかった時も同様です。
Invisible reCaptchaのバッジのカスタムCSSで付くはずのclass=smalltextを入力したが反映されません...
iframe の中は変更できません。
This post was modified 2年前 by Akira
2023年3月12日 15:24
もし、何かしら変更するのなら、position: absolute を使えば上手くいくと思います。
例えば、子テーマの style.css に CSS を書きます。
#respond {
display: block;
inset: 0 auto auto 0;
pointer-events: none;
position: absolute;
visibility: hidden;
}
親テーマの javascript.js を変更します。
$('#comment-reply-btn, .comment-reply-link').click(function () {
$('#comment-reply-btn').slideUp();
const respond = document.getElementById('respond');
const styles = { pointerEvents: 'auto', position: 'relative', visibility: 'visible' };
Object.entries(styles).forEach(([key, value]) => {
respond.style[key] = value;
});
$('#respond').slideDown();
});
ここまでする必要はあるのか？との疑問は感じます。
This post was modified 2年前 by Akira
Topic starter
2023年3月12日 15:28
Topic starter
2023年3月12日 15:47
overflow: clip;
影が見切れるの解除漏れですね。
根本の問題と対応案が提示され、前回より進展し良かったです。
ありがとうございます。
＞わいひらさん
対応の判断をお願いします。
わいひら reacted
2023年3月13日 19:52
これChromeでないとダメなんですね。
Firefoxだと言われている状態になりませんでした。どうりで話が噛み合いませんでした。
Akiraさんの方法で修正しておきました。
https://github.com/xserver-inc/cocoon/commit/10a70b84b44c85c127dc65d263bbb4c044d38f9c
Topic starter
2023年3月13日 20:29
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.7.16
カテゴリー数：19
タグ数：147
ユーザー数：1
----------------------------------------------
表示される事を確認しました。
本件はクローズとします。
なぜ、本現象が発生するのか？根本の問題が何か？
発生のアルゴリズムを捉え、対策可能か否か見極め、皆でアイデアを出し合い、解決に至り、良かったです。
ご苦労様でした。
わいひら reacted
2023年3月13日 22:33
いい加減に書いていたので、以下の部分を修正です。
- visibility: hidden のため pointer-events: none は不要
- position は relative ではなく static に戻すのが無難のはず
- 初期の inset は auto でなければいいため 0 にすれば CSS が少なくて済む
- inset は auto に戻すのが無難のはず
tmp/css-custom.php をこうして…
#respond {
inset: 0;
position: absolute;
visibility: hidden;
}
javascript.js をこうするのがいいかもしれません。
$('#comment-reply-btn, .comment-reply-link').click(function () {
$('#comment-reply-btn').slideUp();
const respond = document.getElementById('respond');
const styles = { inset: 'auto', position: 'static', visibility: 'visible' };
Object.entries(styles).forEach(([key, value]) => {
respond.style[key] = value;
});
$('#respond').slideDown();
});
また、「コメントを書き込む」と「返信」をクリックしての動作確認しかしていません。Cocoon 設定項目やスキンなどは一切確認していません。
わいひら reacted
2023年3月13日 23:33
ご確認いただきありがとうございます。
親テーマの方も修正し動作確認しました。
おそらくCocoon設定やスキンで影響の出ない部分とは認識しているのですが、問題が報告された場合は一旦元に戻すか追加修正させていただくかもしれません。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。