>> サイト内には広告が含まれます。プライバシーポリシーはこちら →
PR

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

Cocoon・使い方
この記事は約3分で読めます。
     

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

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

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

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

 


 

使い方

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

投稿編集の「スタイル」

 

装飾一覧

インライン

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

スタイル・インライン

マーカー

スタイル・マーカー

スタイル・マーカー

※画像です。

 

フォントサイズ

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

スタイル・フォントサイズ

ボックス(アイコン)

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

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

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

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

 

ボックス(案内)

スタイル・ボックス(案内)

スタイル・ボックス(案内)

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

ボックス(白抜き)

スタイル・ボックス(白抜き)

スタイル・ボックス(白抜き)

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

 

ボックス(タブ)

スタイル・ボックス(タブ)

スタイル・ボックス(タブ)

 

以下すべての装飾に上記「チェック」同様、5色あり
スタイル・ボックス(タブ)
スタイル・ボックス(タブ)
スタイル・ボックス(タブ)

ボックス(付箋風)

スタイル・ボックス(付箋風)

スタイル・ボックス(付箋風)

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

 

バッジ

スタイル・バッジ

スタイル・バッジ

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

 

マイクロコピー

スタイル・マイクロコピー

スタイル・マイクロコピー

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

ボタン

スタイル・ボタン

 

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

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

 

囲みボタン

スタイル・囲みボタン

 

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

 

囲みブログカードラベル

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

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

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

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

 

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

 

 

以上です。

コメント

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