現在「みるらいと」スキンを適用中です。

Gutenbergの表示が隠れてしまう | 不具合報告 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Gutenbergの表示が隠れてしまう
 
Share:
Notifications
Clear all

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


ぷっぷ
(@excesssecurity)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月27日 21:31  

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

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

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


わいひら 件のいいね!
ぷっぷ
(@excesssecurity)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月27日 21:44  

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 3年 前
投稿: 4765
かうたっく - Facebook
2018年9月27日 22:03  
  • フォーマット所属の「クラシック」ブロックで装飾をする際

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

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


ぷっぷ 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10922
わいひら - Facebookわいひら - Twitter
2018年9月28日 00:15  

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10922
わいひら - Facebookわいひら - Twitter
2018年9月28日 01:50  

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

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


ぷっぷ
(@excesssecurity)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月28日 09:32  

かうたっくさん>

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

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

わいひらさん>

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

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

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

Gutenbergすごい荒ぶってる ? 

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

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

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


ぷっぷ
(@excesssecurity)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月28日 09:48  

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10922
わいひら - Facebookわいひら - Twitter
2018年9月28日 20:35  

次同様の動作が出たら、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)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月28日 21:15  

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

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

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

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

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

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

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

本当にごめんなさい ? 

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10922
わいひら - Facebookわいひら - Twitter
2018年9月28日 21:47  

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

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

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

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


ぷっぷ 件のいいね!
ぷっぷ
(@excesssecurity)
Trusted Memberサイト
参加: 3年 前
投稿: 79
ぷっぷ - Twitter
2018年9月29日 09:55  

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

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

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

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

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

 


返信する

Author Name

Author Email

タイトル *

許可された最大ファイルサイズ 5MB

 
Preview 0 Revisions Saved
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年2ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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