Gutenberg、だいぶ使いやすくなったので移行中です

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

nullllog WORDPRESS

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

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

Cocoonで指定できるスタイル

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

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

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

 

Cocoonとは?
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
わいひらさん作。個人的には無料テーマでは最強ではないかと思っています。

Cocoon公式サイトはこちら

 

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>

 

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

 

スタイル ボックス 案内

ボックス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>

 

スタイル ボックス タブ Amazon(灰色)
スタイル ボックス タブ Amazon(黄色)
スタイル ボックス タブ Amazon(赤色)
スタイル ボックス タブ Amazon(青色)
スタイル ボックス タブ Amazon(緑色)

 

OK

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

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

 

スタイル ボックス タブ OK(灰色)
スタイル ボックス タブ OK(黄色)
スタイル ボックス タブ OK(赤色)
スタイル ボックス タブ OK(青色)
スタイル ボックス タブ OK(緑色)

 

NG

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

<div class="blank-box bb-tab bb-ng bb-yellow">タブボックスHTMLソースサンプル(NG 黄色)</div>
スタイル ボックス タブ NG(灰色)
スタイル ボックス タブ NG(黄色)
スタイル ボックス タブ NG(赤色)
スタイル ボックス タブ NG(青色)
スタイル ボックス タブ NG(緑色)

 

GOOD

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

<div class="blank-box bb-tab bb-good bb-yellow">タブボックスHTMLソースサンプル(GOOD 黄色)</div>
スタイル ボックス タブ GOOD(灰色)
スタイル ボックス タブ GOOD(黄色)
スタイル ボックス タブ GOOD(赤色)
スタイル ボックス タブ GOOD(青色)
スタイル ボックス タブ GOOD(緑色)

 

BAD

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

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

 

スタイル ボックス タブ BAD(灰色)
スタイル ボックス タブ BAD(黄色)
スタイル ボックス タブ BAD(赤色)
スタイル ボックス タブ BAD(青色)
スタイル ボックス タブ BAD(緑色)

 

プロフィール

タブボックス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>

 

関連記事

参考記事

参考リンク

人気記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

ダウンロード

 

コメント

  1. […] WordPress無料テーマCocoonのスタイル一覧WordPress無料テーマCocoonのスタイル一覧です。Cocoonビジュアルエディタで選択できるスタイルを見やすく一覧にしました。HTMLサンプルソースや使用例 […]

タイトルとURLをコピーしました