(ほぼ自分のための)Cocoonのスタイル一覧です。
Cocoonビジュアルエディタで設定できるスタイルを一覧にしました。
Cocoon、出来ることが多すぎてまとめとかないと忘れちゃうんですよね…。
HTMLソースのサンプル付きです。
※nullllogでは少しCSSをいじっているので公式とは表示が違うかもです。特にブログカード。
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
わいひらさん作。個人的には無料テーマでは最強ではないかと思っています。
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>
関連記事
参考記事
参考リンク
人気記事
あわせて読みたい
詳細はこちら
チェック
ピックアップ
公式サイト
ダウンロード
コメント
[…] WordPress無料テーマCocoonのスタイル一覧WordPress無料テーマCocoonのスタイル一覧です。Cocoonビジュアルエディタで選択できるスタイルを見やすく一覧にしました。HTMLサンプルソースや使用例 […]