サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021年2月11日 09:22
いつもお世話になっております。Cocoonで楽しくブログ書かせて頂いています。
1週間ほどまえから急に囲みボックスの体裁が崩れてしまいました。
↑のページの囲みボックスは、エディタ画面で指定した
<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設定の本文を変更しても改善されないのですが、他に弄れそうなところはありますでしょうか。
2021年2月11日 10:21
前略、へみ さん
Cocoonは新しいブロックエディタ―に対応するため、余白の仕様を変更したようです。
なので、独自の囲みボックスの場合でも、Cocoonの仕様に沿った、Classを、HTMLタグに設定しなければならないのかもしれません。
記事本文内のリスト要素には、全体タブの設定で、設定したマージンが下方向に付与されてしまうので、それを消すための、CSSが親テーマで設定されています。
具体的な方法としては、囲みボックスに
class="block-box"
を設定すれば、イケそうです。
<div class="kakomi-box3 block-box">
<ul>
<li>テトラ2－ヘキシルデカン酸アスコルビルＥＸ</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 リフィトリー
2021年2月11日 10:26
へみ さん
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
Topic starter
2021年2月11日 11:53
2021年2月11日 20:29
修正前は添付画像のような感じだったのかな。
今仕様の場合、独自ボックスの場合は、どうしようもないのかも。
独自CSSに対応できるように書くとなると、どう書けばいいんだろう…。
2021年2月12日 19:17
スタイルは設定されていると思います。
2021年2月13日 20:30
スタイルが当たっているか当たっていないかで言えば、当たっているので「設定されている」といいましたが、単体でスタイルは当たってないです。
独自カスタマイズのボックスにできるだけ対応するには、.entry-content > div > :last-child もしくは.entry-content > * > :last-child みたいなCSSセレクタを書いておいても良いのかもしれませんね。
まだ試してはないですけど。
だとすると、「last-child」を回避するための、何もスタイルされていない、Class セレクタがあると、便利かなと思いますが、いかがでしょうか？
申し訳ないです。これについては、ちょっと意図がわかりませんでした。
2021年2月13日 20:42
@yhira さん
だとすると、「last-child」を回避するための、何もスタイルされていない、Class セレクタがあると、便利かなと思いますが、いかがでしょうか？
これにつきましては、書き方を誤っていました。
むしろ、【親テーマのCSSのコードで指定された「:last-child」を利用するには】と書くべきでした。
独自カスタマイズのボックスにできるだけ対応するには、.entry-content > div > :last-child もしくは.entry-content > * > :last-child みたいなCSSセレクタを書いておいても良いのかもしれませんね。
これにつきましては、対処法としてひとつの手段かと思いますが、ちょっと適用範囲が広くなってしまうような気もするので、試してみないと、という感じを持ちました。
スタイルが当たっているか当たっていないかで言えば、当たっているので「設定されている」といいましたが、単体でスタイルは当たってないです。
「.block-box」の Class 単体でスタイルが当たっていなければ、いまのところは、流用しても良さそうな気もします。
This post was modified 4年前 by リフィトリー
2021年2月14日 19:33
とりあえず、当サイトはテスト的に.entry-content > div > :last-childCSSを適用してみました。
ただこれは、今回のへみ さんのボックスのような、単純なものにしか意味はないですけど^^;
ちょっと凝った構造のボックスだと適用されないですし、エディター上でも適用されない。
今のところ、特に不具合はないように見えます。
ただ、当サイトで使っているうちに不具合が見つかり次第やめます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。