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

スタイルの余白(Cocoon設定の本文余白)に関する不具合 | 開発者向けフォーラム | 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)はこちら

スポンサーリンク
スタイルの余白(Cocoon設定の本文...
 
共有:
通知
すべてクリア

スタイルの余白(Cocoon設定の本文余白)に関する不具合  


ろこ
(@lococo)
Honorable Memberサイト
結合: 3年前
投稿: 684
2020年8月9日 23:58  

プレビュー表示に含まれる問題の一部ですが、トピックを別にしました。

以下は現在に至るまでの流れです。

 

 

ブロック構造(親ブロック、子ブロック、孫ブロック…)に対して子ブロック以下に本文余白の設定が反映されません。

各コンポーネントごとに指定されているデフォルトの余白が異なる(1em、1.2emなど)ことから調整も難しく、設定値によってはマイクロコピーが上下ブロックと重なる不具合等も確認されていました。

 

本文余白の設定は

  1. 実際に表示されるページの本文
  2. 編集画面内の各種ブロック

の両方に影響するため、コンポーネントベースで調整しやすくするにはスタイル全体の余白設計やブロックのコーディングから見直すことも考える必要があります。

また、各コンポーネントは本文以外でも用いられることを前提とした方がよい(ショートコード・ウィジェットのブロック化やウィジェットエリアのブロックエディター化なども踏まえる)ため、修正時には合わせて視野に入れておくことも提案しました。

例: https://www.slideshare.net/manabuyasuda1/ss-71261608

 


 

現時点で明らかな修正点(#38060)は、

1. テーブルブロックは、figureタグとtableタグの関係からテーブルとスクロールバーの間に余白が入ってしまう。

2. 以下のブロックに余白設定が反映されていない。

  • テーブルブロック
  • グループブロック
  • 埋め込みブロック
  • 案内ボックスブロック
  • 囲みボタンブロック

3. グループブロック内のlast-childにmargin-bottom:0が指定されていない。

です。

加えて、ブロックエディター側のテーブルブロックでは、

.wp-block-table {
  overflow: hidden;
}

の上書き指定によって横スクロールが表示されない点について理由が分かっていないため、不具合かどうか確認をお願いします。

 

以下の質問内容

記事本文以外(articleクラス外)のブロックエディターで作成するコンテンツについては、それぞれの箇所やブロック毎に別途CSSセレクタを書いていくという認識でよろしいでしょうか?

が疑問点で、具体的にはどの範囲をテーマ側で対応する予定なのかが見えてこないことにより、どのように確認作業をしてよいのかが分かりません。

例えば、ウィジェットエリア内での各コンポーネント使用を考慮すると、現時点ではarticleクラス外での各コンポーネントのスタイルやarticleクラス内外でのショートコード(ウィジェット)等の余白指定に対してはほとんど余白指定がないため、ユーザー側で各自指定する必要があります。

どこまでテーマ側の不具合として書き込み、どこからユーザー側での対応になるのかを明確にしてほしいです。

 

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

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

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

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

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

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

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

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

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

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

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


わいひら 件のいいね!
引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月11日 20:40  

とりあえず、グループブロックと、囲みボタンブロックの対応だけしたものです。

  • テーブルブロック
  • グループブロック
  • 埋め込みブロック
  • 案内ボックスブロック
  • 囲みボタンブロック

https://github.com/yhira/cocoon/tree/margin

残りも空いた時間に修正できればと思います。

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月11日 20:48  
投稿者:: @lococo

記事本文以外(articleクラス外)のブロックエディターで作成するコンテンツについては、それぞれの箇所やブロック毎に別途CSSセレクタを書いていくという認識でよろしいでしょうか?

今のところはそのように考えています。
ただ、一度どういった影響が出るのか、全体に適用するコードも書いてみて、問題なければ全体に適用するようにしようと思います。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月11日 21:53  
投稿者:: @lococo

加えて、ブロックエディター側のテーブルブロックでは、

.wp-block-table {
  overflow: hidden;
}

の上書き指定によって横スクロールが表示されない点について理由が分かっていないため、不具合かどうか確認をお願いします。

これについては、理由は失念してしまいました。
削除して動作を確認してみたところ、問題ないようなので削除しておきました。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月12日 20:18  
投稿者:: @yhira

ただ、一度どういった影響が出るのか、全体に適用するコードも書いてみて、問題なければ全体に適用するようにしようと思います。

.article→.bodyに変更して試してみたんですが、h見出し全てに余白を出力させるのかとか、pタグ全てに余白を出力させると、問題が出るので一旦元に戻しました。
h1-h6、pとかだけ.articleにするとかでもいいのかもしれませんが、一貫性がないのでどうしたものかと。

とりあえず先に他のパーツの不具合を修正してからにしようと思います。


返信引用
ろこ
(@lococo)
Honorable Memberサイト
結合: 3年前
投稿: 684
2020年8月14日 19:14  

記事本文以外でも別途CSSセレクタを書いていく予定ということで、Gutenbergプラグインでβ版の機能は試用していますでしょうか?

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

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

スタイル設計の方向性として、ウィジェットなどはGutenbergプラグインの方が今後生じ得る問題点などを確認しやすいと思います。

 

.article→.bodyに変更して試してみたんですが、h見出し全てに余白を出力させるのかとか、pタグ全てに余白を出力させると、問題が出るので一旦元に戻しました。
h1-h6、pとかだけ.articleにするとかでもいいのかもしれませんが、一貫性がないのでどうしたものかと。

について具体的にどのような問題が出たのかは確認していませんが、現状は.article内のみで対応したとしても近いアップデートで同様の問題に直面する可能性が考えられます。

https://make.wordpress.org/core/2020/08/13/wordpress-5-6-release-planning/

次回アップデートではウィジェット等のブロックエディター化が予定されていますし、順次ブロックエディターの範囲が拡大されていくことを考慮しておかなければ、アップデートの度に修正が大変になるかもしれません。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月15日 19:39  
投稿者:: @lococo

記事本文以外でも別途CSSセレクタを書いていく予定ということで、Gutenbergプラグインでβ版の機能は試用していますでしょうか?

現在「開発版 (5.6-alpha-48792) 」で確認しているのですが、プラグインのβ版機能はまた違う機能ということでしょうか。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月15日 19:49  
投稿者:: @lococo

次回アップデートではウィジェット等のブロックエディター化が予定されていますし、

これについて、とりあえず次回は本文での使用ということですよね?
本分以外でそのうちブロックエディター化があるのかもしれませんが、とりあえず今はこのトピックの本文余白の対応を先にやってしまおうと思います。
いきなり全てをやってしまおうとすると、どちらの問題で不具合が出ているのかわかりづらくなるので、全面対応にするにしてもとりあえず本文をしてしまってからということにしようと思っています。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月15日 19:54  
投稿者:: @lococo

 

  • テーブルブロック
  • グループブロック
  • 埋め込みブロック
  • 案内ボックスブロック
  • 囲みボタンブロック

 

一応、上記ブロックの下の余白には対応させてみました。
https://github.com/yhira/cocoon/tree/margin


返信引用
ろこ
(@lococo)
Honorable Memberサイト
結合: 3年前
投稿: 684
2020年8月15日 22:42  

確認しました。

 

テーブルブロックについては.wp-block-tableに余白が入るようにはなりましたが、テーブルとキャプションの間に入ってしまう余白が取れていません。
.wp-block-tableとtableタグの両方に二重で余白設定が反映されています。

また、グループブロックには余白設定(+last-child)がまだ反映されていないようです。
スタイル設定で確認すると分かりやすいかと思います。

 

以上の修正点に加えて、ショートコードの余白設定が未対応なので対応させる必要があります。

 


 

現在「開発版 (5.6-alpha-48792) 」で確認しているのですが、プラグインのβ版機能はまた違う機能ということでしょうか。

細かくはまだチェックしていませんが、GutenbergプラグインはGutenberg最新版なので、WordPress開発版にあるGutenbergとはバージョンやテストできる機能等、基本的には異なります。

 

とりあえず次回は本文での使用ということですよね?
本分以外でそのうちブロックエディター化があるのかもしれませんが、とりあえず今はこのトピックの本文余白の対応を先にやってしまおうと思います。

本文での使用というのがどういうものかはよく分かりませんが、

https://make.wordpress.org/core/2020/08/13/wordpress-5-6-release-planning/

に書かれている次回のリリース計画では、

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

に添付した画像後半部分のように、WordPress「外観」⇒「ウィジェット」にあるウィジェット設定がブロックエディター化され、全てのブロックが各ウィジェットエリア内で使用できるようになる予定です。

現時点でもテキストウィジェット(旧エディター)等を使用すれば、各種コンポーネントをウィジェットエリア内で使用でき、現状の修正内容ではこちらへの対応も必要なので、少なくともウィジェットエリア周りで予定されている上記の機能を考慮に入れて修正した方がよいのではないかということです。

 

とりあえず今はこのトピックの本文余白の対応を先にやってしまおうと思います。

本文内と本文外の余白指定を完全に切り離し、本文外は本文内に影響しない形で修正していくという理解でよろしいでしょうか?


返信引用
ろこ
(@lococo)
Honorable Memberサイト
結合: 3年前
投稿: 684
2020年8月16日 15:01  

修正点の追加です。

少なくとも、

  • カラムブロック
  • メディアと文章ブロック
  • タイムラインブロック

にリストブロックを入れた場合は余白設定が反映されません。

 

また、

見出しにマイクロテキストが重なってしまう

を見て、見出しブロック+マイクロテキスト(上寄り)を確認したところ、余白設定の値によっては重なってしまう不具合があります。

 


 

ショートコードについては、

  • 新着記事リスト
  • 人気記事リスト
  • ナビカード
  • ボックスメニュー
  • ランキング

は確認し、ランキング以外は余白設定が反映されていないようです。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月16日 20:45  


こちらのソースコードをこちらでいただいてよろしいでしょうか。
同じ環境で動作確認してみます。
https://notepad.pw/

投稿者:: @lococo

本文内と本文外の余白指定を完全に切り離し、本文外は本文内に影響しない形で修正していくという理解でよろしいでしょうか?

まずは本文(.article)で今回の余白の修正してしまった後で、問題なければ全体に対応する修正を出来ればと思っています。


返信引用
ろこ
(@lococo)
Honorable Memberサイト
結合: 3年前
投稿: 684
2020年8月16日 21:27  

テーブルブロックとグループブロックのソースです。

https://notepad.pw/code/a2q3fe3j8

 

まずは本文(.article)で今回の余白の修正してしまった後で、問題なければ全体に対応する修正を出来ればと思っています。

どのような設計かは分かりませんが、

  1. 本文
  2. 全体

の順に対応するのであれば、全体に対応する修正は本文のみに対応する修正に影響を与えない形でお願いします。


わいひら 件のいいね!
返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11038
わいひら - Facebookわいひら - Twitter
2020年8月17日 21:45  

どうしても不具合が再現できなかったのですが、どうやら設定の問題のようでした。
余白を調整したものをアップしておきまし

投稿者:: @lococo

どのような設計かは分かりませんが、

  1. 本文
  2. 全体

の順に対応するのであれば、全体に対応する修正は本文のみに対応する修正に影響を与えない形でお願いします。

もちろんそのつもりではいますが、意図せず意図せず影響が出る可能性はないとは言えないかもしれません。


返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

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

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

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

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

クーポンコード:PK4JK4RJ

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

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

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

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

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

◎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をコピーしました