特典機能について

エディター画面と公開画面のテーブルを同一の見え方にして欲しい | 要望 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
エディター画面と公開画面のテーブルを同...
 
共有:
通知
すべてクリア

[解決済] エディター画面と公開画面のテーブルを同一の見え方にして欲しい


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

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

Gutenbergを利用しています。

エディター画面でテーブル挿入し「幅広」配置をすると一番左に寄ってしまいます。
「幅」も変わらず、また、エディター画面では「表のセル幅を固定」も利かないようです。
(公開済の記事では、幅広&セル幅が均一、になります)
該当URL: https://test-test.tank.jp/table-test/

当初は自分で追加したCSSと競合しているのかと思っていましたが、空っぽの新規サイトでも同様の事象でしたので、投稿させていただきました。

編集画面のまま作業できればとても助かります。
個別のCSS追加ではなく、テーマ仕様にして頂ければと思いますが、難しいでしょうか。

お忙しいところ恐れ入ります。
ご確認をよろしくお願いします。


未解決
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

前略、KKさん わいひらさん

私のテストサイトでも、同様の症状になるようです。

画像ブロックでも配置の選択項目に「幅広」と「全幅」がありますが、私はこの2つの違いを理解していないです・・


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

該当URL: https://test-test.tank.jp/table-test/

同じソースコードで動作確認するために、上記のエディターのソースコードをテキストファイルに保存して添付ファイルとしてアップしていただいてよろしいでしょうか。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

以下のような記事がありました。

 

ブロックエディターを幅広・全幅に対応させる方法

https://gutenberg-docs.ham.works/2020/01/28/711/

 

WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法

https://techmemo.biz/wordpress/align-wide-support/

This post was modified 3か月前 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

幅広と全幅のときは、load-styles.phpのCSSが適用されているようです。

 

This post was modified 3か月前 by リフィトリー

KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様 リフィトリー様

ご確認いただきありがとうございます。
ソースコードをメモ帳に保存して添付させていただきました。
不足部分がありましたら教えてください。

蛇足
全幅・幅広の違いは、なんでしょうね。
使い分けたことはありませんでした。

気になったのでGoogle先生で検索してみました。
もしかしたら「全幅」はカラム等関係なく全ての要素を突破するイメージなのかもしれません。
でもそうすると私が今まで「全幅」として利用していた「1要素の中での横幅いっぱい」は、実は「幅広」なのかもしれないですね。
※ピンポイントで説明されてるサイトは見つからなかったので、複合的に見て想像しました。
 もしそうなら結果的に自分の想像と今回の結果がマッチしないことになりますが(汗)
 そこは本来の意味に合わせて頂いた方が良いですよね。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様

大変申し訳ありません、質問文に誤りがありました。

「幅広」配置をすると一番左に寄ってしまいます。

と記載させていただきましたが、本来は「全幅」の誤記でした。
「幅広」にすると一番左には寄りませんが、エディターと公開記事の見た目が異なっているという事象は同じです。

自分がいつも選択していたのは「全幅」の方で、「幅広」は使ったことがありません。
全幅と幅広の調べ物中なんか違和感があったので、もう一度自分の投稿を見直してみて気付きました。

一番間違えてはいけないところを間違えてしまい、大変申し訳ありませんでした。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

わいひらさん  KKさん

あまり詳しくは調べていませんが、「幅広」と「全幅」は、1カラムのテーマだと考えると、需要がある配置切り替えのような気がします。

 

Twenty Twenty OneのCSSは varで宣言?定義?しているのでちょっと解読しづらいですが、「幅広」は、いわゆる、メインカラム幅に相当し、「全幅」は、画面幅いっぱい、というようになっている気がします。

 

 

This post was modified 3か月前 2回 by リフィトリー

さる子 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

わいひらさん  KKさん

Cocoonでサイドバーが表示されている状態だと、「幅広」と「全幅」は同じ表示になるような気がします。(メインカラム以上には広がらないので)

 

では、サイドバーを表示せず、1カラムにしたときはどうか?と言えば、Cocoonの場合はメインカラムは、1カラムの場合でもカラム幅を設定してあるので、結果的には、カラム幅から、はみ出す仕様にしない限りは、やはり「幅広」も「全幅」も同じ表示になるような気がします。(まだ、よく理解できていない部分もあるので間違っているところもあるかもしれません)

This post was modified 3か月前 2回 by リフィトリー

さる子 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

リフィトリー様

とても勉強になります。
ありがとうございます。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

KKさん

本件は、実際の表示とエディター画面の表示が一致しないので修正してほしい、ということでしたのに、脱線していてすみません。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

リフィトリー様

知見がある方のお話は例え脱線であっても本当に勉強になります。
私では、リフィトリー様と同じことを調べていても、理解に限界があります。
お話を伺えたおかげで以前よりも少し理解が深まりました。
※厳密には脱線ではないような気もします。

ただ、わいひら様の読む量が多くなってしまいますので、このトピックスで「違い」や「利用例」の疑問を広げるのは好ましくないのかもしれませんね。

私も自重します。
ありがとうございます。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

ソースコードをメモ帳に保存して添付させていただきました。
不足部分がありましたら教えてください。

わかりづらくて申し訳ないです。
お手数ですがエディターページのソースコードではなく、添付画像部分のエディターのソースコードでお願いいたします。

This post was modified 3か月前 by わいひら

わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

手持ちの適当な環境を作って試したものでは修正してみました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

投稿者:: @leafytree

Cocoonでサイドバーが表示されている状態だと、「幅広」と「全幅」は同じ表示になるような気がします。(メインカラム以上には広がらないので)

 

では、サイドバーを表示せず、1カラムにしたときはどうか?と言えば、Cocoonの場合はメインカラムは、1カラムの場合でもカラム幅を設定してあるので、結果的には、カラム幅から、はみ出す仕様にしない限りは、やはり「幅広」も「全幅」も同じ表示になるような気がします。(まだ、よく理解できていない部分もあるので間違っているところもあるかもしれません)

書かれている通りで、現在Cocoonはカラム幅が指定してある仕様なのでその認識で合っています。
対応するには「ページタイプ」に「全幅」という機能が必要になるのですが、今のところそこまではやってません。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様

大変失礼いたしました。
再UPしようとしたところ既にご修正いただいていて恐縮です。

ZIPのまま手動アプデを実施したところ「辿ったリンクは期限が切れています」と制限に引っかかってしまいました。
※さくらサーバーのスタンダードプラン

今回も以下ファイルのみ上書きさせていただきました。
 css/gutenberg-editor.css

 

エディター画面で全幅の表示が公開記事と同一になったことが確認できました。
お忙しいところありがとうございます。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

私もインストールしてみました。

 

関連性があるので、このまま続けてしまいます。

 

画像ブロックのときと同様に「左寄せ」と「右寄せ」の場合は、floatを用いているようなのですが、Twenty Twenty Oneだとtableの場合も左寄せの場合は右側に、右寄せの場合は左側にそれぞれマージンを設定して、回り込んだ文字との距離を保っているようです。

 

Twenty Twenty Oneの場合は、画面幅が420px以上のときは、(--global--spacing-horizontal)→25px、それ以下のときは2emとしているようです。

 

tableの上側のマージンについては、ちょっと私にはよくわからないです。

 

「幅広」と「全幅」につきましては、修正されていると思います。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

あまり詳しく突き詰めても、キリがないところもあるのですが、「表示のセル幅を固定」について、Twenty Twenty Oneでは、表の位置を何も指定しないときでも、エディター画面に反映されるようです。

 

表の位置を何も指定しない、という使われ方も多いかと思ったので、その場合も反映されるといいかな、と感じました。

 

This post was modified 3か月前 by リフィトリー

わいひら 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様

一度解決済にさせて頂いたところですが、エディター画面と公開済画面が異なっている表がありました。
リフィトリー様の内容と被っていたら申し訳ありません。

① デフォルト配置、左寄り配置、右寄り配置
  これらの配置の表に「セル幅を固定」させても反映しない

<次へ>


わいひら 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

<続き>

② 右寄り配置(セル幅固定なし)を2つ以上並べるとエディター内の表がくっつく(回り込む)

「表のセル幅を固定」という設定の意味が良く分からなくなってきました。
単純に「セル幅を均一に固定させる」という意味に捉えていましたが、「横幅100%にした上でセル幅を均一にする」という意味だったのでしょうか。

そして「右寄り配置」も、エディターと公開画面のどちらが正しいのか……表示を統一していただければと思います。


わいひら 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

<続き>

必要か分かりませんが、コードエディターのソースも添付させていただきます。

お忙しい中、お手数おかけいたします。
よろしくお願いします。


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

kkさん

①につきましては、おそらく、私の書き込みと同じ内容かと推測しています。

 

https://wp-cocoon.com/community/postid/56187/

 

②につきましては、テーマを一旦、Twenty Twenty Oneに変えてみると、WordPress.orgのやろうとしていることが、見えてくるかもしれません。

 

「左寄せ」「右寄せ」については、「画像」ブロック同様に、PC表示のときに、下にある段落ブロックの文字を画像や、tableの横へ回りこませる意図があるのではないかと推測します。

 

tableブロックの下に段落ブロックを設置して、適当に長めの文章を入力してみると、Twenty Twenty Oneでは、tableの横に文字が回り込むのではないかと思います。(おそらく左寄せ、右寄せを選択すると、テーブルの幅が狭くなり、横に文字のスペースができるのでは?)

 

最近のWordPressのデフォルトテーマは、1カラムのデザインになってきているので、PC表示では、画像やテーブルの横に文字を回りこませて、表現の幅を広げているのではないかと推測します。

 

スマホが普及する以前は、Webサイトといえば、パソコンで閲覧するもの、だったので、このCSSの「float」というプロパティで文字を画像の横に配置することが多かったようです。

 

それがまた、復活してきた、ということかもしれません。

 

ただ、Cocoonの場合は、コンテンツは親のコンテナの中にあり、コンテナの幅は、カラム幅として決められているので、「画像ブロック」以上に「テーブルブロック」では、「左寄せ」「右寄せ」を使う機会は少ないような気がします。

 

そもそも、「左寄せ」「右寄せ」が「float」プロパティを使っていて、投稿画面で下に追加した段落ブロックの文字が回りこむのだということが、周知されにくい、ということもあるのではないかと感じています。

This post was modified 3か月前 2回 by リフィトリー

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

GitHubのファイルを目につく部分は修正してみました。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

リフィトリー様

ありがとうございます。
②につきまして、Twenty Twenty Oneで比較してみました。

今まで画像利用した回り込みをさせたことはありますが、テーブルで回り込ませたデザインは考えたことがなかったので、目から鱗でした。

学校の教科書のように、画像+長い文章だけでなく、表+長い文章も利用が可能そうですね。
論文系や図鑑系のサイト様に需要がありそうです。

ただ、Twenty Twenty Oneでもエディターと実際の公開済画面が一部異なっていました。
これは大本がそういう仕様だった、ということなんですね。

ユーザーからすると見たまま編集できるのが一番楽なので、ここは今後のWordpressに期待でしょうか。

幅固定については、表を「float解除+横幅100%にして均一幅に固定する」という解釈ではなく「均一幅に固定する」だけの印象を持ちました。
この辺りも考えながらテーマ作りされてたら頭が爆発しそうですね。

幅固定の定義はわいひら様のお考えに委ねたいと思います。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

画像ファイルが大きくて添付できなかったみたいなので、再度添付してみますね。

その間にわいひら様が修正なさっていましたね。
すいません、確認させていただきます。


リフィトリー 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様

以下3ファイルを上書きで試してみました。
過不足ないでしょうか。
 css/admin.css
 css/gutenberg-editor.css
 amp.css

① デフォルト配置、左寄り配置、右寄り配置
  これらの配置の表に「セル幅を固定」させても反映しない

  ⇒ 反映することが確認できました。
    ありがとうございます。

② 右寄り配置(セル幅固定なし)を2つ以上並べるとエディター内の表がくっつく(回り込む)

  ⇒ 回り込みするのが正常ということで、確認しました。

 

②について、改めてご確認いただいてよろしいでしょうか。

「左寄り配置(セル幅固定なし)」を2つ以上並べた場合。
「右寄り配置(セル幅固定なし)」を2つ以上並べた場合。

エディター内では隙間が空いていますが、公開済記事には隙間がありませんでした。
もし私の上書きファイル見落としでしたら恐縮です。
教えていただければと思います。

ご確認よろしくお願いします。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

インストールしてみました。

 

tableの配置や「表のセル幅を固定」の表示については、とても良いような気がします。

 

あとはキャプションの位置でしょうか。

 

実際のサイトの表示では、「中央寄せ」のとき、キャプションがカラムの左によってしまっていてテーブルとズレてしまいます。

 

あとは、実際のWebサイトの表示では、キャプションは、テーブルの左端に寄るように統一されているようです。

 

ところが、エディター上では、キャプションは、「位置指定なし」ではテーブルの幅に関係なくカラム幅の中央に、それ以外はテーブルの幅の中央に配置されているようです。

 

あまり細かいところを突き詰めても、とも思いますが、エディターと実際の表示が異なると、フォーラムにお問い合わせが来そうな気もします。

 

This post was modified 3か月前 2回 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

kkさん

私のテスト環境ですと、右寄せを2つ並べても、実際の表示でマージンがあるみたいです。

 

 

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

KKさん

「LOCAL」を使うと、簡単にテスト環境がパソコンに作れます。

テーマのインストールも自分のパソコンなので、アップロードしなくて済みます。

 

LOCAL
https://localwp.com/

 

私もちょっと前に、わいひらさんの記事を読んで、導入しました。

 

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方

https://nelog.jp/local-by-flywheel-install

 

ただ、インストールデータの容量は1.5GBもあるので、そこは注意が必要かもしれません。

This post was modified 3か月前 2回 by リフィトリー

KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

リフィトリー様

リフィトリー様の実際の表示にはマージン設定がされているんですね。
では、私が手動で上書きした方に問題があった可能性が高いですね。

改めて、CSSフォルダをまるごとアップロードしてみましたが変わりませんでした……。
 ※cocoon-master > css
他にも必要なファイルがあったのかもしれませんね。

う~ん、一度わいひら様のご回答をお待ちしたいと思います。

ローカル環境って結構簡単に作れてしまうものなんですね。
すごく魅力的なご提案ありがとうございます。
非情に興味がありますが、インストール後の使用容量も考えると、自分のPCデータ整理の方が先でした。
壁が高い。

時期を見て利用させていただきます。

今更ですが環境情報も念のため貼らせていただきます。
----------------------------------------------
サイト名:test
サイトURL: https://test-test.tank.jp
ホームURL: https://test-test.tank.jp
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.8
PHPバージョン:7.4.21
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.67
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.5.1
カテゴリ数:1
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:845バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
----------------------------------------------


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

kkさん

私のテストサイトの環境は

スポイラー
テストサイト環境情報
----------------------------------------------
サイト名:demo-01
サイトURL: http://demo01.local
ホームURL: http://demo01.local
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.8
PHPバージョン:7.4.1
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0
サーバーソフト:nginx/1.16.0
サーバープロトコル:HTTP/1.0
エンコーディング:gzip, deflate
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.5.5
カテゴリ数:5
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:2496バイト
functions.phpサイズ:233バイト
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
EWWW Image Optimizer 6.2.4
Health Check & Troubleshooting 1.4.5
----------------------------------------------

 

パソコンは10年も使っている老機です。

This post was modified 3か月前 by リフィトリー

わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

以下3ファイルを上書きで試してみました。
過不足ないでしょうか。
 css/admin.css
 css/gutenberg-editor.css
 amp.css

必要な今アップデートはこちらに出てくるCSSファイルです。
https://github.com/yhira/cocoon/commit/361141a06f5e26adfeae6a8a898033653e7813bf
https://github.com/yhira/cocoon/commit/496091efcfb8562c1f6222c0545ffecdf73b1727
https://github.com/yhira/cocoon/commit/114191f034140c11686255c3ef420189d24e5881

もしそれでも不具合が出る場合は、該当部分だけブロックエディターののソースコードをいただいてよろしいでしょうか。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

テーブルキャプションの不具合修正版をGitHubにアップしておきました。
もし再度不具合がありましたら、該当部分のソースコードもいただけると幸いです。


KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

わいひら様

こちらの見落としてお手数をおかけして申し訳ありません。
以下ファイルを追加で上書きしてみました。
 scss/basic.scss
 scss/carousel.scss
 scss/gutenberg-editor.scss
 style.css

エディター画面の表の見え方と公開済記事の表の見え方が、同一になっていることが確認できました。
本当にありがとうございます。

 

キャプションも確認すべく、以下を改めて上書きしました。
 css/admin.css
 css/gutenberg-editor.css
 scss/content.scss
 scss/gutenberg-editor.scss
 amp.css
 style.css

リフィトリー様が仰っていた部分のキャプションについてはエディターと投稿済画面が同一になっていることが確認できました。
 ①デフォルト配置の表 エディター画面:左配置  公開済:左配置
 ②中央配置の表    エディター画面:中央配置 公開済:中央配置

この他の部分ですと私には思いつかなかったので、リフィトリー様のご確認を待ちたいと思います。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

@yhira さん

インストールしてみました。

 

完璧に修正されているように思います。

 

後出しで申し訳ありません。実際のサイトの表示で、キャプションがtableと、くっつきすぎているようなので、上側に少しマージンを設けたらどうかと思いました。(エディター上の表示は、まあ、位置さえ合っていれば問題ないかと)

.wp-block-table figcaption {
    margin-top: .5em;
}

 

This post was modified 3か月前 6回 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6435
 

KKさん

このようなトピックは、おそらく、テーマ作者様にとって、とても助かるものだと推測します。

テーマの機能の維持だけでもかなりのメンテナンス作業が要るはずなので、WordPressのアップデートの度に仕様が少しずつ変わるブロックエディターの全ての表示のチェックまでは、なかなか追いつかないのではないかと・・


わいひら 件のいいね!
KK
 KK
(@KK)
ゲスト
結合: 1年前
投稿: 48
Topic starter  

リフィトリー様

そのように仰っていただけると幸いです。
わいひら様にはいつも便利に使いやすく提供していただいているので、本当にありがたいです。
フォーラムでは他の方の書き込みや誘導先のリンク等で、いつも勉強させていただいております。

わいひら様

今回もまた迅速にご対応いただきましてありがとうございます。
返信が追い付かず日跨ぎになってしまい申し訳ありません。

トピックスを閉じさせていただきます。

今後ともよろしくお願いします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12928
わいひら - Facebookわいひら - Twitter
 

リフィトリーさん、KKさん、ご確認ありがとうございます!
ブロックエディターが追加されて、とても1人では確認しきれないのでご連絡いただけるとほんとに助かります。

今回もまた迅速にご対応いただきましてありがとうございます。
返信が追い付かず日跨ぎになってしまい申し訳ありません。

こちらこそ、夜の返信なので、何日もかかってしまって申しわけないです。
いろいろご確認いただきありがとうございます!


リフィトリー 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:3年

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

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

サービス運営期間:18年

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

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

サービス運営期間:5年

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

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

サービス運営期間:5年

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