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

ワードプレスWordPress
スポンサーリンク

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

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

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

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

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

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

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

 

Cocoon公式からのアナウンス

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

アイコンボックスをカスタマイズ

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

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

クエスチョンボックス

注意喚起ボックス

  • メモボックス
  • このように箇条書きも
  • 簡単になりました
  1. コメントボックス
  2. 番号つきリストも
  3. 利用可能

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ブロック>案内ボックス>スタイル設定>タイプの選択

プライマリー

セカンダリー

サクセス

  • インフォ
  • 非順序リスト
  • ボックス内でリストブロック利用
  1. ワーニング
  2. 順序リスト
  3. 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ブロック>白抜きボックス>色設定

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

灰色

黄色

  • 赤色
  • 箇条書き
  1. 青色
  2. 箇条書き
<!-- 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-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>

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

タブボックスをカスタマイズ

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

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

チェック

コメント

ポイント

TIPS

ヒント

  • ピックアップ
  • 箇条書きも
  • 可能です
  1. ブックマーク
  2. 非順序リストにも
  3. 変換簡単

メモ

ダウンロード

休憩

OK

NG

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ブロック>付箋風ボックス>スタイル設定>タイプ

タイプで色指定します。

灰色

黄色

  • 赤色
  • 箇条書き
  1. 青色
  2. 箇条書き

緑色

<!-- 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ブロック>ブログカード>スタイル設定

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

wordpress_org

ボタンをカスタマイズ

ブロックの追加>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=”URL”

<!-- 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>

光るボタンをカスタマイズ

飛び先URLが空です。

href=”URL”

<!-- 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の記述の必要もありません。

以下のコードをコピペして、”ここに・・”に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レイアウト

2カラム

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

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

「1:1」

レーシングカー
レーシングカー

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「1:1」 -->
<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>

「1:2」

京都
野菜バスケット

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「1:2」 -->
<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>

「2:1」

アベンジャーズ冬山
夜空

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「2:1」 -->
<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>

「1:3」

パルクール
バイク

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「1:3」 -->
<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>

「3:1」

ホームWi-Fi-05
ホームWi-Fi-02

テキストや画像・左

テキストや画像・右

<!-- HTML -->
<!-- 「3:1」 -->
<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>

3カラム

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

フランス
東京の夜景

テキストや画像・左

テキストや画像・中央

テキストや画像・右

<!-- HTML -->
<!-- 「3カラム」 -->
<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公式サイト

まとめ

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

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

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

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

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

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

コメント