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カスタマイズ依頼

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

ブロックエディターのスタイルに影響する...
 
共有:
通知
すべてクリア

ブロックエディターのスタイルに影響する擬似要素の修正

5 投稿
2 ユーザー
2 Reactions
3,804 表示
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
トピックスターター  

Move To機能によるスタイル崩れの不具合

の問題が解決してから新たにトピックを立てようとしていた内容なのですが、

見出しh2の下線の横線が、文字の中央に入り読みにくくなった。

にて先に修正が入ったため、合わせてトピックを立てておきます。

 

少なくとも

  • ほんわかライトニング
  • カラフルライン
  • Hygiene
  • m-系
  • Simple系
  • ミックス系
  • サムライブルー系
  • Bizarre-food系
  • おでかけ系
  • ドット系

以上のスキンでも同様の問題が確認されています。

WordPress5.5では各ブロックの外側にあるタグの擬似要素(::before,::after)を用い、ブロックの

  • 追加
  • 選択
  • 移動

などの動作をデザインしているからです。

 

擬似要素について、

  1. ブロックエディター側
  2. テーマ側

どちらのスタイルに寄せるかで修正方法は異なりますが、テーマ側のスタイルに寄せるのであれば、ブロックの動作を邪魔しないよう対策する必要があります。


   
わいひら reacted
引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

ローカルのテストサイトで、投稿画面で見出し(h1~h6まで)のデザインがどうなるのか、ロコさんのリストにあったスキンに切り替えてみてみたら、やはり、ちょっと表示がおかしいスキンがあるみたいです。

 

あまりじっくり見た訳ではないのですが、×印は、明らかに要修正、△は、要検討、〇は、まあまあ、そのままでもイケそうな感じだったような気がします。(大雑把にしか見ていないのですが・・)

 

いずれにしても、個々のスキンごとに対応するとなると、ちょっと、これは、大変そうですね。

 

ほんわかライトニング ×
カラフルライン △
Hygiene 〇
m-系 〇
Simple系 ×
ミックス系 ×
サムライブルー系 ×
Bizarre-food系 〇
おでかけ系 〇
ドット系 〇

 

あまり細かく見ていないので、見落としているかもしれません。

 

 

 

この投稿は4年前 2回ずつリフィトリーに変更されました

   
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
トピックスターター  

×印は、明らかに要修正、△は、要検討、〇は、まあまあ、そのままでもイケそうな感じだったような気がします。

ほんわかライトニング ×
カラフルライン △
Hygiene 〇
m-系 〇
Simple系 ×
ミックス系 ×
サムライブルー系 ×
Bizarre-food系 〇
おでかけ系 〇
ドット系 〇

こちらはブロックにおける擬似要素の挙動をざっと確認した上でということでしょうか?

例えば、

https://github.com/yhira/cocoon/commit/cfdd3dd269978c7cf73459c675e25813d8c23115

で修正が入ったtecurioスキンの見出しタグ(H2)も、現状ではまだ添付画像のようにブロック選択時などで不具合が見られます。

 

Move Toが擬似要素(::before)を基準にした機能であるため、ブロックエディターに挿入しているCocoonのクラスがリセットされる不具合を解決するのが先ですが、本トピックの問題を解決するためには単にテーマ側の擬似要素を見るだけでなく、ブロックエディターがブロックの擬似要素に持たせている諸動作もチェックする必要があります。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@lococo さん

いつもお世話になっております。

投稿者:: @lococo

こちらはブロックにおける擬似要素の挙動をざっと確認した上でということでしょうか?

これに関しましては、挙動というか、エディター上の見た目がどうなるのかなと、、ロコさんの書きこまれたリストのスキンに切り替えてみた、という程度です。

 

投稿者:: @lococo

Move Toが擬似要素(::before)を基準にした機能であるため、ブロックエディターに挿入しているCocoonのクラスがリセットされる不具合を解決するのが先ですが、本トピックの問題を解決するためには単にテーマ側の擬似要素を見るだけでなく、ブロックエディターがブロックの擬似要素に持たせている諸動作もチェックする必要があります。

ブロックエディターの疑似要素を用いた動作のチェックまでは、私のスキルでは、至らないです。(疑似要素を使ってブロックを操作する仕組みは、全く理解できていません)

 

トピックに余計な書き込みを増やしてしまったとしたら、ご容赦ください。

 

ただ、h2等の見出しに入力した文字がエディター上で読めない、というような事があれば、フォーラムに問い合わせが来ることは当然予想されます。

 

そういった意味では、WordPress5.5へのご対応の優先度の目安にはなるかもしれないと思って書きこませていただいた次第です。

 

 


   
返信引用
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
トピックスターター  

こちらの不具合ですが、ブロックのアウトラインをツールバーのようなポップオーバーのコンポーネントに置き換えるなどして、エディター側ブロックのスタイルを移すみたいです。

ただ、テーマ側で指定できる擬似要素がどこまで有効になるのかはまだ分かりません。


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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