ワードプレス コクーン(Cocoon) スタイル設定おすすめサンプル

スポンサーリンク
記事作成
記事作成
この記事は約4分で読めます。
ワードプレスCocoon はスタイル設定が豊富。半分は備忘録的に見本を示しました。

目次

Cocoonスタイル設定(文字装飾)

インライン

テスト(太字)
テスト(赤字)
テスト(赤太字)
テスト(赤アンダーライン)
テスト(青)
テスト(青太字)
テスト(緑)
テスト(緑太字)
テスト(打ち消し線)
テスト(キーボードキー)

マーカー

テスト(黄色マーカー)
テスト(赤色マーカー)
テスト(青色マーカー)
テスト(黄色アンダーラインマーカー)
テスト(赤色アンダーラインマーカー)
テスト(青色アンダーラインマーカー)

Cocoonスタイル設定(囲み装飾)

ボックス(アイコン)

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

ボックス(案内)

テスト(プライマリー)
テスト(セカンダリー)
テスト(サクセス)
テスト(インフォ)
テスト(ワーニング)
テスト(デンジャー)
テスト(ライト)
テスト(ダーク)

ボックス(白抜き)

テスト(白抜き灰色)
テスト(白抜き黄色)
テスト(白抜き赤色)
テスト(白抜き青色)
テスト(白抜き緑色)

ボックス(タブ)

テスト(タブチェック:各色)
テスト(タブコメント:各色)
テスト(タブポイント:各色)
テスト(タブティップス:各色)
テスト(タブヒント:各色)
テスト(タブピックアップ:各色)
テスト(タブブックマーク:各色)
テスト(タブメモ:各色)
テスト(タブダウンロード:各色)
テスト(タブブレイク:各色)
テスト(タブAmazon:各色)
テスト(タブOK:各色)
テスト(タブNG:各色)
テスト(タブGOOD:各色)
テスト(タブBAD:各色)
テスト(タブプロフィール:各色)

ボックス(付箋風)

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

バッジ

テスト(バッジ:オレンジ)

テスト(バッジ:レッド)

テスト(バッジ:ピンク)

テスト(バッジ:パープル)

テスト(バッジ:ブルー)

テスト(バッジ:グリーン)

テスト(バッジ:イエロー)

テスト(バッジ:ブラウン)

テスト(バッジ:グレー)

マイクロコピー

テキスト

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

吹き出し

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

ボタン

テスト(ボタン小:各色あり)

テスト(ボタン中:各色あり)

テスト(ボタン大:各色あり)

Cocoonスタイル設定(リンクブログカード)

囲みブログカードラベル

以上です。

これだけあると、最初はお気に入りを探すのも大変ですね。

コメント