CocoonブロックスタイルデザインをHTMLでカスタマイズ

Cocoon ブロックスタイルデザイン

このサイトは無料テーマ「Cocoon」を利用しています。

ブロックスタイルが主流になった今、ブロック操作に慣れる必要があります。

ブロックの追加からCocoonブロックを操作選択してもいいのですが、以下にHTMLを用意しました。

アフィリエイトリンクの改変禁止に対応したボタン化も紹介しています。

HTMLはブロックの追加＞フォーマット＞「カスタムHTML」か、「コードエディタ」にコードをコピペして使用できます。

もちろん無料テーマ「Cocoon」でしか動作しません。

「Cocoon」テーマで以下で紹介するHTMLをコピペして試してみてください。

WordPressに子テーマをインストールする必要性

WordPressの「テーマ」には無料のものから有料のものまでたくさんあります。「テーマ」とは”デザイン”や”見た目”のことで、色合いなどCSSをカスタマイズ設定して自分の好みのものにしていきます。カスタマイズするには「親テーマ」とそのテーマの「子テーマ」の2つが必要になります。

Cocoon公式からのアナウンス

Cocoon Blocks プラグインはテーマ内に組み込まれました。
プラグインを利用している場合は無効にしてください。

HTMLでカスタマイズ

アイコンボックス

ブロックの追加＞Cocoonブロック＞アイコンボックス＞スタイル設定＞タイプの選択

インフォメーションボックス

クエスチョンボックス

注意喚起ボックス

メモボックス
このように箇条書きも
簡単になりました

コメントボックス
番号つきリストも
利用可能

OKボックス

NGボックス

GOODボックス

BADボックス

プロフィールボックス

<!-- HTML -->
<div class="wp-block-cocoon-blocks-icon-box information-box common-icon-box block-box">
<p>インフォメーションボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box question-box common-icon-box block-box">
<p>クエスチョンボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box alert-box common-icon-box block-box">
<p>注意喚起ボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box memo-box common-icon-box block-box">
<ul><li>メモボックス</li>
<li>このように箇条書きも</li>
<li>簡単になりました</li></ul></div>

<div class="wp-block-cocoon-blocks-icon-box comment-box common-icon-box block-box">
<ol><li>コメントボックス</li>
<li>番号つきリストも</li>
<li>利用可能</li></ol></div>

<div class="wp-block-cocoon-blocks-icon-box ok-box common-icon-box block-box">
<p>OKボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box ng-box common-icon-box block-box">
<p>NGボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box good-box common-icon-box block-box">
<p>GOODボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box bad-box common-icon-box block-box">
<p>BADボックス</p></div>

<div class="wp-block-cocoon-blocks-icon-box profile-box common-icon-box block-box">
<p>プロフィールボックス</p></div>

案内ボックス

ブロックの追加＞Cocoonブロック＞案内ボックス＞スタイル設定＞タイプの選択

プライマリー

セカンダリー

サクセス

インフォ
非順序リスト
ボックス内でリストブロック利用

ワーニング
順序リスト
pからリストに変換可能

デンジャー

ライト

ダーク

<!-- HTML -->
<div class="wp-block-cocoon-blocks-info-box primary-box block-box">
<p>プライマリー</p></div>

<div class="wp-block-cocoon-blocks-info-box secondary-box block-box">
<p>セカンダリー</p></div>

<div class="wp-block-cocoon-blocks-info-box success-box block-box">
<p>サクセス</p></div>

<div class="wp-block-cocoon-blocks-info-box info-box block-box">
<ul><li>インフォ</li>
<li>非順序リスト</li>
<li>ボックス内でリストブロック利用</li></ul></div>

<div class="wp-block-cocoon-blocks-info-box warning-box block-box">
<ol><li>ワーニング</li>
<li>順序リスト</li>
<li>pからリストに変換可能</li></ol></div>

<div class="wp-block-cocoon-blocks-info-box danger-box block-box">
<p>デンジャー</p></div>

<div class="wp-block-cocoon-blocks-info-box light-box block-box">
<p>ライト</p></div>

<div class="wp-block-cocoon-blocks-info-box dark-box block-box">
<p>ダーク</p></div>

白抜きボックス

ブロックの追加＞Cocoonブロック＞白抜きボックス＞色設定

色設定でボーダー色、背景色、文字色を指定します。

灰色

黄色

緑色

赤色
箇条書き

青色
箇条書き

<!-- HTML -->
<div class="wp-block-cocoon-blocks-blank-box blank-box block-box"><p>灰色</p></div>

<div class="wp-block-cocoon-blocks-blank-box blank-box bb-yellow block-box"><p>黄色</p></div>

<div class="wp-block-cocoon-blocks-blank-box blank-box bb-green block-box"><p>緑色</p></div>

<div class="wp-block-cocoon-blocks-blank-box blank-box bb-red block-box">
<ul><li>赤色</li><li>箇条書き</li></ul></div>

<div class="wp-block-cocoon-blocks-blank-box blank-box bb-blue block-box">
<ol><li>青色</li><li>箇条書き</li></ol></div>

タブボックス

ブロックの追加＞Cocoonブロック＞タブボックス＞スタイル設定＞色設定

スタイル設定でタブが、色設定でボーダー色、背景色、文字色を指定します。

チェック

ポイント

TIPS

ヒント

ピックアップ
箇条書きも
可能です

ブックマーク
非順序リストにも
変換簡単

メモ

ダウンロード

休憩

GOOD

BAD

プロフィール

<!-- HTML -->
<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-check block-box">
<div class="bb-label"><span class="fa"></span></div><p>チェック</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-comment bb-yellow block-box">
<div class="bb-label"><span class="fa"></span></div><p>コメント</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-point bb-red block-box">
<div class="bb-label"><span class="fa"></span></div><p>ポイント</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-tips bb-blue block-box">
<div class="bb-label"><span class="fa"></span></div><p>TIPS</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-hint bb-green block-box">
<div class="bb-label"><span class="fa"></span></div><p>ヒント</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-pickup block-box">
<div class="bb-label"><span class="fa"></span></div>
<ul><li>ピックアップ</li>
<li>箇条書きも</li>
<li>可能です</li></ul></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-bookmark bb-yellow block-box">
<div class="bb-label"><span class="fa"></span></div>
<ol><li>ブックマーク</li>
<li>非順序リストにも</li>
<li>変換簡単</li></ol></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-memo bb-red block-box">
<div class="bb-label"><span class="fa"></span></div><p>メモ</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-download bb-blue block-box">
<div class="bb-label"><span class="fa"></span></div><p>ダウンロード</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-break bb-green block-box">
<div class="bb-label"><span class="fa"></span></div><p>休憩</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-ok bb-blue block-box">
<div class="bb-label"><span class="fa"></span></div><p>OK</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-ng bb-red block-box">
<div class="bb-label"><span class="fa"></span></div><p>NG</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-good bb-green block-box">
<div class="bb-label"><span class="fa"></span></div><p>GOOD</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-bad block-box">
<div class="bb-label"><span class="fa"></span></div><p>BAD</p></div>

<div class="wp-block-cocoon-blocks-tab-box blank-box bb-tab bb-profile bb-blue block-box">
<div class="bb-label"><span class="fa"></span></div><p>プロフィール</p></div>

付箋風ボックス

ブロックの追加＞Cocoonブロック＞付箋風ボックス＞スタイル設定＞タイプ

タイプで色指定します。

灰色

黄色

赤色
箇条書き

青色
箇条書き

緑色

<!-- HTML -->
<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky block-box">
<p>灰色</p></div>

<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky st-yellow block-box">
<p>黄色</p></div>

<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky st-red block-box">
<ul><li>赤色</li><li>箇条書き</li></ul></div>

<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky st-blue block-box">
<ol><li>青色</li><li>箇条書き</li></ol></div>

<div class="wp-block-cocoon-blocks-sticky-box blank-box sticky st-green block-box">
<p>緑色</p></div>

ブログカード

ブロックの追加＞Cocoonブロック＞ブログカード＞スタイル設定

スタイル設定で左上ラベルを指定できます。

エンタメフリーでデータ消費を気にせずYouTubeのMusic Videoを楽しむ

イメージキャラクターであるバイきんぐの小峠さんが「安すぎだろ！」と叫ぶほどのお得感です。電車での移動中や仕事の休憩中にYouTubeを観る人は多いと思います。同じくイヤホンで音楽やラジオを楽しんだり、電子書籍を読む人もいるでしょう。

空間を除菌・消臭できる次亜塩素酸水とは？ウイルス退治できる除菌水ジーア

次亜塩素酸水は殺菌料の一種であり、塩酸又は食塩水を電解することにより得られる、次亜塩素酸を主成分とする水溶液です。そして、次亜塩素酸水はエンベロープウイルスとノンエンベロープウイルスの両方に効果があるのに対して、アルコールはエンベロープウイルスにしか効果がなく、ノンエンベロープウイルスには使えません。

【光コラボ】口コミも評判も速度も、とにかく超満足な「enひかり」

新規に光回線を引こうと考えている方、もしくは現在、光回線を利用しているけど料金や速度、サービスに不満のある方は、たくさんいると思います。そして光回線とプロバイダーの契約にも、何を選んだらいいのか分からない、といった方もたくさんいると思います。

ボタン

ブロックの追加＞Cocoonブロック＞ボタン＞ボタン設定

ボタン設定で、URL、リンクの開き方、ボタンサイズ、円形、光らせる、文字サイズ
色設定で背景色、文字色、ボーダー色を指定します。
ボタンの位置はタブの左寄せ・中央揃え、右寄せで指定します。

ボタン小

「まこきちねっと」に飛びます。

トップページはこちら

レンタルサーバーはこちら

高速通信はこちら

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button button-block">
<a target="_self" href="https://makokichi.net/" class="btn btn-red">
トップページはこちら</a></div>

<div class="wp-block-cocoon-blocks-button aligncenter button-block">
<a rel="noopener" href="https://makokichi.net/pc/rentalserver-colorfulbox/" 
class="btn btn-circle has-background has-blue-background-color" target="_self">
レンタルサーバーはこちら</a></div>

<div class="wp-block-cocoon-blocks-button alignright button-block">
<a rel="noopener" href="https://makokichi.net/wifi/hikari-wifi-start/" 
class="btn btn-circle btn-shine has-background has-green-background-color" target="_self">
高速通信はこちら</a></div>

ボタン中

飛び先URLが空です。href=”URL” 、class=”btn btn-ボタン色”

ダウンロードはこちら

インストール方法はこちら

アップデート情報はこちら

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button button-block">
<a target="_self" href="" class="btn btn-pink btn-m">ダウンロードはこちら</a></div>

<div class="wp-block-cocoon-blocks-button aligncenter button-block">
<a target="_self" href="" class="btn btn-orange btn-m">インストール方法はこちら</a></div>

<div class="wp-block-cocoon-blocks-button alignright button-block">
<a target="_self" href="" class="btn btn-light-green btn-m">アップデート情報はこちら</a></div>

ボタン大

Cocoon公式サイト内に飛びます。

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button button-block">
<a target="_self" href="https://wp-cocoon.com/mixhost/" class="btn btn-red btn-l">
MixHostでサイト開設方法</a></div>

<div class="wp-block-cocoon-blocks-button button-block">
<a target="_self" href="https://wp-cocoon.com/xserver/" class="btn btn-orange btn-l">
エックスサーバーでサイト開設方法</a></div>

<div class="wp-block-cocoon-blocks-button button-block">
<a rel="noopener" target="_blank" href="https://wp-cocoon.com/colorfulbox/" class="btn btn-blue btn-l">
カラフルボックスでサイト開設方法</a></div>

<div class="wp-block-cocoon-blocks-button button-block">
<a target="_self" href="https://wp-cocoon.com/jetboy/" class="btn btn-green btn-l">
JETBOYでサイト開設方法</a></div>

丸形ボタン

飛び先URLが空です。

丸形ボタン小

丸形ボタン中

丸形ボタン大

href=”ＵＲＬ”

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a href="" class="btn btn-circle has-background has-indigo-background-color" target="_self">
丸形ボタン小<span class="fa fa-external-link internal-icon anchor-icon"></span></a></div>

<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a href="" class="btn btn-m btn-circle has-background has-teal-background-color" target="_self">
丸形ボタン中<span class="fa fa-external-link internal-icon anchor-icon"></span></a></div>

<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a href="" class="btn btn-l btn-circle has-background has-orange-background-color" target="_self">
丸形ボタン大<span class="fa fa-external-link internal-icon anchor-icon"></span></a></div>

光るボタン

光らせたい場合は、btn-shine を指定します。

光るボタン小

光るボタン中

光るボタン大

href=”ＵＲＬ”

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a target="_self" href="" class="btn btn-shine has-background has-pink-background-color">
光るボタン小</a></div>

<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a target="_self" href="" class="btn btn-m btn-shine has-background has-cyan-background-color">
光るボタン中</a></div>

<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a target="_self" href="" class="btn btn-l btn-shine has-background has-deep-orange-background-color">
光るボタン大</a></div>

アフィリエイトリンクに利用できるボタン

アフィリエイトリンク（aタグ）の改変は禁止されている場合がほとんどです。

こちらは改変せずにそのままコピペしてアフィリエイトリンク（aタグ）を貼り付けるとボタン化ができます。

もちろん「Cocoonテーマ」を使用しているのが前提で、CSSの記述の必要もありません。

下のボタンは生きてるので注意。

お名前.com

JETBOY

カラフルボックス

以下のコードをコピペして、”ここに・・”にASPから取得したアフィリエイトリンク（aタグ）を貼り付けて使用します。

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button-wrap alignleft btn-wrap btn-wrap-red button-block">
ここにアフィリエイトリンク（左ボタン）
</div>

<div class="wp-block-cocoon-blocks-button-wrap aligncenter btn-wrap btn-wrap-orange button-block">
ここにアフィリエイトリンク（中央ボタン）
</div>

<div class="wp-block-cocoon-blocks-button-wrap alignright btn-wrap btn-wrap-blue button-block">
ここにアフィリエイトリンク（右ボタン）
</div>

光らせたい場合は、btn-wrap-shine を指定すれば光るボタンになります。

青いボタン

<!-- HTML -->
<div class="wp-block-cocoon-blocks-button-wrap aligncenter btn-wrap btn-wrap-shine 
btn-wrap-blue button-block">
ここにアフィリエイトリンク（左ボタン）
</div>

トグルボックス

ブロックの追加＞Cocoonブロック＞トグルボックス＞色設定

色設定でボーダー色、背景色、文字色を指定します。

デフォルトトグルボックス見出し

テキスト

黄色トグルボックス見出し

テキスト

ピンクトグルボックス見出し

テキスト

赤色トグルボックス見出し

テキスト

青色トグルボックス見出し

テキスト

緑色トグルボックス見出し

テキスト
リスト表示もできます

<!-- HTML -->
<div class="wp-block-cocoon-blocks-toggle-box toggle-wrap block-box">
<input id="toggle-checkbox-20190109012728" class="toggle-checkbox" type="checkbox">
<label class="toggle-button" for="toggle-checkbox-20190109012728">
デフォルトトグルボックス見出し</label><div class="toggle-content">
<p>テキスト</p></div></div>

<div class="wp-block-cocoon-blocks-toggle-box toggle-wrap tb-yellow block-box">
<input id="toggle-checkbox-20190109012856" class="toggle-checkbox" type="checkbox">
<label class="toggle-button" for="toggle-checkbox-20190109012856">
黄色トグルボックス見出し</label><div class="toggle-content">
<p>テキスト</p></div></div>

<div class="wp-block-cocoon-blocks-toggle-box toggle-wrap tb-red block-box">
<input id="toggle-checkbox-20190109012814" class="toggle-checkbox" type="checkbox">
<label class="toggle-button" for="toggle-checkbox-20190109012814">
赤色トグルボックス見出し</label><div class="toggle-content">
<p>テキスト</p></div></div>

<div class="wp-block-cocoon-blocks-toggle-box toggle-wrap tb-blue block-box">
<input id="toggle-checkbox-20190109013005" class="toggle-checkbox" type="checkbox">
<label class="toggle-button" for="toggle-checkbox-20190109013005">
青色トグルボックス見出し</label><div class="toggle-content">
<p>テキスト</p></div></div>

<div class="wp-block-cocoon-blocks-toggle-box toggle-wrap tb-green block-box">
<input id="toggle-checkbox-20190109013044" class="toggle-checkbox" type="checkbox">
<label class="toggle-button" for="toggle-checkbox-20190109013044">
緑色トグルボックス見出し</label><div class="toggle-content">
<ul><li>緑色とブルーボックスの内容</li>
<li>リスト表示もできます</li></ul></div></div>

Cocoon汎用ブロック

見出しボックス

ブロックの追加＞Cocoon汎用ブロック＞見出しボックス＞スタイル設定＞色設定

色設定で枠の色、背景色、文字色を指定します。

案内

ワンポイント案内など。

注意

注意喚起を促す内容など。

GOOD

グッドな内容など。

ブレイク

ブレイクな内容など。

<!-- HTML -->
<div class="wp-block-cocoon-blocks-caption-box caption-box block-box">
<div class="caption-box-label block-box-label box-label fab-info-circle">
<span class="caption-box-label-text block-box-label-text">案内</span></div>
<div class="caption-box-content"><p>ワンポイント案内など。</p></div></div>

<div class="wp-block-cocoon-blocks-caption-box caption-box cb-red block-box">
<div class="caption-box-label block-box-label fab-exclamation-circle">
<span class="caption-box-label-text block-box-label-text">注意</span></div>
<div class="caption-box-content"><p>注意喚起を促す内容など</p></div></div>

<div class="wp-block-cocoon-blocks-caption-box caption-box cb-green block-box">
<div class="caption-box-label block-box-label fab-thumbs-up">
<span class="caption-box-label-text block-box-label-text">GOOD</span></div>
<div class="caption-box-content"><p>グッドな内容など。</p></div></div>

<div class="wp-block-cocoon-blocks-caption-box caption-box cb-deep-orange block-box">
<div class="caption-box-label block-box-label fab-coffee">
<span class="caption-box-label-text block-box-label-text">ブレイク</span></div>
<div class="caption-box-content"><p>ブレイクな内容など。</p></div></div>

タブ見出しボックス

ブロックの追加＞Cocoon汎用ボックス＞タブ見出しボックス＞スタイル設定

スタイル設定でアイコンを指定、色設定で枠の色、背景色、文字色が指定できます。

ダウンロード

https://・・・

食事

メニューなど。

チェック

チェック項目など。

<!-- HTML -->
<div class="wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box tcb-light-blue">
<div class="tab-caption-box-label block-box-label box-label fab-download">
<span class="tab-caption-box-label-text block-box-label-text">ダウンロード</span></div>
<div class="tab-caption-box-content">
<p>https://・・・</p></div></div>

<div class="wp-block-cocoon-blocks-tab-caption-box block-box tcb-yellow">
<div class="tab-caption-box-label block-box-label box-label fab-cutlery">
<span class="tab-caption-box-label-text block-box-label-text">食事</span></div>
<div class="tab-caption-box-content block-box-content box-content">
<p>メニューなど。</p></div></div>

<div class="wp-block-cocoon-blocks-tab-caption-box block-box tcb-red">
<div class="tab-caption-box-label block-box-label box-label fab-check">
<span class="tab-caption-box-label-text block-box-label-text">チェック</span></div>
<div class="tab-caption-box-content"><p>チェック項目など。</p></div></div>

ラベルボックス

ブロックの追加＞Cocoon汎用ブロック＞ラベルボックス＞スタイル設定＞色設定

Tips

ちょっとしたコツなど。

質問

問い合わせ内容など。

良い点

優れている内容など。

<!-- HTML -->
<div class="wp-block-cocoon-blocks-label-box label-box block-box lb-green">
<div class="label-box-label block-box-label box-label fab-pencil">
<span class="label-box-label-text block-box-label-text">Tips</span></div>
<div class="label-box-content block-box-content box-content">
<p>ちょっとしたコツなど。</p></div></div>

<div class="wp-block-cocoon-blocks-label-box label-box block-box lb-blue">
<div class="label-box-label block-box-label box-label fab-envelope">
<span class="label-box-label-text block-box-label-text">質問</span></div>
<div class="label-box-content block-box-content box-content">
<p>問い合わせなど。</p></div></div>

<div class="wp-block-cocoon-blocks-label-box label-box block-box lb-pink">
<div class="label-box-label block-box-label box-label fab-ok">
<span class="label-box-label-text block-box-label-text">良い点</span></div>
<div class="label-box-content block-box-content box-content">
<p>優れている内容など。</p></div></div>

マイクロコピー

マイクロテキスト

ブロックの追加＞Cocoonマイクロコピー＞マイクロテキスト＞スタイル設定＞色設定

スタイル設定でテキストの上下位置、アイコンの指定、色設定で文字色を指定します。

テキストはタブの左寄せ・中央揃え、右寄せで位置指定します

＼上寄りテキスト／

ボタン

／下寄りテキスト＼

<!-- HTML -->
<div class="wp-block-cocoon-blocks-micro-text aligncenter micro-text micro-copy micro-top">
<span class="micro-text-content micro-content">
<span class="micro-text-icon micro-icon fab-thumbs-up"></span>＼上寄りテキスト／</span></div>

<div class="wp-block-cocoon-blocks-button-wrap aligncenter btn-wrap btn-wrap-red button-block">
<a href="">ボタン</a></div>

<div class="wp-block-cocoon-blocks-micro-text aligncenter micro-text micro-copy micro-bottom">
<span class="micro-text-content micro-content">
<span class="micro-text-icon micro-icon fab-pencil"></span>／下寄りテキスト＼</span></div>

マイクロバルーン

ブロックの追加＞Cocoonマイクロコピー＞マイクロバルーン＞スタイル設定＞色設定

スタイル設定でバルーンの上下位置、円形、アイコンを指定、色設定で枠の色、背景色、文字色を指定します。

下寄りバルーン

丸形ボタン中

上寄りバルーン

<!-- HTML -->
<div class="wp-block-cocoon-blocks-micro-balloon-2 aligncenter micro-balloon 
micro-top micro-copy has-background has-green-background-color">
<span class="micro-balloon-content micro-content">
<span class="micro-balloon-icon micro-icon fab-info-circle"></span>下寄りバルーン</span></div>

<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block">
<a href="" class="btn btn-m btn-circle has-background has-blue-background-color" target="_self">
丸形ボタン中<span class="fa fa-external-link internal-icon anchor-icon"></span></a></div>

<div class="wp-block-cocoon-blocks-micro-balloon-2 aligncenter micro-balloon 
micro-bottom mc-circle micro-copy has-text-color has-border-color has-pink-color has-pink-border-color">
<span class="micro-balloon-content micro-content">
<span class="micro-balloon-icon micro-icon fab-flag"></span>上寄りバルーン</span></div>

Cocoonレイアウト

２カラム

ブロックの追加＞Cocoonレイアウト＞２カラム＞スタイル設定

スタイル設定で左右の比率を選ぶことができます。

「１：１」

テキストや画像・左

テキストや画像・右

<!-- 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">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

「１：２」

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「１：２」 -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-3-1-2 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

「２：１」

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「２：１」 -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-3-2-1 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

「１：３」

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「１：３」 -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-4-1-3 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

「３：１」

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「３：１」 -->
<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-4-3-1 layout-box">
<div class="wp-block-cocoon-blocks-column-left column-left">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

３カラム

ブロックの追加＞Cocoonレイアウト＞３カラム＞スタイル設定

テキストや画像・左

テキストや画像・中央

テキストや画像・右

<!-- 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">
<p>テキストや画像・左</p>
</div>
<div class="wp-block-cocoon-blocks-column-center column-center">
<p>テキストや画像・中央</p>
</div>
<div class="wp-block-cocoon-blocks-column-right column-right">
<p>テキストや画像・右</p>
</div></div>

参考

Cocoon公式サイト

Cocoon Blocksの現在の対応状況

Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。

まとめ

以上のHTMLは「カスタムHTML」か「コードエディタ」にコピペして使用できます。

もちろん「Cocoonテーマ」でしか動作しません。

「Cocoon」は、無料テーマでありながら有料テーマと同等の機能を備えています。

シンプルでありながら検索エンジン最適化が行えて、ページ表示の高速化にも対応しています。

モバイルファーストでAMP（ページを高速表示させる）にも対応しています。

見た目のスキンも迷うほど豊富に用意されているので、自由に好みのカスタマイズが可能になっています。

Cocoon ブロックスタイル デザイン

HTMLでカスタマイズ

アイコンボックス

案内ボックス

白抜きボックス

タブボックス

付箋風ボックス

ブログカード

ボタン

ボタン小

ボタン中

ボタン大

丸形ボタン

光るボタン

アフィリエイトリンクに利用できるボタン

トグルボックス

Cocoon汎用ブロック

見出しボックス

タブ見出しボックス

ラベルボックス

マイクロコピー

マイクロテキスト

マイクロバルーン

Cocoonレイアウト

２カラム

３カラム

参考

まとめ

コメント

Cocoon ブロックスタイルデザイン