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の表示が隠れてしまう
 
共有:
通知
すべてクリア

[解決済] Gutenbergの表示が隠れてしまう

11 投稿
3 ユーザー
3 Reactions
2,675 表示
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

今回のアップデートで投稿記事編集の幅が元に戻ったようですが(一週間前から使い始めたので気づかなかった ? )、大きくなったせいか、

  • ブロックを追加「+」マークにカーソルが隠れる(ついでに報告)
  • フォーマット所属の「クラシック」ブロックで装飾をする際、ワンタッチで枠系が表示されなくなった(先に「B」を押して回避可能)
  • 「クラシック」ブロックを上下に動かすブロックが隠れる

といった状態になっていて、添付gif画像を見たほうが早いかも! ? 


   
わいひら reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

なんだかすごい改行が入ってる…… ? 。添付したはずなのに画像が挿入されていないのでもう一度。

というより最後の行だけ改行できず、頭に最初のアルファベットが入り(ソースコードで消した)、さらには謎の改行が最後にはいる ? 

もし画像がまた入ってなかったら、文章だけでお願いします!ちなみに、最新版Chromeからの投稿です。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
  • フォーマット所属の「クラシック」ブロックで装飾をする際

そんな機能が隠れてたんですね、知らなかったのでこの情報、目からうろこです!書き込みチェックしてて良かったぁ( ノД`)

ちなみに。今フォーラムの段落は反映されてるのがソースコードからしか確認できないんです。


   
ぷっぷ reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

ご報告ありがとうございます。
そういった動作には気づいていませんでした。
とりあえず、Gutenberg関係の幅を広げるスタイルは、元に戻しました。
https://github.com/yhira/cocoon/archive/master.zip
CSSで幅を広げると、どうしても動作がおかしくなってしまうので、ちょっと今のところどう対応していか分からない状態です。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

不具合の原因がわかったので修正しておきました。

https://github.com/yhira/cocoon/archive/master.zip


   
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

かうたっくさん>

この「クラシック」ブロックは画像挿入以外の旧エディター機能がなんでも使えるので、本当におすすめです!

フォーラムの件はそういうことだったんですね!偶然直していてラッキー ? 

わいひらさん>

ワンタッチで枠が召喚できるようになったのを確認したのですが、なんだか別のものを発見してしまって、レイアウト要素所属の「カラム(ベータ)」を使うと、左側のカラムのブロックへ追加「+」が反応しないようです ? 

あとは、Gutenbergで作成した一部の記事をもう一度投稿編集から見ると、クラシックの中に作成した画像とセットの2カラム文字が全て外に出され、「このブロックは外部で変更されました」という状態になってなんかちょっとおかしなことになってるかも・・・(これは詳しく把握していないほぼ未検証)

昨日のアップデートから記事作成をしていないためすべてを把握しておらず、他にもいろいろでちゃうかもしれません。

Gutenbergすごい荒ぶってる ? 

幅が広いことのメリットは、

  • 見やすい(かなり重要)
  • カラム(ベータ)を使い左に画像を入れて、その右に文字を入れた際に画像の微調整がしやすい

といった感じで、クラシックに複数カラムを入れたほうがスマホ表示で1カラムになって都合が良いので、結局使わないし、狭いほうが良いのかもしれません…… ? 


   
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

あとは、Gutenbergで作成した一部の記事をもう一度投稿編集から見ると、クラシックの中に作成した画像とセットの2カラム文字が全て外に出され、「このブロックは外部で変更されました」という状態になってなんかちょっとおかしなことになってるかも・・・(これは詳しく把握していないほぼ未検証)

上記の状況をまっさらなサイトで試してみたところ、なんだか大丈夫でした(再現できなかった) ? 

でも、「アップデート前に作成した記事→アップデート後に投稿記事を見る」という手順ではなく、「アップデート後に記事を作成して公開→アップデート後に投稿記事を見る」だったので、消化不良は残っています  ? 

といってもすぐに直せるので、大きな問題じゃなかったのかもー ? 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

次同様の動作が出たら、editor-style.cssの中身を以下のコードに置き換えて再読み込みをして、試してみてください。

@charset "UTF-8";
/*ビジュアルエディターのスタイルを書く*/
body#tinymce {
  padding: 0 20px !important;
  margin-top: 0 !important;
  background-image: none;
  background-color: #fff;
}

.column-2,
.column-3{
  margin: 16px 0;
}

.column-2::before,
.column-3::before{
  content: "※カラムへの着色はエディタのみ";
  position: absolute;
  left: 0;
  right: 0;
  top: -1em;
  width: 31%;
  font-size: 0.8em;
  padding: 4px 8px;
  background-color: #f7dde4;
  text-align: center;
}

html[lang="en"] .column-2::before,
html[lang="en"] .column-3::before{
  content: "* Coloring is Editor Only.";
}

.column-left{
  background-color: #c7e1ef;
}

.column-center{
  background-color: #c9e8d8;
}

.column-right{
  background-color: #ffecd3;
}

/*ビジュアルエディターにinstagramの引用符が表示される対応*/
.instagram-media {
  position: relative !important;
} 

上記スタイルでも、同様の不具合が起きれば、幅の広さが問題ではないような気がします。というか書き込みを見た感じでは、クラシックと2カラムの不具合のような気がします。


   
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

わいひらさんの言うとおりもう一度色々確かめてみたら、せっかく用意してもらったコードでは解決せず、別の方法で解決しました ?

私のミスにより余計な時間を取らせてしまってごめんなさい ? 

これは「一度Gutenbergエディターに書き込んだものをクラシックにコピペしたせい」で、

<!-- wp:paragraph --><!-- /wp:paragraph -->

といったような、「Gutenbergでお馴染みブロックタグ」がクラシックの中に入ってしまい、クラシックでは意味不明なのでそれを吐き出すという仕様だったようです。だからコピペしやすい文字だけが外にでて、コピペしにくい画像は正常だったのでしょう。

なので、「HTMLとして編集」でHTML化させ、中のブロックタグを削除して解決しました。

解決してしまったので、editor-style.cssの中身は元に戻します。

本当にごめんなさい ? 

レイアウト要素所属の「カラム(ベータ)」を使うと、左側のカラムのブロックへ追加「+」が反応しないようです ? 

こっちは上記コードを入れた状態で確認しましたが、やっぱりクリック不能で左側のブロックを選択できませんでした。

私はカラム(ベータ)のカラムを使用していないので、現状困ってません ? 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17211
 

これは「一度Gutenbergエディターに書き込んだものをクラシックにコピペしたせい」で、

これは僕もよくやってしまいます。
ビジュアル(Gutenberg)エディターに貼り付けると、書式ごと貼り付けられてしまうんですよね…。

こっちは上記コードを入れた状態で確認しましたが、やっぱりクリック不能で左側のブロックを選択できませんでした。

もしよろしければ一度、editor-style.cssの中身をすべて削除した状態で試してみていただけますでしょうか。
もしそれでも、不具合が出るようであれば、cssとはまた別にレイアウト関係の不具合を修正する必要があるのかもしれません。


   
ぷっぷ reacted
(@excesssecurity)
Estimable Member Registered
結合: 7年前
投稿: 79
Topic starter  

これは僕もよくやってしまいます。 ビジュアル(Gutenberg)エディターに貼り付けると、書式ごと貼り付けられてしまうんですよね…。

Gutenbergあるあるすぎて、逆に忘れてしまってました ? 

もしよろしければ一度、editor-style.cssの中身をすべて削除した状態で試してみていただけますでしょうか。

削除しないまま寝落ちしてしまいごめんなさい…… ? 

カラム(ベータ)の左側が正常に選択できるようになってました! ? 

 


   
共有:

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

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

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

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

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

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

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

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