「メイド・イン・ヘブン」スキン適用中

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

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

GutenbergエディターでのCSS...
 
共有:
通知
すべてクリア

[解決済] GutenbergエディターでのCSSに関しての質問

13 投稿
2 ユーザー
4 Likes
1,427 表示
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

Gutenbergエディターを使い出し、文の修飾のCSSを見ていて疑問点があり。
回答願いたく。


Gutenbergエディターで編集の時、親テーマCSS(cocoon-style-css)を読み込んでいない。
代わりに以下を用いており。

①cocoon-gutenberg-css

②cocoon-gutenberg-content-css


●質問1
②ですが、①と重複している個所が多く。
①との違いは、見出しh1~h6の定義の有無だけ、一見、①に統合してもいいのでは?


●質問2
新着記事ブロックなどを入力した場合、親テーマCSSがインライン展開されているようです。
クラシックエディター同様、はじめから親テーマCSSを読み込んでもいいのでは?

文修飾の部分が多く、親テーマCSSと重複する部分がある為、分離してcocoon-gutenberg-cssに集約もありかなのか思え。


●質問3
「エディターにテーマスタイルを反映させる」をオフすることがあるのか?
Gutenbergエディターを用いる際、オフにすると、使えない(正しく表示されない)ので、オン必須なのでは?


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

投稿者:: @chu-ya

●質問1
②ですが、①と重複している個所が多く。
①との違いは、見出しh1~h6の定義の有無だけ、一見、①に統合してもいいのでは?

おそらく用途別に分けようと思ったもののそのままぐずぐずになったっぽいですね。
cocoon-gutenberg-content-cssは削除しました。

投稿者:: @chu-ya

●質問2
新着記事ブロックなどを入力した場合、親テーマCSSがインライン展開されているようです。

同一の部分を見ているかを確認するためにも念のためソースコードのスクリーンショットを頂いてよろしいでしょうか。

投稿者:: @chu-ya

●質問3
「エディターにテーマスタイルを反映させる」をオフすることがあるのか?
Gutenbergエディターを用いる際、オフにすると、使えない(正しく表示されない)ので、オン必須なのでは?

僕もそう思うんですけど、これはそういう要望があったかと思います。
多分このフォーラムかSimplicityのフォーラムでそういうトピックもあったような気もします。
詳しくは覚えてないですか確かテキストベースで書きたいみたいな感じだったでしょうか。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

投稿者:: @yhira

同一の部分を見ているかを確認するためにも念のためソースコードのスクリーンショットを頂いてよろしいでしょうか。

図を添付します。


余談
昔、cocoon blocksと言うプラグインだったのですね。
調べてたら、記述があり。
ここまで、Gutenbergの部分が大きくなるなら、プラグインのまま独立でも良かったのは?と思え。


   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.9
カテゴリー数:19
タグ数:148
ユーザー数:1
----------------------------------------------
Gutenbergエディターでメディアを開いた時、以下の部分に重複があり。
↓不要、max-width: auto、autoはプロパティ値として無効です。
https://github.com/xserver-inc/cocoon/blob/2a7858953b2aac0f6666d26691b4f5981ac0a40d/css/gutenberg-editor.css#L1448-L1455

https://github.com/xserver-inc/cocoon/blob/2a7858953b2aac0f6666d26691b4f5981ac0a40d/css/gutenberg-editor.css#L4978-L4986


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

ありがとうございます。

投稿者:: @chu-ya

昔、cocoon blocksと言うプラグインだったのですね。
調べてたら、記述があり。
ここまで、Gutenbergの部分が大きくなるなら、プラグインのまま独立でも良かったのは?と思え。

そうだったもんかもしれませんが、当時は初心者向けに少しでも手間が省けるようにテーマインストール1回で設定が完了することを優先させました。
WordPressの推奨的には、機能は分けた方が良いのですが、ブロックを分けたとて他のプラグインで実装した方が良いような機能はテーマにふんだんに実装されているのでブロックだけ分ける必要もないかとも思いました。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

投稿者:: @chu-ya

Gutenbergエディターでメディアを開いた時、以下の部分に重複があり。
↓不要、max-width: auto、autoはプロパティ値として無効です。

ありがとうございます。
修正しておきました。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.10
カテゴリー数:5
タグ数:10
ユーザー数:1
----------------------------------------------
修正不十分です。
以下の部分が修正されていません...涙

https://github.com/xserver-inc/cocoon/blob/4d093723b9c671869377aba13ffd3b75984b8f83/css/gutenberg-editor.css#L1504


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

試しにcocoon-gutenberg-cssを削除し。
アイコンボックスなどのブロック、親CSSのCSSが反映されており。

親とcocoon-gutenberg-cssで重複しているので、管理面で面倒ではないですか?


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

投稿者:: @chu-ya

修正不十分です。
以下の部分が修正されていません...涙

修正されていないのを具体的に言うとどういうことでしょう。
表示が崩れているということですか?それとも警告マークが出ているからということでしょうか。

投稿者:: @chu-ya

親とcocoon-gutenberg-cssで重複しているので、管理面で面倒ではないですか?

scssで一箇所を変更すれば全部に反映されるので面倒ということはないです。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

投稿者:: @yhira

修正されていないのを具体的に言うとどういうことでしょう。
表示が崩れているということですか?それとも警告マークが出ているからということでしょうか。

図示されているように、max-widthにautoと言う値は無効です。

https://github.com/xserver-inc/cocoon/blob/4d093723b9c671869377aba13ffd3b75984b8f83/css/gutenberg-editor.css#L1504


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

修正しておきました。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2299
Topic starter  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.6.1.10
カテゴリー数:19
タグ数:148
ユーザー数:1
----------------------------------------------
style.css、gutenberg-editor.cssから削除されている事を確認しました。
本件をクローズとします。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16534
 

ご確認いただきありがとうございます!


   
共有:

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

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

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

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

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

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

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

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