自分用cocoonスタイルボックス【コピペ用】

概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

自分用のメモです。

cocoonのスタイルボックスを旧エディターで記述するときのHTMLになります。

スタイルボックスは様々なものが用意されています。無料のテーマでこれはなかなかすごいな～と思います。

スタイル ボックス（アイコン）

<div class="information-box">補足情報1</div>
<div class="question-box">補足情報2</div>
<div class="alert-box">注意喚起文</div>
<div class="memo-box">メモボックス</div>
<div class="comment-box">コメントボックス</div>

スタイル ボックス（案内）

<div class="primary-box">プライマリー</div>
<div class="secondary-box">セカンダリー</div>
<div class="success-box">サクセス</div>
<div class="info-box">インフォ</div>
<div class="warning-box">ワーニング</div>
<div class="danger-box">デンジャー</div>
<div class="light-box">ライト</div>
<div class="dark-box">ダーク</div>

スタイル ボックス（白抜き）

<div class="blank-box">ボックス白抜き</div>
<div class="blank-box bb-yellow">ボックス白抜き</div>
<div class="blank-box bb-red">ボックス白抜き</div>
<div class="blank-box bb-blue">ボックス白抜き</div>
<div class="blank-box bb-green">ボックス白抜き</div>

スタイル ボックス（タブ）

<div class="blank-box bb-tab bb-check">ボックスタブ check</div>
<div class="blank-box bb-tab bb-comment">ボックスタブ comment</div>
<div class="blank-box bb-tab bb-point">ボックスタブ point</div>
<div class="blank-box bb-tab bb-tips">ボックスタブ tips</div>
<div class="blank-box bb-tab bb-hint">ボックスタブ hint</div>
<div class="blank-box bb-tab bb-memo">ボックスタブ memo</div>
<div class="blank-box bb-tab bb-download">ボックスタブ doneload</div>
<div class="blank-box bb-tab bb-break">ボックスタブ　break</div>
<div class="blank-box bb-tab bb-amazon">ボックスタブ amazon</div>
<div class="blank-box bb-tab bb-ok">ボックスタブ ok</div>
<div class="blank-box bb-tab bb-ng">ボックスタブ ng</div>
<div class="blank-box bb-tab bb-good">ボックスタブ good</div>
<div class="blank-box bb-tab bb-bad">ボックスタブ bad</div>
<div class="blank-box bb-tab bb-profile">ボックスタブ profile</div>

スタイル ボックス（付箋風）

<div class="blank-box sticky"></div>
<div class="blank-box sticky st-yellow"></div>
<div class="blank-box sticky st-red"></div>
<div class="blank-box sticky st-blue"></div>
<div class="blank-box sticky st-green"></div>

まとめ

ワードプレステーマのCocoonにて、スタイルボックスを書く時のコピペ用一覧です。

旧エディターでhtmlを書く方法が、自分にとって一番スピードが出る書き方なので、直接コードを書きたいのですが、さすがに全部覚えるのはめんどくさいので、コピペ用にページ自体を作りました。

下書きのまま非表示にしておくのも考えたのですが、web上に上がっていたほうが便利なので、公開しておきます。

今後、ワードプレステーマだけでなく、他の言語でもコピペ用ページを作っていく予定です。