Cocoon バッジの使い道

バッジとは

バッジとは、下記のように文字の背景に色を付けて、バッジのように表示します。

バッジスタイル

また、文字に背景色を付ける機能がありますが、バッジと異なり、文字全体の周囲にスペースがありません。

文字に背景色

バッジの作成の仕方

文字列を選択し、「スタイル」⇒「バッジ」⇒「色選択」をするとバッジが作成されます。

バッジの使い道

手順の紹介

手順の紹介するの各ステップにバッジを使う事で分かりやすくなります。

ダッシュボード⇒Cocoon設定⇒全体

他の記事、サイトの紹介

下記の様に、他の記事やサイト紹介をする際のワンポイントして使用すると、分かりやすくていいですよね。

関連記事 Cocoon関連の記事まとめ

記号文字と組み合わせて注意点やポイントでの見出し

下記の様に、記号文字と組み合わせて、注意点やポイントとなる文での見出しとして使用すると、アクセントとなって分かりやすいですよね。

➤ 注意する点

✔ 今日のポイント

スタイルの変更方法

標準のバッジは下記の通り、四角で、フォントが小さいのです。少し、カスタマイズしてみましょう。

標準のバッジ

まず、『HTMLとして編集』に切り替えて、上記のバッジのコードを確認すると、下記のコードになっています。

<span class="badge badge-red">標準のバッジ</span>

このコードに新しいクラス『badge1』を下記の様に追記します。

<span class="badge1 badge badge-red">標準のバッジ</span>

そして、投稿画面の下にあるカスタムCSSの入力欄に下記のコードを追記します。

.badge1{
font-size:0.9em;
border-radius: 8px;
}

そうすると、下記のように、文字が大きくなり、周囲の角が丸くなりました。

カスタマイズ後のバッジ

文字の大きさを変更したい場合はfont-size、角を丸めたい場合はborder-radiusの数値を変更して下さい。

まとめ

いかがだったでしょうか。

色々な使い方があるので試してみて下さいね。