【Cocoon】クラシックエディターで白抜きボックスを使う

WordPressの 無料テーマCocoonには、案内ボックスやアイコンリストボックスなど、見栄えが良く、便利なボックスが用意されています。そんな中、地味ではあるけど何かと使い勝手の良いボックスが『白抜きボックス』です。テキストや言語の記述を囲むだけでなく、段落ブロックや画像ブロックなど、異なるブロックを混在させても、白抜きボックスで囲むだけで見やすくなります。

白抜きボックスの作り方

枠が灰色

<p class="blank-box">白抜きボックス</p>

白抜きボックス

枠が赤色

<div class="blank-box bb-red">赤色</div>
赤色

枠が丸み

<div class="label-box-content block-box-content box-content">枠が丸み</div>
枠が丸み

見出しを表示

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box">
<div class="label-box-label block-box-label box-label"><span class="label-box-label-text block-box-label-text box-label-text">見出し</span></div>
<div class="label-box-content block-box-content box-content">コンテンツの中身を入力</div>
</div><div class="wp-block-cocoon-blocks-label-box-1 label-box block-box">
<div class="label-box-label block-box-label box-label">
<span class="label-box-label-text block-box-label-text box-label-text">見出し</span>
</div>
</div>

見出し

コンテンツの中身を入力

背景がチェック

えええ

背景がブルー

おおお

枠なしで背景がブルー

かかか

スポンサーリンク

↑記事が良かったら「いいね」をお願いします。お読みいただきありがとうございました。

くま吉

2010年から「ビジネスサイト制作教室」を主宰してきた現役ウエブデザイナーです。多くの生徒さんと一緒に、ワードプレスによるサイト作りに携わった経験を生かしてこの講座を始めました。

くま吉をフォローする
コクーンワードプレス
くま吉をフォローする
スマホ・パソコン・ワードプレスの使い方

コメント