サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年6月15日 13:32
はじめまして。
今回、下記の内容についてお聞きしたく書き込みさせて頂きました。
▶不具合・カスタマイズ対象ページのURL：
▶相談内容：
Cocoonを取り入れており、スキンは「てがきノート(グリーンオレンジ) [作者: ゆうそうと]」さんのを使用しています。
こちらのスキンがとても使い勝手がよいのですが、引用タグを使用して記事を作成したところ、プレビュー画面や投稿後のサイトを見ると、引用タグが消え、ただのボックス表示になってしまいます。
ゆうそうとさんにもご相談し確認して頂きましたが、特に不具合は見つからなかったとのことでした。
そのため、今回こちらでも相談させて頂く参りました。
現在、AdSenseに審査に出していることもあり、引用タグをしっかり使いたいので、何か解決方法があれば教えて頂きたいです。
宜しくお願い致します。
▶不具合の発生手順：
ブログをはじめたばかりで、スキンも使用したばかりなので、発生手順としてはなんとも不明な状態です。
申し訳ありません。
▶解決のために試したこと：
スキン作成者：ゆうそうとさんへ相談。
特に問題はないとの返答がありました。
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：
----------------------------------------------
サイト名：気になる虫めがね
サイトURL： https://interphexblog.com
ホームURL： https://interphexblog.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-tegakinote-green-orange/style.css
WordPressバージョン：6.2.2
PHPバージョン：8.2.7
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.43
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.0.3
カテゴリー数：6
タグ数：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
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Advanced Editor Tools 5.9.0
Broken Link Checker 2.1.0
Contact Form 7 5.7.7
EWWW Image Optimizer 7.0.2
Rinker 1.10.1
SiteGuard WP Plugin 1.7.5
UpdraftPlus - Backup/Restore 1.23.4
WebSub (FKA. PubSubHubbub) 3.1.3
WP Content Copy Protection (Lite) 2.0.5
WP Multibyte Patch 2.9
WP Sitemap Page 1.9.2
XML Sitemap & Google News 5.3.4
----------------------------------------------
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
どうぞ宜しくお願い致します。
2023年6月15日 14:31
●原因
図に示すように、引用ブロックは、背景色を透過度40%として、引用符に重ねている。
この背景色を設定した。
この為、半透明でなくなり、引用符が見えなくなった。
わいひら and manpukusan reacted
2023年6月15日 17:09
manpukusanさん
先に2点ほど。
▶不具合・カスタマイズ対象ページのURL：
上記には、「不具合が起きているページのURL」をご提示ください
トップページに「引用ブロック」はないように思います。
回答側が、クリックしたらそのベージに辿り着けるようにしていただきたく。
回答側が、どこにあるのかを探すのは、厳しいです。
（今回はすぐ見つかりました）
2点目です。
フォーラム上部のガイドラインを必ず、事前にご確認ください。
ガイドラインのリンク先のページには、以下のようにあります。
- コピープロテクト（右クリック禁止）プラグインを利用している場合は無効にしてください
WP Content Copy Protection (Lite) 2.0.5
プラグインが有効なままでは、調査確認の妨げになります。
（だからと言って、できない訳ではないですが、これがあると面倒なんです）
フォーラムガイドラインを遵守願います。
わいひら and manpukusan reacted
2023年6月15日 17:11
スキン「てがきノート(グリーンオレンジ) の引用ブロックの引用符は、背面にあるようです。
chu-yaさんの仰っているように、背景色を透過させることで、引用符が表示されるみたいです。
確認にあたり、以下のページの引用ブロックを確認させていただきました。
（これを「不具合・カスタマイズ対象ページのURL：」に記載していただきたいです）
https://interphexblog.com/shunsudo24tv/
例えばですが・・・。
背景色がない状態だと、引用符は見えています。
しかし、背景色を設定すると、見えなくなってしまいます。
Gutenbergでは、背景色の透過も可能です。
上記のように、「RGB」を選択して、アルファ値（透明度）を変更することで、透過できます。
（「HSL」でもできます）
（「HSL」でもできます）
例えば、透明度70だと以下のような感じです。
透明度を60にすると、以下。
但し、透明度ですから、背景色も薄くなってはしまいます。
わいひら and manpukusan reacted
2023年6月15日 17:34
●現象
プレビュー画面
[Cocoon設定]→[全体]→サイトアイコンフォント「Font Awesome 5」の場合
「デスクトップ」以外にすると、引用符が文字化け表示される。
●原因
Font Awesome 5が当たっていない。
●疑問
Gutenbergエディターのプレビュー「デスクトップ」、編集中、引用符が表示されない。
z-indexの重なりが、反映されていない？原因が不明です。
どう言う仕組みで、そうなるか回答希望です。
Gutenbergエディターのプレビュー「デスクトップ」、編集中、引用符が表示されない。
z-indexの重なりが、反映されていない？原因が不明です。
どう言う仕組みで、そうなるか回答希望です。
わいひら and manpukusan reacted
2023年6月15日 17:54
「デバイスプレビュー」については、既知の問題と思われます。
このスキンだけでなく、Cocoonの他のブロック等でもおきているのではないか・・・と。
（アイコンボックスのアイコン部分を見ていただければと）
ただ、これを機に再度わいひらさんにご確認いただいた方が良いようには思います。
（あれからしばらく経ちますので）
（あれからしばらく経ちますので）
昔、以下のように、「デバイスプレビュー」時には背景色等の話もありましたが、これとは関係ない？
（今は、背景色は反映されているように見えますし）
（今は、背景色は反映されているように見えますし）
背景色等の件は・・・。
事象詳細については、以下から4つくらいまで。
https://wp-cocoon.com/community/postid/61700/
原因については、以下とその1つ下。
https://wp-cocoon.com/community/postid/61854/
わいひら and manpukusan reacted
2023年6月15日 18:21
「てがきノート」の引用符は、確かに「デバイスプレビュー」ではFontAwesome 5があたっておらず、直接的には別件なのかも・・・です。
アイコンボックス等は、FontAwesome 5でも、表示されないみたいです。
この辺りは、再度わいひらさんに確認しておきたいかもです。
（あれから随分経ちますので）
わいひら and manpukusan reacted
2023年6月15日 19:18
manpukusanさん
「デバイスプレビュー」の件で、若干分かりにくいかもしれませんが・・・。
引用タグを使用して記事を作成したところ、プレビュー画面や投稿後のサイトを見ると、引用タグが消え、ただのボックス表示になってしまいます。
上記の「プレビュー」が、「新しいタブでプレビュー」であれば、「デバイスプレビュー」については別件です。
背景色のアルファ値を調整してみてください。
（少なくとも、実際の投稿には反映されます）
アルファ値の設定では意図と異なるということであれば、CSSで何らかの調整が必要かと思います。
（透過の必要があるのはてがきノートの仕様ですのて、それを変えるにはCSS等書いて調整しなくてはならないと思います）
わいひら reacted
Topic starter
2023年6月15日 19:43
@chu-ya さん
@mk2_mk2 さん
お返事頂き有難う御座います！
まず、2点の注意事項のご指摘を有難う御座います。
「不具合が起きているページのURL」を記載しておらず、お手数をおかけし申し訳ありません。
また、コピープロテクトプラグインも無効にしておらず申し訳ありませんでした。
多くの不備があったにも関わらず、いろいろ検証して頂き有難かったです。
今回の原因は、透過性の問題とのこと。
「RGB」を選択して、アルファ値（透明度）を変更することで、透過できます。
（「HSL」でもできます）
自分も試してみたところ、編集画面上には引用タグが表示されなかったのですが、mk2さんの動画のように透過したところ、プレビュー画面には引用タグを確認することができました。
こちら、毎回このような作業が必要になるということなんですね。
さらには、「Font Awesome 5」にすると、引用符が文字化けするんですね。
（自分の設定は「Font Awesome 4」でした）
いくつか、Cocoonの別のスキンを試してみましたが、自分が試した範囲では、引用タグは問題なく表示されていました。
（自分が試したスキンが、たまたま大丈夫だっただけかもしれませんが……）
これを機に、わいひらさんに確認するには、こことは別の場所でご連絡したほうがよいんですかね？
2023年6月15日 19:52
manpukusanさん
分かりづらくて申し訳ないです。
自分も試してみたところ、編集画面上には引用タグが表示されなかったのですが、mk2さんの動画のように透過したところ、プレビュー画面には引用タグを確認することができました。
こちら、毎回このような作業が必要になるということなんですね。
はい、「てがきノート」は、背景色を透過しないと、引用符は見えません。
（背景の背面に引用符があるためです。透過しないと隠れます。）
さらには、「Font Awesome 5」にすると、引用符が文字化けするんですね。
（自分の設定は「Font Awesome 4」でした）
こちらは、デバイスプレビュー（タブレット・モバイル）時の事象で、FontAwesome 4でも5でも起きるものです。
先の通り、「新しいタブでプレビュー」であれば、起きません。
てがきノートの引用は、更に別件もあるようです。(編集画面（デスクトップ）で引用符が表示されない件）
これを機に、わいひらさんに確認するには、こことは別の場所でご連絡したほうがよいんですかね？
いえ、ここに書いてありますので、見てくださると思います。
わいひら and manpukusan reacted
2023年6月16日 18:16
はい、「てがきノート」は、背景色を透過しないと、引用符は見えません。
（背景の背面に引用符があるためです。透過しないと隠れます。）
「てがきノート」スキン全てに対して以下のようなコードを適用しておいても良いのかもしれませんね。
.wp-block-quote {
opacity: 0.99;
}
manpukusan reacted
2023年6月16日 18:17
こちらは、デバイスプレビュー（タブレット・モバイル）時の事象で、FontAwesome 4でも5でも起きるものです。
先の通り、「新しいタブでプレビュー」であれば、起きません。
これ昨日から原因を探っているのですが「モバイル」と「タブレット」状態になった表示エリアのiframeのsrcdocになぜかFont AwesomeのCSSが読み込まれないんですよね…。
色々な読み込み方法を試してみたんですけど結局うまくいかず…。
今日も解決方法を探ってみます。
manpukusan reacted
2023年6月16日 20:11
わいひらさん
「てがきノート」スキン全てに対して以下のようなコードを適用しておいても良いのかもしれませんね。
.wp-block-quote { opacity: 0.99; }
これは、「てがきノート」スキンに追加しても良い気がします。
親テーマのスキンに追記してみました。
その結果、Gutenbergの画面でも、引用符が表示されますね。
（消極的な理由かもしれませんが）
（消極的な理由かもしれませんが）
【FontAwesome 4 背景色なし】
【FontAwesome 4 背景色あり】
【FontAwesome 5 背景色なし】
【FontAwesome 5 背景色あり】
公開ページも、これで問題ないですし。
（ただ、このままだと引用符のはみ出しが・・・。晩御飯ですので、深追いはせず失礼します・・・）
（ただ、このままだと引用符のはみ出しが・・・。晩御飯ですので、深追いはせず失礼します・・・）
Gutenbergについては「FontAwesome 5」の対応は必要だとは思います。
わいひら and manpukusan reacted
2023年6月16日 20:32
ただ、このままだと引用符のはみ出しが
引用符ボックスにbox-shadowで白い縁を付けており。
Gutenberg上のz-indexの重なりの関係がよく分からず。
結果、引用符は、はみ出たように見え。
opacityでの対策は、暫定対策で、根本ではないです。
わいひら and manpukusan reacted
2023年6月16日 20:58
Gutenberg上では、z-indexのマイナス値が反映されないっぽく感じ。
（このスキンだけなのかは確認していません）
暫定であろうとなかろうと、エディタ上で反映された方が良いのではないかと思い、ご提案したまでです。（投稿画面でのこともありましたので）
それを承知した上で、「消極的理由」と書かせていただきました。
ちなみにこれは、FirefoxやEdgeでも起きているようで、ブラウザ起因ではなく、Gutenbergの問題なのかもしれませんが、今のところ良く分かりません。
（晩御飯が・・・そろそろ食べます）
manpukusan and わいひら reacted
2023年6月16日 23:18
うーん、Gutenbergは階層が深すぎて良く分かりません・・・。
もしかして、Stacking contextの問題で、わいひらさんは敢えて「opacity:0.99」と仰った？
（それをはっきりさせるというのか。z-index:0にしても同じですし）
manpukusan reacted
2023年6月16日 23:41
「モバイル」と「タブレット」状態になった表示エリアのiframeのsrcdocになぜかFont AwesomeのCSSが読み込まれないんですよね…。
ちなみに、こちらも良く分からず・・・。
（元々、Gutenbergのこの辺は良く分かりませんけれど）
ダメ元でChatGPTに何回か聞いてみましたが、そうじゃないでしょ・・・という答えばかり。
manpukusan reacted
2023年6月17日 02:31
スキンの927,928行目を以下のようにすると。
Gutenberg上では、以下。
公開された投稿ページでは以下。
Gutenberg上では、どこかでスタックが発生し、z-indexの比較の場所が変わっている？
（良く分からんです。とりあえずはみ出しを許容するか、box-shadowを無くすかでも良い気はしますけど・・・）
（良く分からんです。とりあえずはみ出しを許容するか、box-shadowを無くすかでも良い気はしますけど・・・）
manpukusan and わいひら reacted
2023年6月17日 02:53
かといって、以下に「z-index: 0;」を入れると引用符は見えるようになるのですが、今度は引用符に対してbox-shadowが効かなくなってしまうんですよね。
（新たなスタックを発生させるという意味では、わいひらさんのものと同じ？良く分からんです）
もう寝ます。（こんがらがっていますし）
manpukusan and わいひら reacted
2023年6月17日 22:14
この原因分かりましたか？
今のところまだわかってません。
https://wp-cocoon.com/community/postid/71407/
原因がわかれば多分対応策が練れそうなんですが。
明日は日曜日で時間があるのでまた調べてみます。
manpukusan reacted
2023年6月17日 22:15
Gutenbergについては「FontAwesome 5」の対応は必要だとは思います。
とりあえずこれは先に修正しちゃいますね。
背景色を設定した際の引用符についてはそのついでに調べてみようと思います。
しばしお待ちを。
manpukusan and ｍｋ２ reacted
2023年6月18日 00:26
はい。まずはそれから直そうかと思いこんな感じで修正してみたら僕の環境ではエディタ上でも表示されるようになりました。
https://github.com/xserver-inc/cocoon/commit/83a750b21a7b49bdca26321001198d371d6dd06c
manpukusan reacted
2023年6月18日 00:53
はい、そうなんです。
細かい話なんですが・・・。
以下は公開ページです。
【対応前】
【対応後】
引用符の部分に、box-shadowがきかなくなってしまうんです。
それで以前の返信で、以下のように書いた次第です。
とりあえずはみ出しを許容するか、box-shadowを無くすかでも良い気はしますけど・・・
今日はちょっと、試す時間はないので、私はこのままです。
（明日もないかも）
manpukusan reacted
2023年6月18日 00:59
変更後
z-index:-1を削除したので、引用符が上に重なり。
背景に付けているbox-shadowの白枠部分、引用符が隠れないくなり。
問題は、文章「服の...」上に引用符がに半透明で重なり。
manpukusan reacted
2023年6月18日 01:08
分かりやすいように、対応後のバージョンで、以下のopacityをコメントアウトしました。
【公開ページ】
【Gutenberg】
上記は、昨日も添付した通りです。
そこで「z-index: -1;」を復活させます。
さらに、その上のblockquoteに「opacity:0.99」を加えます。
（「z-index: 0」でも良いです）
さらに、その上のblockquoteに「opacity:0.99」を加えます。
（「z-index: 0」でも良いです）
すると、以下のようになります。
【公開ページ】
【Gutenberg】
上記のように、新たにスタックを発生させると、同じ感じにはなります。
（box-shadowはきかないですけど）
（box-shadowはきかないですけど）
そのことから、Stacking contextの問題で、Gutenbergでは公開ページと同じ基準でz-indexを比較していないのではないかと思った次第です。
（Gutenbergでは、どこかでスタックを発生させる記述があるのかもしれないです、階層が深くて見きれないですが。もちろん、違う原因かもしれないですが良く分かりません）
（Gutenbergでは、どこかでスタックを発生させる記述があるのかもしれないです、階層が深くて見きれないですが。もちろん、違う原因かもしれないですが良く分かりません）
これも、昨日書いた通りです。
私は今日は時間切れですので、この辺で。
（明日もあまり・・・）
（明日もあまり・・・）
わいひら and manpukusan reacted
2023年6月18日 20:03
個人的にはopacity: 0.99;が最も手っ取り早い解決方法のように見えます。
本来の設定（box-shadow）もあるかもしれませんが、それを守るより正常に動作する（正常に見える）ほうが大事なので。
manpukusan reacted
2023年6月18日 20:17
スマホからなもので、打ちづらい・・・。
opacity: 0.99;が最も手っ取り早い解決方法のように見えます。
はい、同意です。
明示的にスタックを発生させたと見た目で分かりますし。
ちなみに昨日、blockquoteに「z-index: auto」を追加してみました。
すると、Gutenberg上では、引用ブロック自体が見えなくなってしまいました。（「z-index: -1」は復活させていたと思います）
このことからも、Gutenberg上では、同じような表示にするならば、致し方ないのかと思っています。
（「z-index: auto」の件は後程確認して、添付します）
2023年6月18日 20:33
できれば作者様の意思は尊重したいのですが、致し方ない場合、多少変わっても不具合があるよりない方を優先した方が良いかなと。
個人的には引用符がはみ出していた方が好みなのであまり違和感は感じませんでした。
This post was modified 1年前 by わいひら
mtd and manpukusan reacted
2023年6月18日 21:32
（「z-index: auto」の件は後程確認して、添付します）
上記、忘れてください。
綺麗にGutenbergにも反映させるには、Gutenbergだけに適用されるCSSを書くしかないのではと思い、試した際になった事象だと思います。
勘違いしてしまいました。
申し訳ないです。
分かりやすいように、スキンの「opacity: .5」の部分はコメントアウトした状態です。
（緑矢印・緑枠部分）
そして、赤矢印・赤枠の部分の追記を行いました。
その結果は、昨日と同じですが以下です。
【公開ページ】
【Gutenberg】
ここに、Gutenbergのカラーパレットで背景色を設定します。
アルファ値（透明度）の設定はしていません。
アルファ値（透明度）の設定はしていません。
【公開ページ】
【Gutenberg】
引用符も反映され、背景色の反映されるます。
box-shadowは反映されないとしても、利便性や分かり易さはこちらの方が良いと思います。
box-shadowは反映されないとしても、利便性や分かり易さはこちらの方が良いと思います。
2023年7月10日 16:10
てがきノートの作者です。皆様にはお手数をおかけしてしまい申し訳ありません。
今更ながら、トピックスの対応を行うとデザインが変わる件です。もうご対応いただいてくださっているかもしれませんが、個人的には引用のアイコンがはみ出しているのもてがきノートの趣旨と外れないように感じましたので、はみ出したデザインのまま進めていただけたら幸いです。
色々とご対応いただき本当にありがとうございました。
This post was modified 1年前 by mtd
わいひら and manpukusan reacted
2023年7月10日 18:14
ご確認いただきありがとうございます。
できれば元のままにしたかったのですが今回良い方法が思いつきませんでした。
そう言っていただけると助かります。ありがとうございます。
mtd and manpukusan reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。