Cocoonのボックスをクラシックエディタで記述する

Cocoonのボックス

Cocoonのボックス

このサイトはWordPressテーマとしてCocoonを使っています。

CocoonではWordPressのブロックエディタで様々な「ボックス」を記述できます。

アイコンボックス
案内ボックス
白抜きボックス
付箋風ボックス
タブボックス

これらはWordPressのクラシックエディタでも<div>タグにclassを指定すれば記述できます。

アイコンボックス

<div>タグのclassに”◯◯◯-box”を指定します。

class=”information-box”
class=”question-box”
class=”alert-box”
class=”memo-box”
class=”comment-box”
class=”is-style-ok-box”
class=”is-style-ng-box”
class=”is-style-bad-box”
class=”is-style-profile-box”

案内ボックス

<div>タグのclassに”◯◯◯-box”を指定します。

class=”primary-box”
class=”secondary-box”
class=”success-box”
class=”info-box”
class=”warning-box”
class=”danger-box”
class=”light-box”
class=”dark-box”

白抜きボックス

<div>タグのclassに”blank-box”を指定します。

class=”blank-box”

“blank-box bb-〇〇”で灰色以外の色を指定できます。

class=”blank-box bb-red”
class=”blank-box bb-pink”
class=”blank-box bb-purple”
class=”blank-box bb-blue”
class=”blank-box bb-green”
class=”blank-box bb-orange”
class=”blank-box bb-yellow”
class=”blank-box bb-brown”
class=”blank-box bb-grey”
class=”blank-box bb-black”
class=”blank-box bb-deep”
class=”blank-box bb-indigo”
class=”blank-box bb-light-blue”
class=”blank-box bb-cyan”
class=”blank-box bb-teal”
class=”blank-box bb-green”
class=”blank-box bb-lime”
class=”blank-box bb-amber”
class=”blank-box bb-deep-orange”
class=”blank-box bb-white”

付箋風ボックス

<div>タグのclassに”blank-box sticky”を指定します。

class=”blank-box sticky”

“blank-box sticky st-〇〇”で灰色以外の色を指定できます。

class=”blank-box sticky st-red”
class=”blank-box sticky st-blue”
class=”blank-box sticky st-green”
class=”blank-box sticky st-yellow”

タブボックス

<div>タグのclassに”blank-box sticky st-tab bb-◯◯◯”を指定します。

class=”blank-box bb-tab bb-check”

“blank-box sticky st-tab bb-◯◯◯ bb-△△△”で灰色以外の色を指定できます。

class=”blank-box bb-tab bb-comment bb-red”
class=”blank-box bb-tab bb-point bb-pink”
class=”blank-box bb-tab bb-tips bb-purple”
class=”blank-box bb-tab bb-hint bb-blue”
class=”blank-box bb-tab bb-pickup bb-green”
class=”blank-box bb-tab bb-bookmark bb-orange”
class=”blank-box bb-tab bb-memo bb-yellow”
class=”blank-box bb-tab bb-download bb-brown”
class=”blank-box bb-tab bb-break bb-grey”
class=”blank-box bb-tab bb-amazon bb-black”
class=”blank-box bb-tab bb-ok bb-deep”
class=”blank-box bb-tab bb-ng bb-indigo”
class=”blank-box bb-tab bb-good bb-light-blue”
class=”blank-box bb-tab bb-bad bb-cyan”
class=”blank-box bb-tab bb-profile bb-teal”

コメント

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