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-good-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"
コメント