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>見出し
コンテンツの中身を入力
背景がチェック
えええ
背景がブルー
おおお
枠なしで背景がブルー
かかか
コメント