スポンサーリンク

WordPressでCocoonテーマを使ったときのブロックのサンプル

ブログ
Miguel Á. PadriñánによるPixabayからの画像

このブログで記事を書くときに、ビジュアルなエディターを使っていますが、どんなブロックを使ったらイメージどおりになるか、いつも迷ってしまうのでサンプルを作ってみました。

使用テーマ:Cocoon

一般ブロック > 見出し(H2)

見出し(H3)

見出し(H4)

見出し(H5)
見出し(H6)

一般ブロック > 段落

一般ブロック > 段落

一般ブロック > 段落(イタリック)

一般ブロック > 段落(文字 > 太字)

一般ブロック > 段落(文字 > 赤色)

一般ブロック > 段落(文字 > 青太字)

一般ブロック > 段落(文字 > 黄色マーカー)

一般ブロック > 段落(文字 > 赤色アンダーラインマーカー)

一般ブロック > 段落(バッジ > オレンジ)

一般ブロック > 段落(スタイル > 補足情報(i))

一般ブロック > 段落(スタイル > 補足情報(?))

一般ブロック > 段落(スタイル > 補足情報(!))

一般ブロック > 段落(スタイル > メモ)

一般ブロック > 段落(スタイル > コメント)

一般ブロック > 段落(スタイル > OK)

一般ブロック > 段落(スタイル > NG)

一般ブロック > 段落(スタイル > GOOD)

一般ブロック > 段落(スタイル > BAD)

一般ブロック > 段落(スタイル > プロフィール)

一般ブロック > 段落(スタイル > プライマリー(濃い水色))

一般ブロック > 段落(スタイル > セカンダリー(濃い灰色))

一般ブロック > 段落(スタイル > インフォ(薄い青))

一般ブロック > 段落(スタイル > サクセス(薄い緑))

一般ブロック > 段落(スタイル > ワーニング(薄い黄色))

一般ブロック > 段落(スタイル > デンジャー(薄い赤色))

一般ブロック > 段落(スタイル > ライト(白色))

一般ブロック > 段落(スタイル > ダーク(暗い灰色))

一般ブロック > 段落(スタイル > 白抜き(赤色))

一般ブロック > 段落(スタイル > 白抜き(ピンク))

一般ブロック > 段落(スタイル > 白抜き(紺色))

一般ブロック > 段落(スタイル > 白抜き(青色))

一般ブロック > 段落(スタイル > 白抜き(黄色))

一般ブロック > 段落(スタイル > 白抜き(緑色))

一般ブロック > 段落(スタイル > 白抜き(オレンジ))

一般ブロック > 段落(スタイル > 付箋風(灰色))

一般ブロック > 段落(スタイル > 付箋風(黄色))

一般ブロック > 段落(スタイル > 付箋風(赤色))

一般ブロック > 段落(スタイル > 付箋風(青色))

一般ブロック > 段落(スタイル > 付箋風(緑色))

一般ブロック > リスト

  • 一般ブロック > リスト
  • Sample1
  • Sample2
  1. 一般ブロック > リスト
  2. Sample1
  3. Sample2

一般ブロック > ファイル

一般ブロック > 引用

一般ブロック > 引用

引用元を入力

フォーマット

フォーマット > コード

フォーマット > コード(言語:プレーンテキスト)
// フォーマット > コード(言語:JavaScript)
document.write("Hello world!!");
<!-- フォーマット > コード(言語:HTML) -->
<html>
  <head>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

フォーマット > 整形済み

フォーマット > 整形済み

フォーマット > プルクオート

プルクオート(右揃え)を使うと、レイアウトが崩れてしまったので載せなかった。使わないほうが良いかもしれない。

フォーマット > プルクオート(左揃え)

引用元を入力

フォーマット > プルクオート(幅広)

引用元を入力

フォーマット > プルクオート(全幅)

引用元を入力

フォーマット > 表

フォーマット>表フォーマット>表
SampleText1SampleText2

フォーマット > 詩

フォーマット > 詩

レイアウト要素

レイアウト要素 > ボタン

レイアウト要素 > カラム

Column1

3カラム > 中央を広く

Column3

レイアウト要素 > メディアと文章

レイアウト要素 > メディアと文章

レイアウト要素 > 区切り

(スタイル > デフォルト)


(スタイル > 幅広線)


(スタイル > ドット)


レイアウト要素 > スペーサー

Cocoonブロック

Cocoonブロック > アイコンボックス

Cocoonブロック > アイコンボックス(タイプ > 補足情報(i))

Cocoonブロック > アイコンボックス(タイプ > 補足情報(?))

Cocoonブロック > アイコンボックス(タイプ > メモ)

Cocoonブロック > アイコンボックス(タイプ > コメント)

Cocoonブロック > アイコンボックス(タイプ > OK)

Cocoonブロック > アイコンボックス(タイプ > NG)

Cocoonブロック > アイコンボックス(タイプ > GOOD)

Cocoonブロック > アイコンボックス(タイプ > BAD)

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

コメント

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