WordPress無料テーマCocoonのスタイル一覧

(ほぼ自分のための)Cocoonのスタイル一覧です。

Cocoonビジュアルエディタで設定できるスタイルを一覧にしました。

Cocoon、出来ることが多すぎてまとめとかないと忘れちゃうんですよね…。

HTMLソースのサンプル付きです。

※nullllogでは少しCSSをいじっているので公式とは表示が違うかもです。特にブログカード。

 

 

WordPress無料テーマCocoonのスタイル一覧

スタイル　インライン

インラインHTMLソースサンプル（太字）

<span class="bold">インラインHTMLソースサンプル（太字）</span>

 

スタイル　インライン　太字
スタイル　インライン　赤字
スタイル　インライン　赤太字
スタイル　インライン　赤アンダーライン
スタイル　インライン　青
スタイル　インライン　青太字
スタイル　インライン　緑
スタイル　インライン　緑太字
スタイル　インライン　打ち消し線
スタイル　インライン　キーボードキー

 

スタイル　マーカー

マーカーHTMLソースサンプル（赤色）

<span class="marker-red">マーカーHTMLソースサンプル（赤色）</span>

 

スタイル　マーカー　黄色マーカー
スタイル　マーカー　赤色マーカー
スタイル　マーカー　青色マーカー
スタイル　マーカー　黄色アンダーラインマーカー
スタイル　マーカー　赤色アンダーラインマーカー
スタイル　マーカー　青色アンダーラインマーカー

 

スタイル　フォントサイズ

フォントサイズHTMLソースサンプル（12px）

<span class="fz-12px">フォントサイズHTMLソースサンプル（12px）</span>

 

フォントサイズ　12px
フォントサイズ　14px
フォントサイズ　16px
フォントサイズ　18px
フォントサイズ　20px
フォントサイズ　22px
フォントサイズ　24px
フォントサイズ　28px
フォントサイズ　32px
フォントサイズ　36px
フォントサイズ　40px
フォントサイズ　44px
フォントサイズ　48px

 

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

ボックスHTMLソースサンプル（アイコン　補足情報(?)）

<div class="information-box common-icon-box question-box">ボックスHTMLソースサンプル（アイコン　補足情報(?)）</div>

 

 

スタイル　ボックス　案内

ボックスHTMLソースサンプル（案内　プライマリー）

<div class="primary-box">ボックスHTMLソースサンプル（案内　プライマリー）</div>

 

 

スタイル　ボックス　白抜き

ボックスHTMLソースサンプル（白抜き　黄色）

<div class="blank-box bb-yellow">ボックスHTMLソースサンプル（白抜き　黄色）</div>

 

スタイル　ボックス　タブ

チェック

タブボックスHTMLソースサンプル（チェック　黄色）

<div class="blank-box bb-tab bb-check bb-yellow">タブボックスHTMLソースサンプル（チェック　黄色）</div>

 

 

コメント

タブボックスHTMLソースサンプル（コメント　黄色）

<div class="blank-box bb-tab bb-comment bb-yellow">タブボックスHTMLソースサンプル（コメント　黄色）</div>

 

 

ポイント

タブボックスHTMLソースサンプル（コメント　黄色）

<div class="blank-box bb-tab bb-point bb-yellow">タブボックスHTMLソースサンプル（ポイント　黄色）</div>

 

 

ティップス

タブボックスHTMLソースサンプル（ティップス　黄色）

<div class="blank-box bb-tab bb-tips bb-yellow">タブボックスHTMLソースサンプル（ティップス　黄色）</div>

 

ヒント

タブボックスHTMLソースサンプル（ヒント　黄色）

<div class="blank-box bb-tab bb-hint bb-yellow">タブボックスHTMLソースサンプル（ヒント　黄色）</div>

 

 

ピックアップ

タブボックスHTMLソースサンプル（ピックアップ　黄色）

<div class="blank-box bb-tab bb-pickup bb-yellow">タブボックスHTMLソースサンプル（ピックアップ　黄色）</div>

 

ブックマーク

タブボックスHTMLソースサンプル（ブックマーク　黄色）

<div class="blank-box bb-tab bb-bookmark bb-yellow">タブボックスHTMLソースサンプル（ブックマーク　黄色）</div>

 

 

メモ

タブボックスHTMLソースサンプル（メモ　黄色）

<div class="blank-box bb-tab bb-memo bb-yellow">タブボックスHTMLソースサンプル（メモ　黄色）</div>

 

 

ダウンロード

タブボックスHTMLソースサンプル（ダウンロード　黄色）

<div class="blank-box bb-tab bb-download bb-yellow">タブボックスHTMLソースサンプル（ダウンロード　黄色）</div>

 

 

ブレイク

タブボックスHTMLソースサンプル（ブレイク　黄色）

<div class="blank-box bb-tab bb-break bb-yellow">タブボックスHTMLソースサンプル（ブレイク　黄色）</div>

 

 

Amazon

タブボックスHTMLソースサンプル（ブレイク　黄色）

<div class="blank-box bb-tab bb-amazon bb-yellow">タブボックスHTMLソースサンプル（Amazon　黄色）</div>

 

 

OK

タブボックスHTMLソースサンプル（OK　黄色）

<div class="blank-box bb-tab bb-ok bb-yellow">タブボックスHTMLソースサンプル（OK　黄色）</div>

 

 

NG

タブボックスHTMLソースサンプル（NG　黄色）

<div class="blank-box bb-tab bb-ng bb-yellow">タブボックスHTMLソースサンプル（NG　黄色）</div>

 

GOOD

タブボックスHTMLソースサンプル（GOOD　黄色）

<div class="blank-box bb-tab bb-good bb-yellow">タブボックスHTMLソースサンプル（GOOD　黄色）</div>

 

BAD

タブボックスHTMLソースサンプル（BAD　黄色）

<div class="blank-box bb-tab bb-bad bb-yellow">タブボックスHTMLソースサンプル（BAD　黄色）</div>

 

 

プロフィール

タブボックスHTMLソースサンプル（プロフィール　黄色）

<div class="blank-box bb-tab bb-profile bb-yellow">タブボックスHTMLソースサンプル（プロフィール　黄色）</div>

 

スタイル　付箋

ボックスHTMLソースサンプル（付箋風　黄色）

<div class="blank-box sticky st-yellow">ボックスHTMLソースサンプル（付箋風　黄色）</div>

 

スタイル　バッジ

バッジHTMLソースサンプル（レッド）

<span class="badge badge-red">バッジHTMLソースサンプル（レッド）</span>

 

スタイル　バッジ　オレンジ
スタイル　バッジ　レッド
スタイル　バッジ　ピンク
スタイル　バッジ　パープル
スタイル　バッジ　ブルー
スタイル　バッジ　グリーン
スタイル　バッジ　イエロー
スタイル　バッジ　ブラウン
スタイル　バッジ　グレー

 

スタイル　マイクロコピー

主に補足に使用するもの。
使い方のサンプル。

 

テキスト（上）

マイクロコピーテキストHTMLソースサンプル（上中央）

<div class="micro-top micro-left micro-center">マイクロコピーテキストHTMLソースサンプル（上中央）</div>

 

 

テキスト（下）

マイクロコピーテキストHTMLソースサンプル（下中央）

<div class="micro-bottom  micro-left micro-center">マイクロコピーテキストHTMLソースサンプル（下中央）</div>

 

吹き出し（上）

マイクロコピー吹き出しHTMLソースサンプル（上中央）

<div class="micro-top micro-balloon micro-balloon-center">マイクロコピー吹き出しHTMLソースサンプル（上中央）</div>

 

 

吹き出し（下）

マイクロコピー吹き出しHTMLソースサンプル（下中央）

<div class="micro-bottom micro-balloon micro-balloon-center">マイクロコピー吹き出しHTMLソースサンプル（下中央）</div>

 

 

スタイル　ボタン

「囲みボタン」もスタイルは同じ。
ソースが違う。

ボタンHTMLソースサンプル（レッド（小））

<a class="btn btn-red">ボタンHTMLソースサンプル（レッド（小））</a>

囲みボタンHTMLソースサンプル（レッド（小））

<span class="btn-wrap btn-wrap-red">囲みボタンHTMLソースサンプル（レッド（小））</span>

 

スタイル　ボタン　レッド（小）

スタイル　ボタン　レッド（中）
スタイル　ボタン　レッド（大）

スタイル　ボタン　ピンク（小）

スタイル　ボタン　ピンク（中）
スタイル　ボタン　ピンク（大）

スタイル　ボタン　パープル（小）

スタイル　ボタン　パープル（中）
スタイル　ボタン　パープル（大）

スタイル　ボタン　ディープパープル（小）

スタイル　ボタン　ディープパープル（中）
スタイル　ボタン　ディープパープル（大）

スタイル　ボタン　インディゴ[紺色]（小）

スタイル　ボタン　インディゴ[紺色]（中）
スタイル　ボタン　インディゴ[紺色]（大）

スタイル　ボタン　ブルー（小）

スタイル　ボタン　ブルー（中）
スタイル　ボタン　ブルー（大）

スタイル　ボタン　ライトブルー（小）

スタイル　ボタン　ライトブルー（中）
スタイル　ボタン　ライトブルー（大）

スタイル　ボタン　シアン（小）

スタイル　ボタン　シアン（中）
スタイル　ボタン　シアン（大）

スタイル　ボタン　ティール[緑色がかった青]（小）

スタイル　ボタン　ティール[緑色がかった青]（中）
スタイル　ボタン　ティール[緑色がかった青]（大）

スタイル　ボタン　グリーン（小）

スタイル　ボタン　グリーン（中）
スタイル　ボタン　グリーン（大）

スタイル　ボタン　ライトグリーン（小）

スタイル　ボタン　ライトグリーン（中）
スタイル　ボタン　ライトグリーン（大）

スタイル　ボタン　ライム（小）

スタイル　ボタン　ライム（中）
スタイル　ボタン　ライム（大）

スタイル　ボタン　イエロー（小）

スタイル　ボタン　イエロー（中）
スタイル　ボタン　イエロー（大）

スタイル　ボタン　アンバー[琥珀色]（小）

スタイル　ボタン　アンバー[琥珀色]（中）
スタイル　ボタン　アンバー[琥珀色]（大）

スタイル　ボタン　オレンジ（小）

スタイル　ボタン　オレンジ（中）
スタイル　ボタン　オレンジ（大）

スタイル　ボタン　ディープオレンジ（小）

スタイル　ボタン　ディープオレンジ（中）
スタイル　ボタン　ディープオレンジ（大）

スタイル　ボタン　ブラウン（小）

スタイル　ボタン　ブラウン（中）
スタイル　ボタン　ブラウン（大）

スタイル　ボタン　グレー（小）

スタイル　ボタン　グレー（中）
スタイル　ボタン　グレー（大）

 

スタイル　囲みブログカードラベル

リンクを目立たせるときに使用。
ボックスの中に入れられるのはURLだけなので注意！aタグなどは要らないよ！！

囲みブログカードラベルHTMLソースサンプル（関連記事）

<div class="blogcard-type bct-related">囲みブログカードラベルHTMLソースサンプル（関連記事）</div>

 

関連記事

参考記事

参考リンク

人気記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

ダウンロード