サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年3月10日 17:00
数日遅れたようですが、WordPress 6.2のRC版が利用できるようになりました。
（急遽beta-5がリリースされ、テストされていたために遅れた模様、正式版3/28リリースは変更なし）
毎度のことですが、このトピックには・・・。
WordPress 6.2 RC版でCocoonの確認を行い、動作・表示に支障があるものなどが見つかった場合に、追記をしていこうと思います。
（支障があるものだけでなく、「違い」など見つかれば書くと思います）
ただ、今週は時間がとれないと思いますので、来週週明けくらいから確認していければと思っています。
（来週も何日かはフルフルに予定が・・・）
ちなみに、今回の変更点は多いのでしょうか・・・。
（変更が多いのはブロックテーマ？、まだ読んでいないもので良く分かりません、たくさんあって読めないです）
WordPress 6.2 Field Guide
https://make.wordpress.org/core/2023/03/09/wordpress-6-2-field-guide/
影響が少ないと・・・いいですねぇ。
わいひら reacted
2023年3月10日 19:53
ご連絡いただきありがとうございます！
僕の環境でもアップデートし試してみたいと思います。
かなり変更がありますね…。
2023年3月10日 20:07
WordPress 6.2だけどCocoonブロックでもデフォルトカラーパレットが表示されるようになったのかな？
他のブロックも確認してみます。
2023年3月10日 20:16
他のブロックでもデフォルトカラーパレットが表示されるけど、色を選択してもエディターには反映されないですね…。
公開ページには反映されますが、ちゃんと綺麗に反映されないブロックもあって、これは要修正かもしれません。
2023年3月10日 21:28
WordPressデフォルトのカラーパレット対応版をアップしておきました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
トピックスターター 2023年3月10日 21:31
確かに・・・と書こうと思ったら、もう修正されているっ！
カラーパレットで、少し気づいたことがあるのですが、最新版にバージョンアップしてからにします。
トピックスターター 2023年3月10日 21:36
トピックスターター 2023年3月10日 21:37
カラーパレットで気づいたことを書きます。
例えば、段落ブロックでは以下のように、カラーパレットは編集エリアに表示されます。
ところが、Cocoonブロック（添付はタブボックス）では、右サイドバー内に表示されます。
スクロールバーも出てきます。
これだけであれば、特に問題はないように思いますが・・・。
ブラウザ幅を1300pxくらいにした時は、特に問題ないんです。
（以下はGIFです。）
（以下はGIFです。）
しかし、1920×1080pxのディスプレイで、ブラウザを最大化すると、以下のようにカラーパレットがチラつきます。
カラーパレットを表示させた後は、何も操作をしていないのですが、カラーパレットが上記のようにチカチカします。
GIFのフレームレートが低いので、上記のような感じですが、実際にはもっと高速でチカチカします。
全てのCocoonブロックを確認した訳ではないのですが、カラーパレットが右サイドバー内にはない方が良い気がします。
（このような設定ができるものなのか、分かりませんけれど。）
（このような設定ができるものなのか、分かりませんけれど。）
チラつきは、今のところタブボックスの「枠の色」だけで発生している感じがします。
全部は見ていないのですが。
全部は見ていないのですが。
わいひら reacted
トピックスターター 2023年3月10日 21:53
上記のチラつきの件ですが。
ブラウザ幅を1300pxくらいにした状態で、アコーディオンブロックの「文字色」でも発生しました。
フレームレートを少し上げてみましたので、アップし直します。
今日は時間がとれませんので、WordPress 6.2の確認はここまでです。
わいひら reacted
2023年3月12日 12:07
ご確認ありがとうございます。
ちらつきはFirefoxでは表示されなかったので気づきませんでした。
Chromeで不具合を確認致しました。
「アイコンブロック」は「段落ブロック」と同様にカラーパレットがサイドバーの左側に出ていることから、Cocoonブロックの中でも「白抜きボックス」とかの高階コンポーネント (higher-order component; HOC)を使っているブロックで症状が出るようです。
https://github.com/xserver-inc/cocoon/blob/92035a7cafaeb8d1a52dc13e5d0f2951b5533887/blocks/src/block/blank-box/edit.js#L78-L81
とはいっても、もう何年も前からここら辺はこの状態で変更を加えていないことから、原因としては今のところわかっていません。
2023年3月12日 12:13
WordPress 6.1だったChromeでも症状は出ないようですね。
サイドバー上に出るのは以前からみたいですね。
この投稿は2年前 2回ずつわいひらに変更されました
トピックスターター 2023年3月12日 15:35
ちらつきはFirefoxでは表示されなかったので気づきませんでした。
Chromeで不具合を確認致しました。
確認したところ、私の環境でも、Firefoxではこの症状は出ませんでした。
とはいっても、もう何年も前からここら辺はこの状態で変更を加えていないことから、原因としては今のところわかっていません。
今回、デフォルトカラーが表示されるようになったことは影響していないでしょうか。
私の環境でも、WordPress 6.1.1では発生していません。
（WordPress 6.1.1では、デフォルトカラーが表示されない）
デフォルトカラーが表示され、サイドバー内では縦方向に収まらなくなってしまう。
そうすると、垂直スクロールバーが表示されてしまう。
その分、今度は水平方向に収まらなくなって、水平スクロールバーが表示されるようになる。
そんな感じに見えるんですよね。
それでも、Firefoxはチラつかないですが。
（Firefoxでも、水平スクロールバーが表示されるのはちょっと嫌ですね、あまり意味ないですし）
高階コンポーネント (higher-order component; HOC)
これが良く分かっていませんが、サイドバー内に区切りがあるものでしょうか。
この区切り内に、カラーパレットを収めようとして、垂直スクロールバーが出てくる感じがします。
わいひら reacted
2023年3月13日 20:05
確認したところ、私の環境でも、Firefoxではこの症状は出ませんでした。
ご確認いただきありがとうございます。
やっぱChromeだけなんですね。
これが良く分かっていませんが、サイドバー内に区切りがあるものでしょうか。
こんな感じでwithColorsを使用して出力するタイプです。
https://github.com/xserver-inc/cocoon/blob/10a70b84b44c85c127dc65d263bbb4c044d38f9c/blocks/src/block/blank-box/edit.js#L78-L81
【wordpress】自作ブロックの背景色と文字色をクラスのある場合とインラインの場合で切り替える方法 | devsakaso
https://devsakaso.com/wordpress-using-withcolors-hoc/?utm_source=pocket_saves#
他のブロックプラグインなどを見てみても、HOCを使ってないっぽいんですよね…。
トピックスターター 2023年3月14日 14:53
こんな感じでwithColorsを使用して出力するタイプです。
なるほど・・・です。
そうは言っても、良く分からないですけど。
何かあるんですかねぇ。
以下の方法でもカラーパレットは表示できそうですが、ボーダー色が表示できなさそうに見えますねぇ。
（背景・文字・リンク・グラデーションと・・・？）
でも、良く分かっていないです。
わいひら reacted
トピックスターター 2023年3月17日 10:37
チラつきの件ですが、今確認すると直っていました。
前回からの違いは、2つあります。
- WordPress 6.2 RC2にアップデート
- Chromeのマイナーバージョンが上がった（アップデートされていた）
どちらかが原因だったのかもしれないです。
ただ、今回のちらつきが起きたカラーパレットは、収まりきらないのでスクロールバーが表示されることには変化はないです。
タブボックス－枠の色
アコーディオン－文字色
わいひら reacted
トピックスターター 2023年3月17日 10:38
カラーパレットが編集エリアに表示される「段落ブロック」と比較してみると・・・。
インラインの以下の部分が大きく違うみたいです。
段落ブロック
タブボックス
これを制御できると良いのですが。
わいひら reacted
2023年3月17日 20:01
カラーパレットの位置が修正されたものをGitHubにアップしておきました。
https://github.com/xserver-inc/cocoon
※カスタム色はCocoonブロックで意味を成してなかったので一旦廃止
2023年3月17日 22:39
こんばんは。
初めまして。
タブボックスの変更が漏れていたかもしれません。申し訳ないです。
他にも漏れがあれば対応いたしますので、もしお気づきでしたらご連絡頂けると幸いです。
カスタム色も使えるかこの後試してみます。
わいひら reacted
2023年3月18日 21:01
mk2さんご確認いただきありがとうございます。
vic322さんは、僕が大腿骨骨折した直後くらいでGutenbergのapiVersionを1→2にした時、書き換えを依頼した方です。
その後、新着記事ブロック以降はほとんどvic322さんにGutenbergのことはお願いしています。
2023年3月19日 19:27
タブボックスブロックをvic322さんに修正していただいたので、GitHubにアップしておきました。
GutenbergはSokki Voiceのような音声入力ソフトで入力する時、めちゃくちゃ遅いので僕にとってめちゃくちゃ使いづらいんですよね…。
おそらくテキストが入力された時、何重にもチェックコードが働いていて入力が遅くなるぽい。
これがなければ僕ももっと使いたいんですけど。
Gutenbergビルダーみたいなのがあると楽なんですけどねー。
ブロックテーマにしたらCreate Block Themeプラグインがそれにあたるのでしょうか。
ただいずれにせよスタイリングとか特別な設定とかはコードでしなければならないので大変には変わりないけど;
トピックスターター 2023年3月19日 22:04
ご対応いただきありがとうございます。
「タブボックス」ブロックで、カラーパレットがサイドバー内ではなく、編集エリアに展開されることを確認しました。
この機に、他のCocoonブロックのカラーパレットも確認し、すべて編集エリアに展開されていることも確認しました。
ありがとうございます。
トピックスターター 2023年3月19日 22:12
めちゃくちゃ遅いので僕にとってめちゃくちゃ使いづらいんですよね…。
Gutenbergは、私のローカル環境では無茶苦茶遅いです。
古いノートPCですし。
苦痛…です。
ブロックテーマにしたらCreate Block Themeプラグインがそれにあたるのでしょうか。
こんなのがあるんですね、ブロックテーマは。
Gutenbergビルダーみたいなのがあると楽なんですけどねー。
ほんとこれです。
json形式ファイルとか見ていると、プルダウンやラジオホダン・トグルスイッチとかで、設定して、それをファイルに書き出せると良いのではと思ってしまいます。
設定オプションに何があるかを探してから、手で設定するというのは、何だか面倒だなぁと思ってしまいます。
2023年3月20日 19:45
元々Windowsでサーバーを動作させると遅いのと、Local by Flywheel（旧名）が遅いのはあるかもしれないですね。
僕の以下の環境でもめちゃくちゃ遅いです笑
CPU:Core(TM) i7 2.80 GHz
メモリ:64.0 GB
Local by Flywhee環境じゃない他のローカル環境ならば、もうちょっと早いんですけど何個も環境を管理できるのは便利なのよね…。
トピックスターター 2023年3月20日 20:11
私のは古いですし、ノートPCですので、もっと貧相なスペックです。
メモリも16GBですね。
そのスペックでも遅ければ、私の環境なんて…。
何個も環境を管理できるのは便利なのよね…。
はい、これがとても便利です、
古い環境をとってありますし、複数の環境を比較する際に、同時に起動して見比べたりしています。
私の自分の環境は、クラシックエディタですので、それであれば、そんなに苦痛ではないんですよね。
Gutenbergが、いろんなことをやりすぎですよね。
2023年3月21日 19:02
基本的に文章を書きたいだけの人にとってはオーバースペックですよね 😓
トピックスターター 2023年3月22日 00:31
そうですね。
ただ、便利にはなっていると思いますから、もうちょっと軽ければ・・・とは思います。
FSEまでいってしまうと、何もそこまでは必要ないようなという気はしますね。
（便利だとは思いますけれど）
トピックスターター 2023年3月23日 20:44
ブログ書き向きではなくてWeb制作者向けなんですよね…。
本当に。
便利になる一方で、ブログ用の手軽さがなくなってしまうと困るなぁという感じです。
最近のWordPressの動向を見ていると、そんな心配をしてしまいます。
2023年3月24日 19:55
Classic Editorのサポート期限が延長されるのも、そういった需要からなんでしょうね。
Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。
引用: https://ja.wordpress.org/plugins/classic-editor/
果たして、必要なくなる時は来るんだろうか。
トピックスターター 2023年3月26日 18:05
すみません。
時間がとれず、WordPress 6.2 RC版の確認をほとんどしていませんでした。
取り急ぎ、確認をし始めましたが、正直これからもあまり時間がとれないと思いますので、できる範囲で。
【コードブロック】
「行の高さ」が、編集画面、公開ページ共に、反映されないみたいです。
公開ページ
style属性
デベロッパーツール
こんなことするかな・・・と思わなくはないですけど。
「Twenty Twenty-One」だと以下のような感じです。
テーマ色は使用できないため、変更しています。
わいひら reacted
トピックスターター 2023年3月26日 18:30
「プルクオート」ブロックの背景色は、これで正しいでしょうか。
（このブロックの使い方が分からない・・・）。
「Cocoon」
編集画面
公開ページ
「Twenty Twenty-One」
編集画面
公開ページ
わいひら reacted
トピックスターター 2023年3月26日 18:42
「テーブル」ブロック
文字の大きさですが、編集画面では、キャプションのみに適用されるようです。
編集画面
公開ページでは、テーブルの中の文字も大きくなっています。
（こちらが正常かと）
（こちらが正常かと）
編集画面に反映されると、文字が極端に大きい場合編集ができなくなるかも・・・？
わいひら reacted
トピックスターター 2023年3月26日 19:11
WordPressの「ボタン」ブロックは、編集画面で揃え位置の変更がきかないみたいです。
公開ページでは、変更されています。
わいひら reacted
トピックスターター 2023年3月26日 19:42
細かい話ですが・・・。
ツールバー？の各項目が、中央揃えになっているようです。
特に、ショートコードは見づらい気がします。
WordPress 6.1.1では、以下のような感じでした。
すみません、今日はここまで・・・かもしれないです。
（後ほど、時間が取れれば確認しますが、あまりとれない気がします）
（後ほど、時間が取れれば確認しますが、あまりとれない気がします）
わいひら reacted
2023年3月26日 19:59
詳細なご報告ありがとうございます！
普段使用しないところなので助かります。
僕のローカル環境でも不具合を確認し修正してみました。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
ｍｋ２ reacted
トピックスターター 2023年3月26日 21:11
ご対応いただき、ありがとうございます。
全て解消していることを確認させていただきました。
トピックスターター 2023年3月26日 21:48
「画像ブロック」のキャプションは、ツールバーから追加するカタチになったみたいです。
そのキャプションが、Cocoonでは、左側に出てくるみたいです。
編集画面
公開ページ
「Twenty Twenty-One」では、中央に出てきます。
編集画面
公開ページ
配置の変更はできないようですので、中央にあるのが自然なような気がします。
トピックスターター 2023年3月26日 22:32
すみません、答えが見つかっていないのですが、書きます。
WordPress 6.2から、「スタイルのコピー」「スタイルの貼り付け」というものができるようになっているようです。
例えば、以下のように、「コードブロック」「段落ブロック」「案内ボックスブロック」を並べたとします。
コードブロックには、「テキスト」「背景」「枠線」「角丸」のスタイルを指定しました。
このスタイルを、「段落ブロック」「案内ボックスブロック」に、コピー＆貼り付けをしてみます。
すると、「段落ブロック」については、「テキスト」「背景」は、きちんと適用されていると思います。
しかし、「枠線」の色が、正しく貼り付けられません。
そもそも、「段落ブロック」は、「枠線」「角丸」が指定できないところへ、貼り付けができてしまうんですよね。
そして、正しく反映されないという状態です。
そして、正しく反映されないという状態です。
訂正しようにも、「元に戻す」以外は、コードエディタで直接削除するくらいしかできないと思います。
（今気づいたばかりで、他のことを試していません）
【追記】
Cocoonにはツールバーに「書式のクリア」がありますから試してみましたが、これでは削除されませんでした。
Cocoonにはツールバーに「書式のクリア」がありますから試してみましたが、これでは削除されませんでした。
ただ、これはCocoonだけではないです。
「Twenty Twenty-Three」でも、同様の事が起きました。
これは、WordPress本体の問題ということで良いのかもしれないです。
そしてCocoonの「案内ボックスブロック」についてですが、貼り付けても、見た目の上では、まったく反映されません。
そもそも指定できないものを貼り付けたのですから、反映されなくて良いと思います。
ただ、ソースを見ると、「CSS」というクラスが追加されているみたいです。
貼り付け前の状態
上から、「コードブロック」「段落ブロック」「案内ボックスブロック」です。
スタイルの貼り付け後には、以下のような状態でした。
これが、何か悪さをするのか・そもそも何なのかまでは、確認ができていません。
もし、スタイルの貼り付けを抑止できるのであれば、した方が良いのではないかという気がしてきました。
今気づいたばかりで、何も調べてはおらず、申し訳ないです。
そして、今日はもうタイムアップな感じです。
重ね重ね申し訳ないです。
重ね重ね申し訳ないです。
わいひら reacted
トピックスターター 2023年3月27日 16:21
「横並び」ブロックの配置が、編集画面ではきかないみたいです。
また、公開ページでは、最後のブロックの縦位置がずれています。
（配置は、きいている）
（配置は、きいている）
左揃え
中央揃え
右揃え
項目の間隔
トピックスターター 2023年3月27日 16:36
「縦積み」ブロックも、編集画面で配置がきかないみたいです。
公開ページは大丈夫みたいです。
左揃え
中央揃え
右揃え
項目を拡張
「項目を拡張」って何が違うのだろう・・・という疑問はありますけれど。
トピックスターター 2023年3月27日 17:24
「画像」ブロックは、編集画面で中央揃えがきかないみたいです。
公開ページは大丈夫です。
（他の配置もOK）
（他の配置もOK）
固定ページ 1 / 2
次へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。