【WordPress】 Cocoonテーマの文章を装飾できるスタイル一覧まとめ

ワードプレス

Cocoonの文章装飾機能スタイルが便利

Cocconテーマには、ラインマーカーや文章をおしゃれに囲むボックスなど文章を装飾するスタイルが豊富に存在します。

エディタ画面のスタイルから選べます。

インライン

インライン 太字

インライン 赤字

インライン 赤太字

インライン 赤アンダーライン

インライン 青

インライン 青太字

インライン 緑

インライン 緑太字

インライン 打ち消し線

インライン キーボードキー

マーカー

マーカー 黄色マーカー

マーカー 赤色マーカー

マーカー 青色マーカー

マーカー 黄色アンダーラインマーカー

マーカー 赤色アンダーラインマーカー

マーカー 青色アンダーラインマーカー

ボックス(アイコン)

補足情報(i)
補足情報(?)
補足情報(!)
補足情報(メモ)
補足情報(コメント)
補足情報(OK)
補足情報(NG)
補足情報(GOOD)
補足情報(BAD)
補足情報(プロフィール)

ボックス(案内)

ボックス(案内) プライマリー(濃い水色)
ボックス(案内) セカンダリー(濃い灰色)
ボックス(案内) サクセス(薄い緑)
ボックス(案内) インフォ(薄い青)
ボックス(案内) ワーニング(薄い黄色)
ボックス(案内) デンジャー(薄い赤色)
ボックス(案内) ライト(白色)
ボックス(案内) ダーク(暗い灰色)

ボックス(白抜き)

ボックス(白抜き)灰色
ボックス(白抜き)黄色
ボックス(白抜き)赤色
ボックス(白抜き)青色
ボックス(白抜き)緑色

ボックス(タブ)

ボックス(チェック)灰色
ボックス(チェック)黄色
ボックス(チェック)赤色
ボックス(チェック)青色
ボックス(チェック)緑色

ボックス(付箋風)

ボックス(付箋風)灰色
ボックス(付箋風)黄色
ボックス(付箋風)赤色
ボックス(付箋風)青色
ボックス(付箋風)緑色

バッジ

バッジ バッジ(オレンジ)

バッジ バッジ(レッド)

バッジ バッジ(ピンク)

バッジ バッジ(パープル)

バッジ バッジ(ブルー)

バッジ バッジ(グリーン)

バッジ バッジ(イエロー)

バッジ バッジ(ブラウン)

バッジ バッジ(グレー)

マイクロコピー

マイクロコピー テキスト(上) 左側
マイクロコピー テキスト(上) 中央
マイクロコピー テキスト(上) 右側
マイクロコピー テキスト(下) 左側
マイクロコピー テキスト(下) 中央
マイクロコピー テキスト(下) 右側
マイクロコピー 吹き出し(上)左側
マイクロコピー 吹き出し(上)中央
マイクロコピー 吹き出し(上)右側
マイクロコピー 吹き出し(下)左側
マイクロコピー 吹き出し(下)中央
マイクロコピー 吹き出し(下)右側

ボタン

アフィリンクなどをボタンにしたい場合は【囲みボタン】を使う。

⇒ 囲みボタンへ移動

ボタン レッド(小)

ボタン レッド(中)

ボタン レッド(大)

ボタンの小・中・大のバリエーションは同じなので色だけボタン(小)で紹介していきます。

ボタン ピンク(小)

ボタン パープル(小)

ボタン ディープパープル(小)

ボタン インディゴ【紺色】(小)

ボタン ブルー(小)

ボタン ライトブルー(小)

ボタン シアン(小)

ボタン ティール(小)

ボタン グリーン(小)

ボタン ライトグリーン(小)

ボタン ライム(小)

ボタン イエロー(小)

ボタン アンバー(小)

ボタン オレンジ(小)

ボタン ディープオレンジ(小)

ボタン ブラウン(小)

ボタン グレー(小)

囲みボタン

アフィリンクなどをボタンにしたい場合は【囲みボタン】を使う。
aタグをspanタグで囲んでclassでスタイリング(見た目)を決定しているのでaタグ内を変更する必要がない。

<span class="btn-wrap btn-wrap-red">
 <a href="https://applingo.tokyo/article/2263">
  囲みボタン レッド(小)
 </a>
</span>

囲みボタン レッド(小)

囲みボタン レッド(中)

囲みボタンの小・中・大のバリエーションは同じなので色だけボタン(小)で紹介していきます。

囲みボタン ピンク(小)

囲みボタン パープル(小)

囲みボタン ディープパープル(小)

囲みボタン インディゴ【紺色】(小)

囲みボタン ブルー(小)

囲みボタン ライトブルー(小)

囲みボタン シアン(小)

囲みボタン ティール(小)

囲みボタン グリーン(小)

囲みボタン ライトグリーン(小)

囲みボタン ライム(小)

囲みボタン イエロー(小)

囲みボタン アンバー(小)

囲みボタン オレンジ(小)

囲みボタン ディープオレンジ(小)

囲みボタン ブラウン(小)

囲みボタン グレー(小)

↓ちなみに編集エディタ上ではこんな感じ

囲みブログカードラベル

ブログカードはリンクを貼ると自動的に作成されるカードリンクです。

↓ちなみに編集エディタ上ではこんな感じになります。

コメント