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

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

囲みボックスの下側に余白ができてしまう
 
共有:
通知
すべてクリア

[解決済] 囲みボックスの下側に余白ができてしまう

13 投稿
3 ユーザー
4 Reactions
4,075 表示
(@へみ)
New Member
結合: 4年前
投稿: 2
Topic starter  

いつもお世話になっております。Cocoonで楽しくブログ書かせて頂いています。

 

1週間ほどまえから急に囲みボックスの体裁が崩れてしまいました。

https://acc0e4uqh6.com/2281

↑のページの囲みボックスは、エディタ画面で指定した

<div style="border: 2px solid #ff9999; padding: 10px; border-radius: 15px; background: #fff4f4;">

というボックスや、

CCS画面で作った

margin: 1em auto;
padding: 1em;
width: 90%;
border: 1px solid #ccc; /* 枠線 */
background-color: #fff; /* 背景色 */
box-shadow: 1px 1px 2px #acacac;
}

 

というボックスを使っています。

 

感覚としては、行間の余白が行の上に付いていたのに下に付いてしまった感じです。

Cocoon設定の本文を変更しても改善されないのですが、他に弄れそうなところはありますでしょうか。


   
引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、へみ さん

Cocoonは新しいブロックエディタ―に対応するため、余白の仕様を変更したようです。

 

なので、独自の囲みボックスの場合でも、Cocoonの仕様に沿った、Classを、HTMLタグに設定しなければならないのかもしれません。

 

記事本文内のリスト要素には、全体タブの設定で、設定したマージンが下方向に付与されてしまうので、それを消すための、CSSが親テーマで設定されています。

 

具体的な方法としては、囲みボックスに

class="block-box"

を設定すれば、イケそうです。

 

<div class="kakomi-box3 block-box">
<ul>
<li>テトラ2-ヘキシルデカン酸アスコルビルEX</li>
<li>油溶性プラセンタエキス</li>
</ul>
</div>

とか、

 

<div class="block-box" style="border: 2px solid #ff9999; padding: 10px; border-radius: 15px; background: #fff4f4;">

というようにすれば、イケそうな気がします。

 

This post was modified 4年前 by リフィトリー

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

へみ さん

Class名は、「block-box」以外にも、以下のようなものがあるようです。

.article blockquote :last-child,
.article .wp-block-media-text__content :last-child,
.article .wp-block-columns :last-child,
.article .column-left :last-child,
.article .column-center :last-child,
.article .column-right :last-child,
.article .column-wrap :last-child,
.article .timeline-box :last-child,
.article .wp-block-cover :last-child,
.article .blogcard-type :last-child,
.article .btn-wrap :last-child,
.article .wp-block-group :last-child,
.article .wp-block-gallery :last-child,
.article .block-box :last-child,
.article .blank-box :last-child,
.article .is-style-blank-box-red :last-child,
.article .is-style-blank-box-navy :last-child,
.article .is-style-blank-box-blue :last-child,
.article .is-style-blank-box-yellow :last-child,
.article .is-style-blank-box-green :last-child,
.article .is-style-blank-box-pink :last-child,
.article .is-style-blank-box-orange :last-child,
.article .is-style-sticky-gray :last-child,
.article .is-style-sticky-yellow :last-child,
.article .is-style-sticky-red :last-child,
.article .is-style-sticky-blue :last-child,
.article .is-style-sticky-green :last-child,
.article .common-icon-box :last-child,
.article .info-box :last-child,
.article .primary-box :last-child,
.article .success-box :last-child,
.article .warning-box :last-child,
.article .danger-box :last-child,
.article .secondary-box :last-child,
.article .light-box :last-child,
.article .dark-box :last-child,
.article .toc :last-child {
margin-bottom: 0;
}

でも、Class名によっては、別のデザインが適用されてしまうかもしれません。

 

わいひらさん

これ、何か他に良い方法は、ないでしょうか?

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
返信引用
(@へみ)
New Member
結合: 4年前
投稿: 2
Topic starter  

@leafytree

リフィトリーさん

早々の対処法、ありがとうございます!タグを書き換えてみたところ、キレイに表示されました ? 

助かりました ? 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17033
 

修正前は添付画像のような感じだったのかな。
今仕様の場合、独自ボックスの場合は、どうしようもないのかも。
独自CSSに対応できるように書くとなると、どう書けばいいんだろう…。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

対処する前は、わいひらさんに添付いただいた画像のとおりでした。

 

 

class="block-box"

には、何かスタイルが設定されてたりしますか?

 

もし、何もスタイルが設定されていなければ、この「class="block-box"」を「last-child」のマージンを消すのに使い回せるかなと思ったので・・・

This post was modified 4年前 4回 by リフィトリー

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17033
 

スタイルは設定されていると思います。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

親テーマのCSSファイルを検索すると、「.block-box」は他のセレクタとの組み合わせでスタイルを指定しているようでしたので、単体でのスタイルは無いのかな?と思ったのですが、違いましたか・・

 

だとすると、「last-child」を回避するための、何もスタイルされていない、Class セレクタがあると、便利かなと思いますが、いかがでしょうか?

 

独自の囲みボックス等に使い回せるかと・・

This post was modified 4年前 by リフィトリー

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17033
 

スタイルが当たっているか当たっていないかで言えば、当たっているので「設定されている」といいましたが、単体でスタイルは当たってないです。

独自カスタマイズのボックスにできるだけ対応するには、.entry-content > div > :last-child もしくは.entry-content > * > :last-child みたいなCSSセレクタを書いておいても良いのかもしれませんね。
まだ試してはないですけど。

投稿者:: @leafytree

だとすると、「last-child」を回避するための、何もスタイルされていない、Class セレクタがあると、便利かなと思いますが、いかがでしょうか?

申し訳ないです。これについては、ちょっと意図がわかりませんでした。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

投稿者:: @leafytree

だとすると、「last-child」を回避するための、何もスタイルされていない、Class セレクタがあると、便利かなと思いますが、いかがでしょうか?

これにつきましては、書き方を誤っていました。

 

むしろ、【親テーマのCSSのコードで指定された「:last-child」を利用するには】と書くべきでした。

 

 

投稿者:: @yhira

独自カスタマイズのボックスにできるだけ対応するには、.entry-content > div > :last-child もしくは.entry-content > * > :last-child みたいなCSSセレクタを書いておいても良いのかもしれませんね。

これにつきましては、対処法としてひとつの手段かと思いますが、ちょっと適用範囲が広くなってしまうような気もするので、試してみないと、という感じを持ちました。

 

投稿者:: @yhira

スタイルが当たっているか当たっていないかで言えば、当たっているので「設定されている」といいましたが、単体でスタイルは当たってないです。

「.block-box」の Class 単体でスタイルが当たっていなければ、いまのところは、流用しても良さそうな気もします。

 

This post was modified 4年前 by リフィトリー

   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

へみ さん

やはり、独自の囲みボックスの場合は、以下のようにご案内差し上げる方が良いのかもしれません。

 

HTML

<div class="kakomi-box3">
<ul>
<li>テトラ2-ヘキシルデカン酸アスコルビルEX</li>
<li>油溶性プラセンタエキス</li>
</ul>
</div>

CSS

.article .kakomi-box3 :last-child {
margin-bottom: 0;
}

 

This post was modified 4年前 by リフィトリー

   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17033
 

とりあえず、当サイトはテスト的に.entry-content > div > :last-childCSSを適用してみました。
ただこれは、今回のへみ さんのボックスのような、単純なものにしか意味はないですけど^^;
ちょっと凝った構造のボックスだと適用されないですし、エディター上でも適用されない。
今のところ、特に不具合はないように見えます。
ただ、当サイトで使っているうちに不具合が見つかり次第やめます。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

Cocoonのサイトを使ってのご検証、恐縮です。


   
わいひら reacted
返信引用
共有:

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

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

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

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

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

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

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

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