Cocoonテーマの見出し付きのボックスで枠線が二重になるエラーの修正方法

確認してみたところ、枠線の色を変更した際に以下のように枠線が2重になってしまうエラーようです。

Cocoonユーザーの方で、これらのボックスを利用されている方は、かなりビックリされたのではないでしょうか。

とお困りの方向けに、対策用のCSSを作成しました。

Cocoonの子テーマの「style.css」に追記するだけで、全記事に反映されるので、よろしければお使いください。

Cocoonテーマのボックス段落で線が2重になるエラーの修正方法

今回のエラーの場合、4行のCSSだけで対応できます。

.tab-caption-box,
.label-box {
	border:none;
}

こちらのCSSをCocoon子テーマの「style.css」に追記するだけです。

もし「style.css」への追記方法がわからないという方は、以下の記事の「【簡単】ワードプレスのCSSで文字色を変更する方法を解説」→「２）CSSで指定する」が参考になると思います。

もちろん、この4行を追記すれば全記事に反映されるので、1つ1つ修正する必要はありませんよ。

先程のCSSの追記がうまくいっていれば、投稿画面での崩れも解消されていると思います↓

もし、投稿画面の二重線が改善されない方は、先程のCSSではなく以下のCSSを追記してみてください↓

html .body .tab-caption-box,
html .body .label-box {
	border: none;
}

Cocoonテーマのボックス段落で線が2重になるエラーについて

この記事を書いている現時点で、この現象が発生しているのは、以下の2つのようです。

今回、エラーとなっていた「COCOON汎用ボックス」には、もう一つ「見出しボックス」というものもあるのですが、こちらは構成上、今回のエラーで線が2重になることはないのでご安心ください。

まとめ

今回のCocoonの表示エラーは、どうやら製作者の方側のミスのようですね。

おそらく、次のアップデート時には解消されると思いますが、それまでの間は、今回のCSSで対応していたければと思い、簡単な対策方法を紹介しました。

お役に立てば幸いです。

追記するCSSはこちら↓

.tab-caption-box,
.label-box {
	border:none;
}

投稿画面の崩れが直らない方はこちら↓

html .body .tab-caption-box,
html .body .label-box {
	border: none;
}