このブログで記事を書くときに、ビジュアルなエディターを使っていますが、どんなブロックを使ったらイメージどおりになるか、いつも迷ってしまうのでサンプルを作ってみました。
使用テーマ: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
カラム1
カラム2
カラム2
カラム3
カラム3
コメント