サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年6月21日 14:34
不具合・カスタマイズ対象ページのURL： https://radiological.site/archives/%e7%ac%ac71%e5%9b%9e%e8%a8%ba%e7%99%82%e6%94%be%e5%b0%84%e7%b7%9a%e6%8a%80%e5%b8%ab%e5%9b%bd%e5%ae%b6%e8%a9%a6%e9%a8%93-%e5%8d%88%e5%89%8d-1-2.html
相談内容：
上記のようなページで、JSが動作しなくなりました
各記事のカスタムJavaScriptに以下のコードを書いております
$(function(){
$('.btn').on('click', function(event){
event.preventDefault();
$(this).toggleClass('active');
if($(this).hasClass('active')){
var text = $(this).data('text-clicked');
} else {
var text = $(this).data('text-default');
}
$(this).html(text);
});
});
記事HTMLには下記のようなコードを書いております
<!--<a class="btn" data-text-default="正答" data-text-clicked="4">正答</a>-->
以前まではPCでもスマホでも「正答」と書かれたボタンを押すと「2」という文字列が表示されていたのですが、ここ数日で動作しなくなっておりました（正確な日は不明
実は去年にも同様のトピックを立てさせていただき、その時はヘッド用コードのスクリプトミスがあり、ご指摘頂いて解決させて頂きました
今回も前回同様かと思い、こちらでも見直したのですが、原因が見当たらず、改めてご相談させて頂きました
よろしくお願い致します
環境情報：
----------------------------------------------
サイト名：診療放射線技師国家試験 対策ノート
サイトURL： https://radiological.site
ホームURL： https://radiological.site
コンテンツ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
WordPressバージョン：6.0.1
PHPバージョン：7.4.30
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.4.7
カテゴリ数：26
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.6
style.cssサイズ：3871バイト
functions.phpサイズ：388バイト
----------------------------------------------
Gutenberg：0
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：1
ホームイメージ：/wp-content/uploads/2019/03/技師アイコン.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
BackWPup 3.10.0
Category Order and Taxonomy Terms Order 1.6.1
Customizer Export/Import 0.9.4
Edit Author Slug 1.8.4
EWWW Image Optimizer 6.7.0
Google XML Sitemaps 4.1.5
Limit Login Attempts Reloaded 2.25.3
MathJax-LaTeX 1.3.11
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.6.1
Uji Countdown 2.2
WP Content Copy Protection & No Right Click 3.5.1
----------------------------------------------
2023年6月21日 15:57
sato3さん
動作していると思います。
色が真っ白なんだと思います。
ただ、HTMLやCSS等圧縮が掛かっており、何が当たっているのか分からないです。（親テーマぽいですが）
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
フォーラム上部の案内にありますように、お問い合わせ時には高速化設定の無効化をお願い致します。
書き込みの前に以下の3点をご確認ください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラムマナー・ルールにご協力をお願い致します。
【追記】
すみません、Akiraさんと被ってしまいました。
トピックスターター 2023年6月21日 16:36
ご回答ありがとうございます
高速化を無効致しました
失礼致しました
トピックスターター 2023年6月21日 16:36
連投で恐縮ですが、突然色指定が変更された理由などはわかりますでしょうか
当方では特に弄った記憶がないのですが……
トピックスターター 2023年6月21日 16:51
立て続けに恐縮です
追加CSSにて色指定をボタンと文字に対して行ったところ、見えるようになったのですが、マウスオンの状態で消えていることが確認されてしまいました
トピックスターター 2023年6月21日 17:00
上記を含めて追加CSSでホバーの動作も色指定で分からなくしてしまいましたので、疑似的に解決させて頂きました
今回のようなことが起きたのはAkira様のおっしゃるようにbuttonではなくaによって書いている弊害なのでしょうか
ご参考までにお聞かせいただけると幸いです
2023年6月21日 19:01
@sato3 さん
親テーマのバージョンが古いですね。また、2 週間前に親テーマに修正が入っています。
親テーマを最新バージョンにされるとどうなるでしょうか？
buttonではなくaによって書いている弊害なのでしょうか
<button> がいいと言ったのは、アクセシビリティの観点からです。ページを表示して tab キーを押し続けるとお分かりになると思います。「正答」にフォーカスが当たりません。つまり、スクリーンリーダーなどの支援技術をお使いの方は、「正答」をクリックできないかもしれません。
そのため、<button type="button"> がいいです。どうしても <a> がいい場合は、 <a role="button" tabindex="0"> とするのがいいと思います。
※ href 属性がない場合にのみ <a> に role="button" が書けます。
トピックスターター 2023年6月21日 20:34
ご丁寧な回答ありがとうございます
今気づいたのですが、上記の環境情報に誤りがありました
---------------------------------------------- テーマ名：Cocoon バージョン：2.6.1.2 カテゴリー数：28 タグ数：1 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.0.6 style.cssサイズ：3871バイト functions.phpサイズ：679バイト ----------------------------------------------
でしたので、最新版になっているかと思います
なので、前回の不具合更新に伴い、私の環境では新たな不具合が起きたという認識でしょうか
<button> の件に関しては、次回の記事より参考させて頂きます
大変参考になりました
2023年6月21日 22:11
@sato3 さん
ボタンはどのようにしてお作りになったのでしょうか？
私のテスト環境でボタンブロックを使った場合、このような HTML になります。
<div class="wp-block-cocoon-blocks-button-1 button-block"> <a href="" class="btn" target="_self">ボタン</a> </div>
対して、sato3 さんのサイトのボタンの HTML は、<div> で囲まれていません。
<p> <a target="_self " class="btn " data-text-default="正答 " data-text-clicked="2 ">正答</a> </p>
<div> の class の button-block の背景色は、初期値が #333 です。その <div> がないために、ボタンの背景色が #fff になっています。また、<a> の class の btn の文字色は、初期値が #fff です。#fff の背景色に #fff の文字色ではボタンが見えないですね。
この投稿は2年前ずつAkiraに変更されました
2023年6月22日 06:34
sato3さんは、クラシックエディタをご利用みたいです。
クラシックエディタの「ボタン(小)」だと、以下みたいです。
（以下は、アンバーです。）
<p><a class="btn btn-amber">ボタン</a></p>
sato3さんは、以下のような感じですから。
<p> <a target="_self " class="btn " data-text-default="正答 " data-text-clicked="2 ">正答</a> </p>
classには"btn"しか残していませんから、背景色はない状態です。
そして、ボタンの文字色は、テーマデフォルトでは白です。
文字色と背景色は、上記のことから見えなくなると思います。
（何もカスタマイズがなければ）
残りは、ボーダーですが、テーマデフォルトでは、sato3さんのサイトは「--cocoon-custom-border-color」が適用されて、#cccなのですが・・・。
（追加CSSがないとして考えると）
アップデート後のボタンが見えなかった時がどんな状態だったのか、ちょっと記憶にないです。
それと、アップデート前の状態を確認するためには、アップデート前のCocoonのバージョンが分かると良い気はします。
（以前の状態をこちらで確認できるので）
2023年6月22日 07:28
ボタンに関しては、もう1つ不具合対応が。
ボタンブロックにカスタム色が反映されない不具合修正
https://github.com/xserver-inc/cocoon/commit/8e51bcf9473427bb0f24091d8c7709ef664fee03
これらのことがありますので、以前の親テーマのバージョンを教えていただきたいです。
（私は今確認できないですが、後程なら）
2023年6月22日 09:29
ローカル環境が使える状態になりましたので、いくつかのバージョンで確認を行いました。
sato3さんのサイトのボタンの以下を、クラシックエディタに貼り付けました。
<p> <a class="btn" target="_self" data-text-default="正答" data-text-clicked="2">正答</a> </p>
その下には、テーマデフォルトのボタン（レッド(小)）を作りました。
①
まずは、現状のバージョン。
「Cocoon 2.6.1.2」です。
CSSは、何も当てていません。
もし、現状のカスタムCSSの以下が有効であったならば、sato3さんのボタンは、まったく見えないと思います。
.btn {
font-size: 20px;
border-radius: 40px;
border: 4px solid transparent;
}
②
続いては、2つのボタンの不具合対応が入る前のバージョン。
「Cocoon 2.6.0」です。
この状態だと、文字が見えます。
ただ、テーマデフォルトのボタンを見ていただくと。
- 文字色が黒く、見づらい
- 薄いグレーの枠線がある
これらは、不具合のある状態でした。
③
どのバージョンを確認するのが適切かは分からないのですが、少し前のバージョンで確認しました。
「Cocoon 2.5.5」です。
「Cocoon 2.5.5」です。
これが、本来のボタンだったのだと思います。
おそらく、sato3が投稿を更新なさった時は、②の状態だったのではないかと思います。
しかし、それは不具合がある状態だった。
そして、不具合を解消したら、ボタンが見えなくなってしまった。
そういう感じではないかと思われます。
トピックスターター 2023年6月22日 09:41
Akira様、ｍｋ2様、ご丁寧な回答ありがとうございます
直近でCSSを弄った記憶はないのですが、前回の投稿のときに触っているかもしれません（2022/8）
クラシックエディターは使用していますが、今回問題になっているbtnに関してはテキストエディターで手打ちして作ったものです
他のサイトのものをアレンジして流用してありますので、色々不具合も出ているのかと……
ご迷惑をお掛けしております
また、以前の親テーマのバージョンに関して、知識不足で申し訳ないのですが、確認の方法がわかりません
追記：
ご確認ありがとうございます
このボタンを導入し始めて、私が正常に動作していると認識していたのは
③「Cocoon 2.5.5」の状態です
その後、最近になって②「Cocoon 2.6.0」の状態になり、違和感を感じ始めて、①「Cocoon 2.6.1.2」の現在の状況になりました
なので、おっしゃる通り、③「Cocoon 2.5.5」の状態を思っていたが、不具合含めたいくつかの更新で、現在の状況に落ち着いたのだと考えます
この投稿は2年前ずつsato3に変更されました
2023年6月22日 09:43
sato3さん
私の1つ前の返信をご覧ください。
https://wp-cocoon.com/community/postid/71648/
画像を途中に数枚入れる都合上、何回か再編集しております。
今、全量書いてありますので、ご確認いただければ、今回の経緯がこんな感じだったのかなということをお分かりいただけるのではないかと思います。
（推測ではありますけれど）
わいひら reacted
トピックスターター 2023年6月22日 09:55
追記：
ご確認ありがとうございます
このボタンを導入し始めて、私が正常に動作していると認識していたのは
③「Cocoon 2.5.5」の状態です
その後、最近になって②「Cocoon 2.6.0」の状態になり、違和感を感じ始めて、①「Cocoon 2.6.1.2」の現在の状況になりました
なので、おっしゃる通り、③「Cocoon 2.5.5」の状態を思っていたが、不具合含めたいくつかの更新で、現在の状況に落ち着いたのだと考えます
2023年6月22日 09:59
わいひらさん
クラシックエディタの「ボタン」は、必ずクラスが「btn btn-xxxxx」のようになり、背景色のためのclassがあるかと思います。
（「スタイル」のプルダウンから入力すると、背景色のclassは必ずある）
しかし、sato3さんは、背景色のclassを削除なさっており、今回の事象になった様子です。
「Cocoon 2.5.5」を今回確認してみると、「btn」だけでも背景色がありますね。（#32373c）
現状では「btn」だけにすると、以下のように「inherit」になって色がない？状態みたいです。
「スタイル」のプルダウンから入力する分には、必ず色のclassがある訳ですが・・・。
「2.5.5」と比べると、現状とは違うということは言えてしまいます。
「2.5.5」と比べると、現状とは違うということは言えてしまいます。
ここをどう捉えるか・・・でしょうか。
（背景色のclassは、個別カスタマイズで削除したものであり、そこは個別に対応・・・とも考えられる気はしますけれど。以前とは違うとも言えるとも思いますので）
2023年6月22日 20:12
現状では「btn」だけにすると、以下のように「inherit」になって色がない？状態みたいです。
mk2さんが書かれたようにサブ値を設定することで対応してみました。
mk2さんありがとうございます！
ボーダー色は灰色（本来は透明）が入ってしまいますが本来.btnクラスのみで使うようなケースはあまりないためそのままとします。
というかブロックエディターのカスタム色に対応しつつ変更する方法が今のところ思いついてません。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。