Cocoonの文字装飾サンプル一覧 全253種

Cocoonに標準で準備されている文字装飾のスタイルは膨大で、お気に入りを見つけるまでに時間がかかるため、一覧にまとめました。

装飾の数は253種+インライン(太字などの通常装飾)やフォントサイズ部分で300近いでしょうか。

ちょっと色を変えたい場合などは以下を参考にして下さい。

Cocoon文字装飾スタイル・サンプルとカラーコードとクラス名一覧
Cocoonに標準で準備されている文字装飾のスタイルの初期カラーコードとクラス名を一覧にまとめました。 ちょっと色を変えたい時などにご利用下さい。 マーカー スタイル クラス名 色 黄色 .marker 黄色:#ffff99 赤 .mark...

 


 

使い方

投稿編集の「スタイル」をプルダウンして利用します。

 

装飾一覧

インライン

インラインについては、太字や赤字などの通常装飾の為、サンプルは省略します。

マーカー

※画像です。

 

フォントサイズ

12px~48pxの選択可能。サンプルは省略します。

ボックス(アイコン)

ボックス(アイコン)のカスタマイズは以下にまとめています。

 

ボックス(案内)

ボックス(案内)のカスタマイズは以下にまとめています。

ボックス(白抜き)

ボックス(白抜き)のカスタマイズは以下にまとめています。

 

ボックス(タブ)

 

以下すべての装飾に上記「チェック」同様、5色あり

ボックス(付箋風)

ボックス(付箋風)のカスタマイズは以下にまとめています。

 

バッジ

バッジのカスタマイズは以下にまとめています。

 

マイクロコピー

※テキスト(下)、吹き出し(上)は省略します。

ボタン

 

以下すべての装飾に上記「レッド」同様、小・中・大あり

ボタンのカスタマイズは以下にまとめています。

 

囲みボタン

 

色については上記の「ボタン」同様に18色あります。

 

囲みブログカードラベル

こちらの装飾は、エディタに記述した「URLアドレス」に対して行います。

例えば、「https://wp-cocoon.com/」と記述した1行に対して

「スタイル」→「囲みブログカードラベル」→「公式サイト」とした場合は、以下のように自動的にブログカードが挿入され、「公式サイト」とラベルが付いた装飾がされます。

 

ラベルと枠線のカラーは、テーマのキーカラーになります。

 

 

以上です。

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています