WordPress の高機能テーマ Cocoon を利用されている方は多くいらっしゃると思います。私も一部のブログにて活用しています。
Cocoon で準備されているブロックを functions.php を直接触って挿入する場合がありますが、下書きの記事などでブロックを挿入してみてプレビューし、HTML を調べてソースをコピーするという作業が毎回発生していました。
そのような作業が手間に感じましたので、今回、Cocoon で準備されているブロックの HTMLソースコードをまとめて見ました。
WordPress 6.0 とCocoon 2.4.4 を利用して確認しています。
- 吹き出しのHTMLソースコード
- ラベルボックスのHTMLソースコード
- タブ見出しボックスのHTMLソースコード
- 見出しボックスのHTMLソースコード
- アイコンリストのHTMLソースコード
- 案内ボックスのHTMLソースコード
- 白抜きボックスのHTMLソースコード
- アイコンボックスのHTMLソースコード
- マイクロバルーンのHTMLソースコード
- ボタンのHTMLソースコード
- 2カラムのHTMLソースコード
- 3カラムのHTMLソースコード
- 付箋風ボックスのHTMLソースコード
- タブボックスのHTMLソースコード
- 囲みボタンのHTMLソースコード
- アコーディオン(トグル)のHTMLソースコード
- 検索案内のHTMLソースコード
- タイムラインのHTMLソースコード
- マイクロテキストのHTMLソースコード
吹き出しの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-box | OK |
ng-box | NG |
good-box | GOOD |
bad-box | BAD |
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-1 | 1:1 |
column-2-3-1-2 | 1:2 |
column-2-3-2-1 | 2:1 |
column-2-4-1-3 | 1:3 |
column-2-4-3-1 | 3: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-amazon | Amazon |
bb-ok | OK |
bb-ng | NG |
bb-good | GOOD |
bb-bad | BAD |
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に変更
コメント