このブログで記事を書くときに、ビジュアルなエディターを使っていますが、どんなブロックを使ったらイメージどおりになるか、いつも迷ってしまうのでサンプルを作ってみました。
使用テーマ：Cocoon
一般ブロック ＞ 見出し（H2）
見出し（H3）
見出し（H4）
見出し（H5）
見出し（H6)
一般ブロック ＞ 段落
一般ブロック ＞ 段落
一般ブロック ＞ 段落（イタリック）
一般ブロック ＞ 段落（文字 ＞ 太字）
一般ブロック ＞ 段落（文字 ＞ 赤色）
一般ブロック ＞ 段落（文字 ＞ 青太字）
一般ブロック ＞ 段落（文字 ＞ 黄色マーカー）
一般ブロック ＞ 段落（文字 ＞ 赤色アンダーラインマーカー）
一般ブロック ＞ 段落（バッジ ＞ オレンジ）
一般ブロック ＞ 段落（スタイル ＞ 補足情報(i)）
一般ブロック ＞ 段落（スタイル ＞ 補足情報(?)）
一般ブロック ＞ 段落（スタイル ＞ 補足情報(!)）
一般ブロック ＞ 段落（スタイル ＞ メモ）
一般ブロック ＞ 段落（スタイル ＞ コメント）
一般ブロック ＞ 段落（スタイル ＞ OK）
一般ブロック ＞ 段落（スタイル ＞ NG）
一般ブロック ＞ 段落（スタイル ＞ GOOD）
一般ブロック ＞ 段落（スタイル ＞ BAD）
一般ブロック ＞ 段落（スタイル ＞ プロフィール）
一般ブロック ＞ 段落（スタイル ＞ プライマリー（濃い水色））
一般ブロック ＞ 段落（スタイル ＞ セカンダリー（濃い灰色））
一般ブロック ＞ 段落（スタイル ＞ インフォ（薄い青））
一般ブロック ＞ 段落（スタイル ＞ サクセス（薄い緑））
一般ブロック ＞ 段落（スタイル ＞ ワーニング（薄い黄色））
一般ブロック ＞ 段落（スタイル ＞ デンジャー（薄い赤色））
一般ブロック ＞ 段落（スタイル ＞ ライト（白色））
一般ブロック ＞ 段落（スタイル ＞ ダーク（暗い灰色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（赤色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（ピンク））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（紺色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（青色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（黄色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（緑色））
一般ブロック ＞ 段落（スタイル ＞ 白抜き（オレンジ））
一般ブロック ＞ 段落（スタイル ＞ 付箋風（灰色））
一般ブロック ＞ 段落（スタイル ＞ 付箋風（黄色））
一般ブロック ＞ 段落（スタイル ＞ 付箋風（赤色））
一般ブロック ＞ 段落（スタイル ＞ 付箋風（青色））
一般ブロック ＞ 段落（スタイル ＞ 付箋風（緑色））
一般ブロック ＞ リスト
- 一般ブロック ＞ リスト
- Sample1
- Sample2
- 一般ブロック ＞ リスト
- Sample1
- Sample2
一般ブロック ＞ ファイル
一般ブロック ＞ 引用
一般ブロック ＞ 引用
引用元を入力
フォーマット
フォーマット ＞ コード
フォーマット ＞ コード（言語：プレーンテキスト）// フォーマット ＞ コード（言語：JavaScript）
document.write("Hello world!!");<!-- フォーマット ＞ コード（言語：HTML） -->
<html>
<head>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>フォーマット ＞ 整形済み
フォーマット ＞ 整形済み
フォーマット ＞ プルクオート
プルクオート（右揃え）を使うと、レイアウトが崩れてしまったので載せなかった。使わないほうが良いかもしれない。
フォーマット ＞ プルクオート（左揃え）
引用元を入力
フォーマット ＞ プルクオート（幅広）
引用元を入力
フォーマット ＞ プルクオート（全幅）
引用元を入力
フォーマット ＞ 表
| フォーマット＞表 | フォーマット＞表 |
| SampleText1 | SampleText2 |
フォーマット ＞ 詩
フォーマット ＞ 詩
レイアウト要素
レイアウト要素 ＞ ボタン
レイアウト要素 ＞ カラム
Column1
3カラム ＞ 中央を広く
Column3
レイアウト要素 ＞ メディアと文章
レイアウト要素 ＞ メディアと文章
レイアウト要素 ＞ 区切り
（スタイル ＞ デフォルト）
（スタイル ＞ 幅広線）
（スタイル ＞ ドット）
レイアウト要素 ＞ スペーサー
Cocoonブロック
Cocoonブロック ＞ アイコンボックス
Cocoonブロック ＞ 案内ボックス
Cocoonブロック ＞ 案内ボックス（タイプ ＞ プライマリー（濃い水色））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ セカンダリー（濃い灰色））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ インフォ（薄い青））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ サクセス（薄い緑））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ ワーニング（薄い黄色））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ デンジャー（薄い赤色））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ ライト（白色））
Cocoonブロック ＞ 案内ボックス（タイプ ＞ ダーク（暗い灰色））
Cocoonブロック ＞ 白抜きボックス
（ボーダー色は一部のみ掲載）
Cocoonブロック ＞ 白抜きボックス（ボーダー色 ＞ 無指定）
Cocoonブロック ＞ 白抜きボックス（ボーダー色 ＞ キーカラー）
Cocoonブロック ＞ 白抜きボックス（ボーダー色 ＞ ピンク）
Cocoonブロック ＞ 付箋風ボックス
Cocoonブロック ＞ 付箋風ボックス（タイプ ＞ 灰色）
Cocoonブロック ＞ 付箋風ボックス（タイプ ＞ 黄色）
Cocoonブロック ＞ 付箋風ボックス（タイプ ＞ 赤色）
Cocoonブロック ＞ 付箋風ボックス（タイプ ＞ 青色）
Cocoonブロック ＞ 付箋風ボックス（タイプ ＞ 緑色）
Cocoonブロック ＞ タブボックス
（枠の色は自由に変更可）
Cocoonブロック ＞ タブボックス（ラベル ＞ チェック）
Cocoonブロック ＞ タブボックス（ラベル ＞ コメント）
Cocoonブロック ＞ タブボックス（ラベル ＞ ポイント）
Cocoonブロック ＞ タブボックス（ラベル ＞ ティップス）
Cocoonブロック ＞ タブボックス（ラベル ＞ ヒント）
Cocoonブロック ＞ タブボックス（ラベル ＞ ピックアップ）
Cocoonブロック ＞ タブボックス（ラベル ＞ ブックマーク）
Cocoonブロック ＞ タブボックス（ラベル ＞ メモ）
Cocoonブロック ＞ タブボックス（ラベル ＞ ダウンロード）
Cocoonブロック ＞ タブボックス（ラベル ＞ ブレイク）
Cocoonブロック ＞ タブボックス（ラベル ＞ Amazon）
Cocoonブロック ＞ タブボックス（ラベル ＞ OK）
Cocoonブロック ＞ タブボックス（ラベル ＞ NG）
Cocoonブロック ＞ タブボックス（ラベル ＞ GOOD）
Cocoonブロック ＞ タブボックス（ラベル ＞ BAD）
Cocoonブロック ＞ タブボックス（ラベル ＞ プロフィール）
Cocoonブロック ＞ 吹き出し
（Cocoon設定 ＞ 吹き出しで確認可）
Cocoonブロック ＞ ボタン
Cocoonブロック ＞ 囲みボタン
見た目だけならボタンと変わらなかったので、どういうときに使うのかイマイチわかりませんでした。でも作者のかたの使い方解説記事があり、そちらを見てからでないと使う意味ないと思うので、ここではそちらの記事へのリンクを掲載します。
Cocoonブロック ＞ トグルボックス
開けたり・閉めたりできる
Cocoonブロック ＞ タイムライン
- ラベル過去
サンプル1
- ラベル現在
サンプル2
- ラベル未来
サンプル3
Cocoonブロック ＞ アイコンリスト
Cocoon汎用ブロック
Cocoon汎用ブロック ＞ 見出しボックス
見出しのアイコンは多数あり。付けないこともできる。
Cocoon汎用ブロック ＞ タブ見出しボックス
見出しのアイコンは多数あり。付けないこともできる。
Cocoon汎用ブロック ＞ ラベルボックス
見出しのアイコンは多数あり。付けないこともできる。
Cocoonマイクロコピー
Cocoonマイクロコピー ＞ マイクロテキスト
Cocoonマイクロコピー ＞ マイクロバルーン
Cocoonレイアウト
Cocoonレイアウト ＞ 2カラム
カラム1
カラム1
カラム2
カラム2
Cocoonレイアウト ＞ 3カラム
カラム１
カラム1
カラム2
カラム2
カラム3
カラム3
コメント