Cocoonは、ビジュアルエディター上でいくつかのスタイル拡張を手軽に使うことが可能です。この記事では、Cocoonを使ったブログ記事作成時に役立つインラインの文字装飾方法について紹介します。
インラインスタイル
まずは、文字を太くしたり、色を変えたりする方法を見ていきます。
文字を太くする
強調したい部分を太字にする
この文章の中で<span class="bold">重要な部分</span>を太字にする
表示例：
この文章の中で重要な部分を太字にする
文字を赤くする
目立たせたい部分を赤字にする
注意点は<span class="red">赤字</span>で表示します
表示例：
注意点は赤字で表示します
文字を太い赤字にする
非常に重要な部分を太い赤字にする
緊急の場合は<span class="bold-red">この部分</span>を確認してください
表示例：
緊急の場合はこの部分を確認してください
文字に赤いアンダーラインを引く
強調しつつ目立たせるために赤アンダーラインを使用する
ここが重要です：<span class="red-under">赤いアンダーライン</span>を使います
表示例：
ここが重要です：赤いアンダーラインを使います
文字に黄色マーカーを引く
特に注目してほしい部分を黄色マーカーで表示する
次のポイントに<span class="marker">注目してください</span>
表示例：
次のポイントに注目してください
文字に黄色アンダーラインマーカーを引く
特に強調したい部分を黄色アンダーラインマーカーで表示する
重要な項目は<span class="marker-under">このように表示</span>します
表示例：
重要な項目はこのように表示します
文字に打ち消し線を引く
不要になった情報を打ち消し線で示す
この情報は<span class="strike">もう必要ありません</span>
表示例：
この情報はもう必要ありません
キーボードキーを示す
特定のキーボード入力を示す
保存のショートカットは <span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">S</span> です
表示例：
保存のショートカットは Ctrl + S です
ボックスによる装飾
ボックススタイルは、特定の段落を囲んで色を変えたりできる装飾になります。
「スタイル」ドロップダウンリストからのボックススタイルを選択することで簡単に装飾が可能です。
アイコンボックス
補足情報（i）
表示サンプル：
コード：
<div class="information-box">補足情報1</div>
補足情報（?）
表示サンプル：
コード：
<div class="question-box">補足情報2</div>
補足情報（!）
表示サンプル：
コード：
<div class="alert-box">注意喚起文</div>
メモ
表示サンプル：
コード：
<div class="memo-box">メモボックス</div>
コメント
表示サンプル：
コード：
<div class="comment-box">コメントボックス</div>
OK/NGボックス
表示サンプル(OK)：
コード：
<div class="is-style-ok-box">OKボックス</div>
表示サンプル(NG)：
コード：
<div class="is-style-ng-box">NGボックス</div>
以下のように変換しました：
薄い背景色
表示サンプル：
コード：
<div class="is-style-light-background-box">薄い背景色</div>
タブボックス
表示サンプル：
コード：
<div class="blank-box bb-tab bb-point bb-yellow">タブボックス</div>
bb-yellow部分を変えることで、他の色にもできます。
bb-point以外にもヒントなど他の表示もあります。
付箋ボックス
表示サンプル：
コード：
<div class="blank-box sticky st-yellow">付箋ボックス</div>
st-yellowを変えることで、他の色にできます。
破線ボックス
表示サンプル：
コード：
<div class="is-style-border-dashed">破線ボックス</div>
破線以外にも二重線や点線など様々なパターンがあります。
案内ボックス
プライマリー
表示サンプル：
コード：
<div class="primary-box">プライマリー</div>
セカンダリー
表示サンプル：
コード：
<div class="secondary-box">セカンダリー</div>
インフォ
表示サンプル：
コード：
<div class="info-box">インフォ</div>
その他にもワーニング、サクセスやダーク、ライトなど、背景色が用意されています。
バッジスタイル
最後にバッジをみていきます。これは、アイコンみたいな表示のイメージです。
バッジ（オレンジ）
表示サンプル：
参考
コード：
<span class="badge">参考</span>
バッジ（レッド）
表示サンプル：
参照
コード：
<span class="badge badge-red">参照</span>
その他にもピンクや紫など様々な色があります。
基本的には、badgeとbadge-{color}のクラスを設定することで表示できます。
それぞれの装飾がどのようなスタイル（class）になっているのか確認する方法については、以下の記事で紹介していますので、併せて確認してみてください。
チートシート
最後にチートシート用に表にまとめておきます。
Cocoonのインラインスタイルやボックススタイルを表にまとめて、表示結果、説明、コピペ用コードを含めて整理しました。以下の内容を参考にしてみてください。
| スタイル | 説明 | コピペ用コード | 表示結果 |
|---|---|---|---|
| 太字 | 強調したい部分を太字にする | <span class="bold">重要な部分</span> |
この文章の中で重要な部分を太字にする |
| 赤文字 | 目立たせたい部分を赤字にする | <span class="red">赤字</span> |
注意点は赤字で表示します |
| 太い赤文字 | 非常に重要な部分を太い赤字にする | <span class="bold-red">この部分</span> |
緊急の場合はこの部分を確認してください |
| 赤アンダーライン | 赤いアンダーラインを引く | <span class="red-under">赤いアンダーライン</span> |
ここが重要です：赤いアンダーラインを使います |
| 黄色マーカー | 黄色マーカーで表示する | <span class="marker">注目してください</span> |
次のポイントに注目してください |
| 黄色アンダーラインマーカー | 黄色アンダーラインマーカーで表示する | <span class="marker-under">このように表示</span> |
重要な項目はこのように表示します |
| 打ち消し線 | 不要になった情報を打ち消し線で示す | <span class="strike">もう必要ありません</span> |
この情報はもう必要ありません |
| キーボードキー | 特定のキーボード入力を示す | <span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">S</span> |
保存のショートカットは Ctrl + S です |
| ボックススタイル | 説明 | コピペ用コード | 表示結果 |
|---|---|---|---|
| 補足情報（i） | 補足情報を表示するボックス | <div class="information-box">補足情報1</div> |
補足情報1
|
| 補足情報（?） | 質問や補足情報を表示するボックス | <div class="question-box">補足情報2</div> |
補足情報2
|
| 補足情報（!） | 注意喚起を表示するボックス | <div class="alert-box">注意喚起文</div> |
注意喚起文
|
| メモ | メモ用のボックス | <div class="memo-box">メモボックス</div> |
メモボックス
|
| コメント | コメント用のボックス | <div class="comment-box">コメントボックス</div> |
コメントボックス
|
| プライマリー | 重要な情報を表示するボックス | <div class="primary-box">プライマリー</div> |
プライマリー
|
| セカンダリー | 補助的な情報を表示するボックス | <div class="secondary-box">セカンダリー</div> |
セカンダリー
|
| インフォ | 一般的な情報を表示するボックス | <div class="info-box">インフォ</div> |
インフォ
|
| ワーニング | 警告や注意を表示するボックス | <div class="warning-box">ワーニング</div> |
ワーニング
|
| サクセス | 成功や達成を表示するボックス | <div class="success-box">サクセス</div> |
サクセス
|
| デンジャー | 危険や警告を表示するボックス | <div class="danger-box">デンジャー</div> |
デンジャー
|
| ライト | 軽い情報や補足を表示するボックス | <div class="light-box">ライト</div> |
ライト
|
| ダーク | ダークテーマのボックス | <div class="dark-box">ダーク</div> |
ダーク
|
| バッジスタイル | 説明 | コピペ用コード | 表示結果 |
|---|---|---|---|
| オレンジ | オレンジ色のバッジ | <span class="badge">参考</span> |
参考 |
| レッド | 赤色のバッジ | <span class="badge badge-red">参照</span> |
参照 |
| ピンク | ピンク色のバッジ | <span class="badge badge-pink">サイト</span> |
サイト |
| パープル | 紫色のバッジ | <span class="badge badge-purple">公式</span> |
公式 |
| ブルー | 青色のバッジ | <span class="badge badge-blue">ブルー</span> |
ブルー |
| グリーン | 緑色のバッジ | <span class="badge badge-green">グリーン</span> |
グリーン |
| イエロー | 黄色のバッジ | <span class="badge badge-yellow">イエロー</span> |
イエロー |
| ブラウン | 茶色のバッジ | <span class="badge badge-brown">ブラウン</span> |
ブラウン |
| グレー | 灰色のバッジ | <span class="badge badge-grey">グレー</span> |
グレー |
