Menu

WordPress Cocoon で用意されているブロックのHTMLコード一覧

2022年06月04日
2024年1月25日

WordPress の高機能テーマ Cocoon を利用されている方は多くいらっしゃると思います。私も一部のブログにて活用しています。

Cocoon で準備されているブロックを functions.php を直接触って挿入する場合がありますが、下書きの記事などでブロックを挿入してみてプレビューし、HTML を調べてソースをコピーするという作業が毎回発生していました。

そのような作業が手間に感じましたので、今回、Cocoon で準備されているブロックの HTMLソースコードをまとめて見ました。

WordPress 6.0 とCocoon 2.4.4 を利用して確認しています。

吹き出しのHTMLソースコード

<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-sn cf block-box">
  <div class="speech-person">
    <figure class="speech-icon">
      <img src="画像URL" alt="画像の説明" class="speech-icon-image">
    </figure>
  </div>
  <div class="speech-balloon">
    <p>コンテンツ（吹き出し）の中身を入力</p>
  </div>
</div>

ラベルボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box">
  <div class="label-box-label block-box-label box-label">
    <span class="label-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="label-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

タブ見出しボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box">
  <div class="tab-caption-box-label block-box-label box-label">
    <span class="tab-caption-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="tab-caption-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

見出しボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box">
  <div class="caption-box-label block-box-label box-label">
    <span class="caption-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="caption-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

アイコンリストのHTMLソースコード

<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box">
  <div class="iconlist-title">タイトル</div>
  <ul>
    <li>リスト</li>
  </ul>
</div>

案内ボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-info-box block-box primary-box">
  コンテンツの中身を入力
</div>

クラス名（primary-box）を以下に変更することで案内ボックスのカラーを変更可能。

primary-boxプライマリー（濃い水色）
secondary-boxセカンダリー（濃い灰色）
info-boxインフォ（薄い青）
success-boxサクセス（薄い緑）
warning-boxワーニング（薄い黄色）
danger-boxデンジャー（薄い赤色）
light-boxライト（白色）
dark-boxダーク（暗い灰色）

白抜きボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
  コンテンツの中身を入力
</div>

アイコンボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
  コンテンツの中身を入力
</div>

クラス名（information-box）を以下に変更することでアイコンボックスの見た目を変更可能。

information-box補足情報(i)
question-box補足情報(?)
alert-box補足情報(!)
memo-boxメモ
comment-boxコメント
ok-boxOK
ng-boxNG
good-boxGOOD
bad-boxBAD
profile-boxプロフィール

マイクロバルーンのHTMLソースコード

<div class="wp-block-cocoon-blocks-micro-balloon-2 micro-balloon micro-top micro-copy">
  <span class="micro-balloon-content micro-content">マイクロコピーバルーン</span>
</div>
  • マイクロバルーンを丸にする場合は micro-topの後に mc-circle クラスを追加
  • マイクロバルーンを下寄りにする場合はmicro-topをmicro-bottomに変更

ボタンのHTMLソースコード

<div class="wp-block-cocoon-blocks-button-1 button-block">
  <a href="" class="btn" target="_self">ボタン</a>
</div>
  • ボタンを円形する場合は btn の後に btn-circle を追加
  • ボタンを光らせる場合は btn の後に btn-shine を追加

2カラムのHTMLソースコード

<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box">
  <div class="wp-block-cocoon-blocks-column-left column-left"></div>
  <div class="wp-block-cocoon-blocks-column-right column-right"></div>
</div>

クラス名（column-2-2-1-1）を以下に変更することで2カラムの左右の比率を変更可能。

column-2-2-1-11:1
column-2-3-1-21:2
column-2-3-2-12:1
column-2-4-1-31:3
column-2-4-3-13:1

3カラムのHTMLソースコード

<div class="wp-block-cocoon-blocks-column-3 column-wrap column-3 layout-box">
  <div class="wp-block-cocoon-blocks-column-left column-left"></div>
  <div class="wp-block-cocoon-blocks-column-center column-center"></div>
  <div class="wp-block-cocoon-blocks-column-right column-right"></div>
</div>

付箋風ボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-sticky-box blank-box block-box sticky">
  <p>コンテンツの中身を入力</p>
</div>

stickyの後に以下のクラス名を追加することで色の変更が可能（灰色は初期値のためクラス名の追加は不要）。

灰色
st-yellow黄色
st-red赤色
st-blue青色
st-green緑色

タブボックスのHTMLソースコード

<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box">
  <div class="bb-label"><span class="fa"></span></div>
  <p>コンテンツの中身を入力</p>
</div>

クラス名（bb-check）を以下に変更することでタブ内を変更可能。

bb-checkチェック
bb-commentコメント
bb-pointポイント
bb-tipsティップス
bb-hintヒント
bb-pickupピックアップ
bb-bookmarkブックマーク
bb-memoメモ
bb-downloadダウンロード
bb-breakブレイク
bb-amazonAmazon
bb-okOK
bb-ngNG
bb-goodGOOD
bb-badBAD
bb-profileプロフィール

囲みボタンのHTMLソースコード

<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-l">
</div>

アコーディオン（トグル）のHTMLソースコード

<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box">
  <input id="toggle-checkbox-20220604171603" class="toggle-checkbox" type="checkbox">
  <label class="toggle-button" for="toggle-checkbox-20220604171603">アコーディオン見出し</label>
  <div class="toggle-content">
    コンテンツの中身を入力
  </div>
</div>

input idと label for の属性値（toggle-checkbox-xxxxxxxxxx）は統一する

検索案内のHTMLソースコード

<div class="wp-block-cocoon-blocks-search-box search-form block-box">
  <div class="sform">キーワード</div>
  <div class="sbtn">検索</div>
</div>

タイムラインのHTMLソースコード

<div class="wp-block-cocoon-blocks-timeline timeline-box cf block-box">
  <div class="timeline-title">タイムラインのタイトル</div>
  <ul class="timeline">
    <li class="wp-block-cocoon-blocks-timeline-item timeline-item cf">
      <div class="timeline-item-label">ラベル</div>
      <div class="timeline-item-content cf">
        <div class="timeline-item-title">タイトル</div>
        <div class="timeline-item-snippet"></div>
      </div>
    </li>
  </ul>
</div>

マイクロテキストのHTMLソースコード

<div class="wp-block-cocoon-blocks-micro-text micro-text micro-copy micro-top">
  <span class="micro-text-content micro-content">マイクロコピーテキスト</span>
</div>
  • マイクロテキストを上寄りにする場合はmicro-topをmicro-bottomに変更
広告