グループ化ブロック:まとめ

4,047 views

使い方!

  1. 専用プラグインをインストールして有効化
  2. コピーボタンをクリック
  3. Shift + Ctrl + V」でテキストとして投稿画面で貼り付け

」が付いているデザインは別ページにさらにデザインパターンを用意しています。

ノーマル

①角丸

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-round","plusbfStyle":".bfgrp-round {\n    padding: 1.5rem;\n    border-radius: .5rem;\n}\n.bfgrp-round *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round","style":{"color":{"background":"#f3f8fc"}},"plusbfClassName":"bfgrp-round","plusbfStyle":".bfgrp-round {\n    padding: 1.5rem;\n    border-radius: .5rem;\n}\n.bfgrp-round *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round has-background" style="background-color:#f3f8fc"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round","style":{"color":{"background":"#f4fbfc"}},"plusbfClassName":"bfgrp-round","plusbfStyle":".bfgrp-round {\n    padding: 1.5rem;\n    border-radius: .5rem;\n}\n.bfgrp-round *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round has-background" style="background-color:#f4fbfc"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round","style":{"color":{"background":"#fffaf3"}},"plusbfClassName":"bfgrp-round","plusbfStyle":".bfgrp-round {\n    padding: 1.5rem;\n    border-radius: .5rem;\n}\n.bfgrp-round *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round has-background" style="background-color:#fffaf3"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round","style":{"color":{"background":"#fef6f4"}},"plusbfClassName":"bfgrp-round","plusbfStyle":".bfgrp-round {\n    padding: 1.5rem;\n    border-radius: .5rem;\n}\n.bfgrp-round *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round has-background" style="background-color:#fef6f4"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

②太い枠線

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round-boldline","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-round-boldline","plusbfStyle":".bfgrp-round-boldline {\n    position: relative;\n    z-index: 0;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n}\n.bfgrp-round-boldline:before {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    border: 0.5rem solid;\n    border-radius: inherit;\n    opacity: 0.2;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.bfgrp-round-boldline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round-boldline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round-boldline has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round-boldline","style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}},"plusbfClassName":"bfgrp-round-boldline","plusbfStyle":".bfgrp-round-boldline {\n    position: relative;\n    z-index: 0;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n}\n.bfgrp-round-boldline:before {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    border: 0.5rem solid;\n    border-radius: inherit;\n    opacity: 0.2;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.bfgrp-round-boldline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round-boldline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round-boldline has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round-boldline","style":{"color":{"text":"#76ced3","background":"#f4fbfc"}},"plusbfClassName":"bfgrp-round-boldline","plusbfStyle":".bfgrp-round-boldline {\n    position: relative;\n    z-index: 0;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n}\n.bfgrp-round-boldline:before {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    border: 0.5rem solid;\n    border-radius: inherit;\n    opacity: 0.2;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.bfgrp-round-boldline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round-boldline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round-boldline has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round-boldline","style":{"color":{"background":"#fffaf3","text":"#ffc266"}},"plusbfClassName":"bfgrp-round-boldline","plusbfStyle":".bfgrp-round-boldline {\n    position: relative;\n    z-index: 0;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n}\n.bfgrp-round-boldline:before {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    border: 0.5rem solid;\n    border-radius: inherit;\n    opacity: 0.2;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.bfgrp-round-boldline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round-boldline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round-boldline has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-round-boldline","style":{"color":{"text":"#f28d79","background":"#fef6f4"}},"plusbfClassName":"bfgrp-round-boldline","plusbfStyle":".bfgrp-round-boldline {\n    position: relative;\n    z-index: 0;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n}\n.bfgrp-round-boldline:before {\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 100%;\n    height: 100%;\n    border: 0.5rem solid;\n    border-radius: inherit;\n    opacity: 0.2;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.bfgrp-round-boldline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-round-boldline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-round-boldline has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

③枠線

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-line","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-line","plusbfStyle":".bfgrp-line {\n    padding: 1.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bfgrp-line *:first-child {\n    margin-top: 0;\n}\n.bfgrp-line *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-line has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-line","style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}},"plusbfClassName":"bfgrp-line","plusbfStyle":".bfgrp-line {\n    padding: 1.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bfgrp-line *:first-child {\n    margin-top: 0;\n}\n.bfgrp-line *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-line has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-line","style":{"color":{"text":"#76ced3","background":"#f4fbfc"}},"plusbfClassName":"bfgrp-line","plusbfStyle":".bfgrp-line {\n    padding: 1.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bfgrp-line *:first-child {\n    margin-top: 0;\n}\n.bfgrp-line *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-line has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-line","style":{"color":{"background":"#fffaf3","text":"#ffc266"}},"plusbfClassName":"bfgrp-line","plusbfStyle":".bfgrp-line {\n    padding: 1.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bfgrp-line *:first-child {\n    margin-top: 0;\n}\n.bfgrp-line *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-line has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-line","style":{"color":{"text":"#f28d79","background":"#fef6f4"}},"plusbfClassName":"bfgrp-line","plusbfStyle":".bfgrp-line {\n    padding: 1.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bfgrp-line *:first-child {\n    margin-top: 0;\n}\n.bfgrp-line *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-line has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

④二重線

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-doubleline","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-doubleline","plusbfStyle":".bfgrp-doubleline {\n    padding: 1.5rem;\n    border: 4px double;\n    box-sizing: border-box;\n}\n.bfgrp-doubleline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-doubleline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-doubleline has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-doubleline","style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}},"plusbfClassName":"bfgrp-doubleline","plusbfStyle":".bfgrp-doubleline {\n    padding: 1.5rem;\n    border: 4px double;\n    box-sizing: border-box;\n}\n.bfgrp-doubleline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-doubleline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-doubleline has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-doubleline","style":{"color":{"text":"#76ced3","background":"#f4fbfc"}},"plusbfClassName":"bfgrp-doubleline","plusbfStyle":".bfgrp-doubleline {\n    padding: 1.5rem;\n    border: 4px double;\n    box-sizing: border-box;\n}\n.bfgrp-doubleline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-doubleline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-doubleline has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-doubleline","style":{"color":{"background":"#fffaf3","text":"#ffc266"}},"plusbfClassName":"bfgrp-doubleline","plusbfStyle":".bfgrp-doubleline {\n    padding: 1.5rem;\n    border: 4px double;\n    box-sizing: border-box;\n}\n.bfgrp-doubleline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-doubleline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-doubleline has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-doubleline","style":{"color":{"text":"#f28d79","background":"#fef6f4"}},"plusbfClassName":"bfgrp-doubleline","plusbfStyle":".bfgrp-doubleline {\n    padding: 1.5rem;\n    border: 4px double;\n    box-sizing: border-box;\n}\n.bfgrp-doubleline *:first-child {\n    margin-top: 0;\n}\n.bfgrp-doubleline *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-doubleline has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

⑤影

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-shadow1","plusbfClassName":"bfgrp-shadow1","plusbfStyle":".bfgrp-shadow1 {\n    padding: 1.5rem;\n    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);\n}\n.bfgrp-shadow1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-shadow1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-shadow1"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-shadow2","plusbfClassName":"bfgrp-shadow2","plusbfStyle":".bfgrp-shadow2 {\n    padding: 1.5rem;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-shadow2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-shadow2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-shadow2"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルテキスト
サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-shadow3","plusbfClassName":"bfgrp-shadow3","plusbfStyle":".bfgrp-shadow3 {\n    padding: 1.5rem;\n    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0,0,0,0.15);\n}\n.bfgrp-shadow3 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-shadow3 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-shadow3"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルテキスト<br>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

タイトル付き

アイコンver1 ★

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon1","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-title-icon1","plusbfStyle":".bfgrp-title-icon1 {\n    padding: 1.5rem;\n    border-radius: 8px;\n}\np.bfgrp-title-icon1__title {\n    padding: 0 0 0 2.5rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon1__title:before,\np.bfgrp-title-icon1__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon1__title:after,\np.bfgrp-title-icon1__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon1__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon1 has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon1__title","plusbfClassName":"bfgrp-title-icon1__title"} -->
<p class="bfgrp-title-icon1__title">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon1","style":{"color":{"background":"#f3f8fc"}},"plusbfClassName":"bfgrp-title-icon1","plusbfStyle":".bfgrp-title-icon1 {\n    padding: 1.5rem;\n    border-radius: 8px;\n}\np.bfgrp-title-icon1__title {\n    padding: 0 0 0 2.5rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon1__title:before,\np.bfgrp-title-icon1__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon1__title:after,\np.bfgrp-title-icon1__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon1__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon1 has-background" style="background-color:#f3f8fc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon1__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon1__title"} -->
<p class="bfgrp-title-icon1__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon1","style":{"color":{"background":"#f4fbfc"}},"plusbfClassName":"bfgrp-title-icon1","plusbfStyle":".bfgrp-title-icon1 {\n    padding: 1.5rem;\n    border-radius: 8px;\n}\np.bfgrp-title-icon1__title {\n    padding: 0 0 0 2.5rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon1__title:before,\np.bfgrp-title-icon1__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon1__title:after,\np.bfgrp-title-icon1__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon1__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon1 has-background" style="background-color:#f4fbfc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon1__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon1__title"} -->
<p class="bfgrp-title-icon1__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon1","style":{"color":{"background":"#fffaf3"}},"plusbfClassName":"bfgrp-title-icon1","plusbfStyle":".bfgrp-title-icon1 {\n    padding: 1.5rem;\n    border-radius: 8px;\n}\np.bfgrp-title-icon1__title {\n    padding: 0 0 0 2.5rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon1__title:before,\np.bfgrp-title-icon1__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon1__title:after,\np.bfgrp-title-icon1__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon1__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon1 has-background" style="background-color:#fffaf3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon1__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon1__title"} -->
<p class="bfgrp-title-icon1__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon1","style":{"color":{"background":"#fef6f4"}},"plusbfClassName":"bfgrp-title-icon1","plusbfStyle":".bfgrp-title-icon1 {\n    padding: 1.5rem;\n    border-radius: 8px;\n}\np.bfgrp-title-icon1__title {\n    padding: 0 0 0 2.5rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon1__title:before,\np.bfgrp-title-icon1__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon1__title:after,\np.bfgrp-title-icon1__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon1__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon1 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon1 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon1 has-background" style="background-color:#fef6f4"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon1__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon1__title"} -->
<p class="bfgrp-title-icon1__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC
men

men

アイコンやカラーを変更した約100パターンを別のページに作成しました。

アイコンver2

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon2","plusbfClassName":"bfgrp-title-icon2","plusbfStyle":".bfgrp-title-icon2 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 0 1px 1px rgba(0 0 0 / 0.05);\n}\np.bfgrp-title-icon2__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.5rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon2__title:before {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon2"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon2__title","plusbfClassName":"bfgrp-title-icon2__title"} -->
<p class="bfgrp-title-icon2__title">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon2","plusbfClassName":"bfgrp-title-icon2","plusbfStyle":".bfgrp-title-icon2 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 0 1px 1px rgba(0 0 0 / 0.05);\n}\np.bfgrp-title-icon2__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.5rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon2__title:before {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon2"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon2__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon2__title"} -->
<p class="bfgrp-title-icon2__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon2","plusbfClassName":"bfgrp-title-icon2","plusbfStyle":".bfgrp-title-icon2 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 0 1px 1px rgba(0 0 0 / 0.05);\n}\np.bfgrp-title-icon2__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.5rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon2__title:before {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon2"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon2__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon2__title"} -->
<p class="bfgrp-title-icon2__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon2","plusbfClassName":"bfgrp-title-icon2","plusbfStyle":".bfgrp-title-icon2 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 0 1px 1px rgba(0 0 0 / 0.05);\n}\np.bfgrp-title-icon2__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.5rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon2__title:before {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon2"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon2__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon2__title"} -->
<p class="bfgrp-title-icon2__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon2","plusbfClassName":"bfgrp-title-icon2","plusbfStyle":".bfgrp-title-icon2 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 0 1px 1px rgba(0 0 0 / 0.05);\n}\np.bfgrp-title-icon2__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.5rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon2__title:before {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    z-index: 1;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon2 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon2 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon2"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon2__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon2__title"} -->
<p class="bfgrp-title-icon2__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

アイコンver3 ★

サンプルタイトル

サンプルテキスト

タイトル

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon3","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon3","plusbfStyle":".bfgrp-title-icon3 {\n    margin-top: 3rem;\n    padding: 1.5rem;\n    border-radius: 4px;\n    border: 1px solid;\n}\n.bfgrp-title-icon3 .wp-block-group__inner-container p {\n    color: #333;\n}\np.bfgrp-title-icon3__title {\n    padding: 0 0.5rem 0 3rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n    margin-top: -2.5rem!important;\n    margin-left: -.5rem!important;\n    width: fit-content;\n    background: #fff;\n}\np.bfgrp-title-icon3__title:before,\np.bfgrp-title-icon3__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after{\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after,\np.bfgrp-title-icon3__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon3__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon3 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon3 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon3 has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon3__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon3__title"} -->
<p class="bfgrp-title-icon3__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon3","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon3","plusbfStyle":".bfgrp-title-icon3 {\n    margin-top: 3rem;\n    padding: 1.5rem;\n    border-radius: 4px;\n    border: 1px solid;\n}\n.bfgrp-title-icon3 .wp-block-group__inner-container p {\n    color: #333;\n}\np.bfgrp-title-icon3__title {\n    padding: 0 0.5rem 0 3rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n    margin-top: -2.5rem!important;\n    margin-left: -.5rem!important;\n    width: fit-content;\n    background: #fff;\n}\np.bfgrp-title-icon3__title:before,\np.bfgrp-title-icon3__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after{\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after,\np.bfgrp-title-icon3__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon3__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon3 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon3 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon3 has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon3__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon3__title"} -->
<p class="bfgrp-title-icon3__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon3","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon3","plusbfStyle":".bfgrp-title-icon3 {\n    margin-top: 3rem;\n    padding: 1.5rem;\n    border-radius: 4px;\n    border: 1px solid;\n}\n.bfgrp-title-icon3 .wp-block-group__inner-container p {\n    color: #333;\n}\np.bfgrp-title-icon3__title {\n    padding: 0 0.5rem 0 3rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n    margin-top: -2.5rem!important;\n    margin-left: -.5rem!important;\n    width: fit-content;\n    background: #fff;\n}\np.bfgrp-title-icon3__title:before,\np.bfgrp-title-icon3__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after{\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after,\np.bfgrp-title-icon3__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon3__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon3 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon3 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon3 has-text-color" style="color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon3__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon3__title"} -->
<p class="bfgrp-title-icon3__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon3","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon3","plusbfStyle":".bfgrp-title-icon3 {\n    margin-top: 3rem;\n    padding: 1.5rem;\n    border-radius: 4px;\n    border: 1px solid;\n}\n.bfgrp-title-icon3 .wp-block-group__inner-container p {\n    color: #333;\n}\np.bfgrp-title-icon3__title {\n    padding: 0 0.5rem 0 3rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n    margin-top: -2.5rem!important;\n    margin-left: -.5rem!important;\n    width: fit-content;\n    background: #fff;\n}\np.bfgrp-title-icon3__title:before,\np.bfgrp-title-icon3__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after{\n    left: 0.5rem;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon3__title:after,\np.bfgrp-title-icon3__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon3__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon3 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon3 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon3 has-text-color" style="color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon3__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon3__title"} -->
<p class="bfgrp-title-icon3__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC
men

men

アイコンやカラーを変更したパターンを別のページにまとめておきました。

アイコンver4

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon4","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon4","plusbfStyle":".bfgrp-title-icon4 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    border: 1px solid;\n    box-shadow: 4px 4px 0;\n}\n.bfgrp-title-icon4 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon4__title {\n    padding: 0 0 0 2.75rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon4__title:before,\np.bfgrp-title-icon4__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon4__title:after,\np.bfgrp-title-icon4__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon4__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon4 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon4 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon4 has-text-color" style="color:#6c6c6c"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon4__title","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon4__title"} -->
<p class="bfgrp-title-icon4__title has-text-color" style="color:#6c6c6c">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon4","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon4","plusbfStyle":".bfgrp-title-icon4 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    border: 1px solid;\n    box-shadow: 4px 4px 0;\n}\n.bfgrp-title-icon4 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon4__title {\n    padding: 0 0 0 2.75rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon4__title:before,\np.bfgrp-title-icon4__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon4__title:after,\np.bfgrp-title-icon4__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon4__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon4 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon4 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon4 has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon4__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon4__title"} -->
<p class="bfgrp-title-icon4__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon4","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon4","plusbfStyle":".bfgrp-title-icon4 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    border: 1px solid;\n    box-shadow: 4px 4px 0;\n}\n.bfgrp-title-icon4 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon4__title {\n    padding: 0 0 0 2.75rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon4__title:before,\np.bfgrp-title-icon4__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon4__title:after,\np.bfgrp-title-icon4__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon4__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon4 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon4 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon4 has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon4__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon4__title"} -->
<p class="bfgrp-title-icon4__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon4","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon4","plusbfStyle":".bfgrp-title-icon4 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    border: 1px solid;\n    box-shadow: 4px 4px 0;\n}\n.bfgrp-title-icon4 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon4__title {\n    padding: 0 0 0 2.75rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon4__title:before,\np.bfgrp-title-icon4__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon4__title:after,\np.bfgrp-title-icon4__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon4__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon4 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon4 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon4 has-text-color" style="color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon4__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon4__title"} -->
<p class="bfgrp-title-icon4__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon4","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon4","plusbfStyle":".bfgrp-title-icon4 {\n    padding: 1.5rem;\n    border-radius: 8px;\n    border: 1px solid;\n    box-shadow: 4px 4px 0;\n}\n.bfgrp-title-icon4 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon4__title {\n    padding: 0 0 0 2.75rem;\n    position: relative;\n    margin-bottom: 1rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon4__title:before,\np.bfgrp-title-icon4__title:after {\n    width: 36px;\n    height: 36px;\n    display: inline-block;\n    line-height: 36px;\n    left: 0;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon4__title:after,\np.bfgrp-title-icon4__title:after {\n    z-index: 0;\n    content: \u0022\u0022;\n    border-radius: 50%;\n    background: currentColor;\n    position: absolute;\n    top: calc(50% - 18px);\n}\np.bfgrp-title-icon4__title:before {\n    z-index: 1;\n    content: \u0022\\f304\u0022;\n    font-family: font awesome\\ 5 free;\n    color: #fff;\n    text-align: center;\n    position: absolute;\n    top: calc(50% - 18px);\n}\n.bfgrp-title-icon4 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon4 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon4 has-text-color" style="color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon4__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon4__title"} -->
<p class="bfgrp-title-icon4__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

アイコンver5

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon5","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon5","plusbfStyle":".bfgrp-title-icon5 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.25rem 1.5rem 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-title-icon5:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bfgrp-title-icon5 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon5__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon5__title:before,\np.bfgrp-title-icon5__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon5__title:after,\np.bfgrp-title-icon5__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon5__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon5 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon5 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon5 has-text-color" style="color:#6c6c6c"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon5__title","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon5__title"} -->
<p class="bfgrp-title-icon5__title has-text-color" style="color:#6c6c6c">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon5","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon5","plusbfStyle":".bfgrp-title-icon5 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.25rem 1.5rem 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-title-icon5:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bfgrp-title-icon5 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon5__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon5__title:before,\np.bfgrp-title-icon5__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon5__title:after,\np.bfgrp-title-icon5__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon5__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon5 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon5 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon5 has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon5__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon5__title"} -->
<p class="bfgrp-title-icon5__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon5","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon5","plusbfStyle":".bfgrp-title-icon5 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.25rem 1.5rem 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-title-icon5:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bfgrp-title-icon5 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon5__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon5__title:before,\np.bfgrp-title-icon5__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon5__title:after,\np.bfgrp-title-icon5__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon5__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon5 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon5 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon5 has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon5__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon5__title"} -->
<p class="bfgrp-title-icon5__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon5","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon5","plusbfStyle":".bfgrp-title-icon5 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.25rem 1.5rem 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-title-icon5:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bfgrp-title-icon5 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon5__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon5__title:before,\np.bfgrp-title-icon5__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon5__title:after,\np.bfgrp-title-icon5__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon5__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon5 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon5 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon5 has-text-color" style="color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon5__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon5__title"} -->
<p class="bfgrp-title-icon5__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon5","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon5","plusbfStyle":".bfgrp-title-icon5 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.25rem 1.5rem 1.5rem;\n    border-radius: 8px;\n    box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);\n}\n.bfgrp-title-icon5:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bfgrp-title-icon5 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon5__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon5__title:before,\np.bfgrp-title-icon5__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon5__title:after,\np.bfgrp-title-icon5__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon5__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon5 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon5 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon5 has-text-color" style="color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon5__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon5__title"} -->
<p class="bfgrp-title-icon5__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

アイコンver6

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon6","style":{"color":{"text":"#6c6c6c","background":"#f9f9f9"}},"plusbfClassName":"bfgrp-title-icon6","plusbfStyle":".bfgrp-title-icon6 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.5rem;\n    border-radius: 8px;\n    z-index: 0;\n}\n.bfgrp-title-icon6:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#fff 0,#fff 10px);\n    content: \u0022\u0022;\n    z-index: -1;\n}\n.bfgrp-title-icon6 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon6__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon6__title:before,\np.bfgrp-title-icon6__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon6__title:after,\np.bfgrp-title-icon6__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon6__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon6 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon6 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon6 has-text-color has-background" style="background-color:#f9f9f9;color:#6c6c6c"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon6__title","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon6__title"} -->
<p class="bfgrp-title-icon6__title has-text-color" style="color:#6c6c6c">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon6","style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}},"plusbfClassName":"bfgrp-title-icon6","plusbfStyle":".bfgrp-title-icon6 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.5rem;\n    border-radius: 8px;\n    z-index: 0;\n}\n.bfgrp-title-icon6:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#fff 0,#fff 10px);\n    content: \u0022\u0022;\n    z-index: -1;\n}\n.bfgrp-title-icon6 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon6__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon6__title:before,\np.bfgrp-title-icon6__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon6__title:after,\np.bfgrp-title-icon6__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon6__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon6 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon6 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon6 has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon6__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon6__title"} -->
<p class="bfgrp-title-icon6__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon6","style":{"color":{"text":"#76ced3","background":"#f4fbfc"}},"plusbfClassName":"bfgrp-title-icon6","plusbfStyle":".bfgrp-title-icon6 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.5rem;\n    border-radius: 8px;\n    z-index: 0;\n}\n.bfgrp-title-icon6:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#fff 0,#fff 10px);\n    content: \u0022\u0022;\n    z-index: -1;\n}\n.bfgrp-title-icon6 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon6__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon6__title:before,\np.bfgrp-title-icon6__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon6__title:after,\np.bfgrp-title-icon6__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon6__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon6 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon6 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon6 has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon6__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon6__title"} -->
<p class="bfgrp-title-icon6__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon6","style":{"color":{"text":"#ffc266","background":"#fffaf3"}},"plusbfClassName":"bfgrp-title-icon6","plusbfStyle":".bfgrp-title-icon6 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.5rem;\n    border-radius: 8px;\n    z-index: 0;\n}\n.bfgrp-title-icon6:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#fff 0,#fff 10px);\n    content: \u0022\u0022;\n    z-index: -1;\n}\n.bfgrp-title-icon6 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon6__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon6__title:before,\np.bfgrp-title-icon6__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon6__title:after,\np.bfgrp-title-icon6__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon6__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon6 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon6 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon6 has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon6__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon6__title"} -->
<p class="bfgrp-title-icon6__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon6","style":{"color":{"text":"#f28d79","background":"#fef6f4"}},"plusbfClassName":"bfgrp-title-icon6","plusbfStyle":".bfgrp-title-icon6 {\n    position: relative;\n    overflow: hidden;\n    padding: 1.5rem;\n    border-radius: 8px;\n    z-index: 0;\n}\n.bfgrp-title-icon6:before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: repeating-linear-gradient(-45deg,transparent,transparent 5px,#fff 0,#fff 10px);\n    content: \u0022\u0022;\n    z-index: -1;\n}\n.bfgrp-title-icon6 .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon6__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon6__title:before,\np.bfgrp-title-icon6__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon6__title:after,\np.bfgrp-title-icon6__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon6__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon6 *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon6 *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon6 has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon6__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon6__title"} -->
<p class="bfgrp-title-icon6__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

アイコンver7

こちらはちょっと特殊なので色は固定になってます。CSSが分かる人は変更可能です。

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon7-plusblack bfgrp-title-icon7","style":{"color":{"text":"#6c6c6c","background":"#f9f9f9"}},"plusbfClassName":"bfgrp-title-icon7-plusblack","plusbfStyle":".bfgrp-title-icon7-plusblack {\n    position: relative;\n    overflow: hidden;\n    padding: 2.5rem 1.5rem;\n}\n.wp-block-group.has-background.bfgrp-title-icon7-plusblack {\n    padding: 2.5rem 1.5rem;\n}\n.bfgrp-title-icon7-plusblack:before,\n.bfgrp-title-icon7-plusblack:after {\n    position: absolute;\n    left: 8px;\n    width: calc(100% - 14px);\n    height: 1rem;\n    background: repeating-linear-gradient(90deg,#6c6c6c 0, #6c6c6c 1px,transparent 0,transparent 7px);\n    content: \u0022\u0022;\n    opacity: .16;\n}\n.bfgrp-title-icon7-plusblack:before {\n    top: 0;\n}\n.bfgrp-title-icon7-plusblack:after {\n    top: auto!important;\n    bottom: 0!important;\n}\n.bfgrp-title-icon7-plusblack .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon7-plusblack__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon7-plusblack__title:before,\np.bfgrp-title-icon7-plusblack__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon7-plusblack__title:after,\np.bfgrp-title-icon7-plusblack__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon7-plusblack__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon7-plusblack *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon7-plusblack *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon7-plusblack bfgrp-title-icon7 has-text-color has-background" style="background-color:#f9f9f9;color:#6c6c6c"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon7-plusblack__title bfgrp-title-icon7__title","style":{"color":{"text":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-icon7-plusblack__title"} -->
<p class="bfgrp-title-icon7-plusblack__title bfgrp-title-icon7__title has-text-color" style="color:#6c6c6c">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon7-plusblue","style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}},"plusbfClassName":"bfgrp-title-icon7-plusblue","plusbfStyle":".bfgrp-title-icon7-plusblue {\n    position: relative;\n    overflow: hidden;\n    padding: 2.5rem 1.5rem;\n}\n.wp-block-group.has-background.bfgrp-title-icon7-plusblue {\n    padding: 2.5rem 1.5rem;\n}\n.bfgrp-title-icon7-plusblue:before,\n.bfgrp-title-icon7-plusblue:after {\n    position: absolute;\n    left: 8px;\n    width: calc(100% - 14px);\n    height: 1rem;\n    background: repeating-linear-gradient(90deg,#60a7d6 0, #60a7d6 1px,transparent 0,transparent 7px);\n    content: \u0022\u0022;\n    opacity: .16;\n}\n.bfgrp-title-icon7-plusblue:before {\n    top: 0;\n}\n.bfgrp-title-icon7-plusblue:after {\n    top: auto!important;\n    bottom: 0!important;\n}\n.bfgrp-title-icon7-plusblue .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon7-plusblue__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon7-plusblue__title:before,\np.bfgrp-title-icon7-plusblue__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon7-plusblue__title:after,\np.bfgrp-title-icon7-plusblue__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon7-plusblue__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon7-plusblue *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon7-plusblue *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon7-plusblue has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon7-plusblue__title","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfgrp-title-icon7-plusblue__title"} -->
<p class="bfgrp-title-icon7-plusblue__title has-text-color" style="color:#60a7d6">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon7-plusgreen","style":{"color":{"text":"#76ced3","background":"#f4fbfc"}},"plusbfClassName":"bfgrp-title-icon7-plusgreen","plusbfStyle":".bfgrp-title-icon7-plusgreen {\n    position: relative;\n    overflow: hidden;\n    padding: 2.5rem 1.5rem;\n}\n.wp-block-group.has-background.bfgrp-title-icon7-plusgreen {\n    padding: 2.5rem 1.5rem;\n}\n.bfgrp-title-icon7-plusgreen:before,\n.bfgrp-title-icon7-plusgreen:after {\n    position: absolute;\n    left: 8px;\n    width: calc(100% - 14px);\n    height: 1rem;\n    background: repeating-linear-gradient(90deg,#76ced3 0, #76ced3 1px,transparent 0,transparent 7px);\n    content: \u0022\u0022;\n    opacity: .16;\n}\n.bfgrp-title-icon7-plusgreen:before {\n    top: 0;\n}\n.bfgrp-title-icon7-plusgreen:after {\n    top: auto!important;\n    bottom: 0!important;\n}\n.bfgrp-title-icon7-plusgreen .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon7-plusgreen__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon7-plusgreen__title:before,\np.bfgrp-title-icon7-plusgreen__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon7-plusgreen__title:after,\np.bfgrp-title-icon7-plusgreen__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon7-plusgreen__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon7-plusgreen *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon7-plusgreen *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon7-plusgreen has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon7-plusgreen__title","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfgrp-title-icon7-plusgreen__title"} -->
<p class="bfgrp-title-icon7-plusgreen__title has-text-color" style="color:#76ced3">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon7-pluskiiro","style":{"color":{"text":"#ffc266","background":"#fffaf3"}},"plusbfClassName":"bfgrp-title-icon7-pluskiiro","plusbfStyle":".bfgrp-title-icon7-pluskiiro {\n    position: relative;\n    overflow: hidden;\n    padding: 2.5rem 1.5rem;\n}\n.wp-block-group.has-background.bfgrp-title-icon7-pluskiiro {\n    padding: 2.5rem 1.5rem;\n}\n.bfgrp-title-icon7-pluskiiro:before,\n.bfgrp-title-icon7-pluskiiro:after {\n    position: absolute;\n    left: 8px;\n    width: calc(100% - 14px);\n    height: 1rem;\n    background: repeating-linear-gradient(90deg,#ffc266 0, #ffc266 1px,transparent 0,transparent 7px);\n    content: \u0022\u0022;\n    opacity: .16;\n}\n.bfgrp-title-icon7-pluskiiro:before {\n    top: 0;\n}\n.bfgrp-title-icon7-pluskiiro:after {\n    top: auto!important;\n    bottom: 0!important;\n}\n.bfgrp-title-icon7-pluskiiro .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon7-pluskiiro__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon7-pluskiiro__title:before,\np.bfgrp-title-icon7-pluskiiro__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon7-pluskiiro__title:after,\np.bfgrp-title-icon7-pluskiiro__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon7-pluskiiro__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon7-pluskiiro *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon7-pluskiiro *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon7-pluskiiro has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon7-pluskiiro__title","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfgrp-title-icon7-pluskiiro__title"} -->
<p class="bfgrp-title-icon7-pluskiiro__title has-text-color" style="color:#ffc266">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-icon7-plusred","style":{"color":{"text":"#f28d79","background":"#fef6f4"}},"plusbfClassName":"bfgrp-title-icon7-plusred","plusbfStyle":".bfgrp-title-icon7-plusred {\n    position: relative;\n    overflow: hidden;\n    padding: 2.5rem 1.5rem;\n}\n.wp-block-group.has-background.bfgrp-title-icon7-plusred {\n    padding: 2.5rem 1.5rem;\n}\n.bfgrp-title-icon7-plusred:before,\n.bfgrp-title-icon7-plusred:after {\n    position: absolute;\n    left: 8px;\n    width: calc(100% - 14px);\n    height: 1rem;\n    background: repeating-linear-gradient(90deg,#f28d79 0, #f28d79 1px,transparent 0,transparent 7px);\n    content: \u0022\u0022;\n    opacity: .16;\n}\n.bfgrp-title-icon7-plusred:before {\n    top: 0;\n}\n.bfgrp-title-icon7-plusred:after {\n    top: auto!important;\n    bottom: 0!important;\n}\n.bfgrp-title-icon7-plusred .wp-block-group__inner-container {\n    color: #333;\n}\np.bfgrp-title-icon7-plusred__title {\n    position: relative;\n    margin-bottom: 1rem;\n    padding: 0 0 0 2.75rem;\n    font-weight: 600;\n}\np.bfgrp-title-icon7-plusred__title:before,\np.bfgrp-title-icon7-plusred__title:after {\n    display: inline-block;\n    left: 0;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\n.block-editor-block-list__layout p.bfgrp-title-icon7-plusred__title:after,\np.bfgrp-title-icon7-plusred__title:after {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 0;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\np.bfgrp-title-icon7-plusred__title:before {\n    position: absolute;\n    top: calc(50% - 18px);\n    z-index: 1;\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}\n.bfgrp-title-icon7-plusred *:first-child {\n    margin-top: 0;\n}\n.bfgrp-title-icon7-plusred *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-icon7-plusred has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-icon7-plusred__title","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfgrp-title-icon7-plusred__title"} -->
<p class="bfgrp-title-icon7-plusred__title has-text-color" style="color:#f28d79">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

④帯

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-band","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-title-band","plusbfStyle":".bfgrp-title-band {\n    padding: 1.5rem;\n}\np.bfgrp-title-band__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-band *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-band has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-band__title","style":{"color":{"text":"#fefefe","background":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-band__title"} -->
<p class="bfgrp-title-band__title has-text-color has-background" style="background-color:#6c6c6c;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-band","style":{"color":{"background":"#f3f8fc"}},"plusbfClassName":"bfgrp-title-band","plusbfStyle":".bfgrp-title-band {\n    padding: 1.5rem;\n}\np.bfgrp-title-band__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-band *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-band has-background" style="background-color:#f3f8fc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-band__title","style":{"color":{"background":"#60a7d6","text":"#fefefe"}},"plusbfClassName":"bfgrp-title-band__title"} -->
<p class="bfgrp-title-band__title has-text-color has-background" style="background-color:#60a7d6;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-band","style":{"color":{"background":"#f4fbfc"}},"plusbfClassName":"bfgrp-title-band","plusbfStyle":".bfgrp-title-band {\n    padding: 1.5rem;\n}\np.bfgrp-title-band__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-band *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-band has-background" style="background-color:#f4fbfc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-band__title","style":{"color":{"text":"#fefefe","background":"#76ced3"}},"plusbfClassName":"bfgrp-title-band__title"} -->
<p class="bfgrp-title-band__title has-text-color has-background" style="background-color:#76ced3;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-band","style":{"color":{"background":"#fffaf3"}},"plusbfClassName":"bfgrp-title-band","plusbfStyle":".bfgrp-title-band {\n    padding: 1.5rem;\n}\np.bfgrp-title-band__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-band *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-band has-background" style="background-color:#fffaf3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-band__title","style":{"color":{"text":"#fefefe","background":"#ffc266"}},"plusbfClassName":"bfgrp-title-band__title"} -->
<p class="bfgrp-title-band__title has-text-color has-background" style="background-color:#ffc266;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-band","style":{"color":{"background":"#fef6f4"}},"plusbfClassName":"bfgrp-title-band","plusbfStyle":".bfgrp-title-band {\n    padding: 1.5rem;\n}\np.bfgrp-title-band__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-band *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-band has-background" style="background-color:#fef6f4"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-band__title","style":{"color":{"text":"#fefefe","background":"#f28d79"}},"plusbfClassName":"bfgrp-title-band__title"} -->
<p class="bfgrp-title-band__title has-text-color has-background" style="background-color:#f28d79;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

⑤帯丸

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-bandround","style":{"color":{"background":"#f9f9f9"}},"plusbfClassName":"bfgrp-title-bandround","plusbfStyle":".bfgrp-title-bandround {\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow: hidden;\n}\np.bfgrp-title-bandround__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-bandround *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-bandround has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-bandround__title","style":{"color":{"text":"#fefefe","background":"#6c6c6c"}},"plusbfClassName":"bfgrp-title-bandround__title"} -->
<p class="bfgrp-title-bandround__title has-text-color has-background" style="background-color:#6c6c6c;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-bandround","style":{"color":{"background":"#f3f8fc"}},"plusbfClassName":"bfgrp-title-bandround","plusbfStyle":".bfgrp-title-bandround {\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow: hidden;\n}\np.bfgrp-title-bandround__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-bandround *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-bandround has-background" style="background-color:#f3f8fc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-bandround__title","style":{"color":{"background":"#60a7d6","text":"#fefefe"}},"plusbfClassName":"bfgrp-title-bandround__title"} -->
<p class="bfgrp-title-bandround__title has-text-color has-background" style="background-color:#60a7d6;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-bandround","style":{"color":{"background":"#f4fbfc"}},"plusbfClassName":"bfgrp-title-bandround","plusbfStyle":".bfgrp-title-bandround {\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow: hidden;\n}\np.bfgrp-title-bandround__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-bandround *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-bandround has-background" style="background-color:#f4fbfc"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-bandround__title","style":{"color":{"text":"#fefefe","background":"#76ced3"}},"plusbfClassName":"bfgrp-title-bandround__title"} -->
<p class="bfgrp-title-bandround__title has-text-color has-background" style="background-color:#76ced3;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-bandround","style":{"color":{"background":"#fffaf3"}},"plusbfClassName":"bfgrp-title-bandround","plusbfStyle":".bfgrp-title-bandround {\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow: hidden;\n}\np.bfgrp-title-bandround__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-bandround *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-bandround has-background" style="background-color:#fffaf3"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-bandround__title","style":{"color":{"text":"#fefefe","background":"#ffc266"}},"plusbfClassName":"bfgrp-title-bandround__title"} -->
<p class="bfgrp-title-bandround__title has-text-color has-background" style="background-color:#ffc266;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-title-bandround","style":{"color":{"background":"#fef6f4"}},"plusbfClassName":"bfgrp-title-bandround","plusbfStyle":".bfgrp-title-bandround {\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow: hidden;\n}\np.bfgrp-title-bandround__title {\n    margin: -1.5rem -1.5rem 1rem;\n    font-weight: 600;\n    padding: .5rem;\n    text-align: center;\n}\n.bfgrp-title-bandround *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-title-bandround has-background" style="background-color:#fef6f4"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"className":"bfgrp-title-bandround__title","style":{"color":{"text":"#fefefe","background":"#f28d79"}},"plusbfClassName":"bfgrp-title-bandround__title"} -->
<p class="bfgrp-title-bandround__title has-text-color has-background" style="background-color:#f28d79;color:#fefefe">サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

スペシャル

黒板

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-sp-blackboard","style":{"color":{"background":"#497e57","text":"#edd3a6"}},"plusbfClassName":"bfgrp-sp-blackboard","plusbfStyle":".bfgrp-sp-blackboard {\n    border: 16px solid;\n    padding: 1.5rem;\n    position: relative;\n    max-width: 540px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container {\n    color: #fff;\n}\n.bfgrp-sp-blackboard:before,\n.bfgrp-sp-blackboard:after ,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    display: inline-block;\n    position: absolute;\n    content: \u0022\u0022;\n}\n.bfgrp-sp-blackboard:before {\n    right: 10px;\n    bottom: 15px;\n    width: 52px;\n    height: 8px;\n    border-radius: 2px 2px 0 0;\n    background: linear-gradient(90deg, #d69f54 43%, #333333 43%, #333333 57%, #d69f54 57%);\n}\n.bfgrp-sp-blackboard:after {\n    right: 11px!important;\n    bottom: 0px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 50px;\n    height: 15px;\n    border-radius: 0 0 4px 4px;\n    background: #294988;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    right: 71px;\n    bottom: 0px;\n    width: 48px;\n    height: 8px;\n    background: white;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    right: 98px!important;\n    bottom: 8px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 48px;\n    height: 8px;\n    background: #fcd04f;\n    transform: rotate(-20deg);\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    bottom: -40px!important;\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    bottom: -48px;\n}\n.bfgrp-sp-blackboard *:first-child {\n    margin-top: 0;\n}\n.bfgrp-sp-blackboard *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-sp-blackboard has-text-color has-background" style="background-color:#497e57;color:#edd3a6"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-sp-blackboard","style":{"color":{"text":"#d8c19a","background":"#587c7d"}},"plusbfClassName":"bfgrp-sp-blackboard","plusbfStyle":".bfgrp-sp-blackboard {\n    border: 16px solid;\n    padding: 1.5rem;\n    position: relative;\n    max-width: 540px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container {\n    color: #fff;\n}\n.bfgrp-sp-blackboard:before,\n.bfgrp-sp-blackboard:after ,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    display: inline-block;\n    position: absolute;\n    content: \u0022\u0022;\n}\n.bfgrp-sp-blackboard:before {\n    right: 10px;\n    bottom: 15px;\n    width: 52px;\n    height: 8px;\n    border-radius: 2px 2px 0 0;\n    background: linear-gradient(90deg, #d69f54 43%, #333333 43%, #333333 57%, #d69f54 57%);\n}\n.bfgrp-sp-blackboard:after {\n    right: 11px!important;\n    bottom: 0px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 50px;\n    height: 15px;\n    border-radius: 0 0 4px 4px;\n    background: #294988;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    right: 71px;\n    bottom: 0px;\n    width: 48px;\n    height: 8px;\n    background: white;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    right: 98px!important;\n    bottom: 8px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 48px;\n    height: 8px;\n    background: #fcd04f;\n    transform: rotate(-20deg);\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    bottom: -40px!important;\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    bottom: -48px;\n}\n.bfgrp-sp-blackboard *:first-child {\n    margin-top: 0;\n}\n.bfgrp-sp-blackboard *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-sp-blackboard has-text-color has-background" style="background-color:#587c7d;color:#d8c19a"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-sp-blackboard","style":{"color":{"text":"#a28650","gradient":"radial-gradient(rgb(85,123,103) 0%,rgb(21,70,50) 100%)"}},"plusbfClassName":"bfgrp-sp-blackboard","plusbfStyle":".bfgrp-sp-blackboard {\n    border: 16px solid;\n    padding: 1.5rem;\n    position: relative;\n    max-width: 540px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container {\n    color: #fff;\n}\n.bfgrp-sp-blackboard:before,\n.bfgrp-sp-blackboard:after ,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before,\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    display: inline-block;\n    position: absolute;\n    content: \u0022\u0022;\n}\n.bfgrp-sp-blackboard:before {\n    right: 10px;\n    bottom: 15px;\n    width: 52px;\n    height: 8px;\n    border-radius: 2px 2px 0 0;\n    background: linear-gradient(90deg, #d69f54 43%, #333333 43%, #333333 57%, #d69f54 57%);\n}\n.bfgrp-sp-blackboard:after {\n    right: 11px!important;\n    bottom: 0px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 50px;\n    height: 15px;\n    border-radius: 0 0 4px 4px;\n    background: #294988;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    right: 71px;\n    bottom: 0px;\n    width: 48px;\n    height: 8px;\n    background: white;\n}\n.bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    right: 98px!important;\n    bottom: 8px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 48px;\n    height: 8px;\n    background: #fcd04f;\n    transform: rotate(-20deg);\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:after {\n    bottom: -40px!important;\n}\n.block-editor-block-list__layout .bfgrp-sp-blackboard .wp-block-group__inner-container:before {\n    bottom: -48px;\n}\n.bfgrp-sp-blackboard *:first-child {\n    margin-top: 0;\n}\n.bfgrp-sp-blackboard *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-sp-blackboard has-text-color has-background" style="background:radial-gradient(rgb(85,123,103) 0%,rgb(21,70,50) 100%);color:#a28650"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

対応テーマSANGO・JIN・COCOON・THE SONIC

ホワイトボード

サンプルタイトル

サンプルテキスト

タイトル
<!-- wp:group {"className":"bfgrp-sp-whiteboard","plusbfClassName":"bfgrp-sp-whiteboard","plusbfStyle":".bfgrp-sp-whiteboard {\n    position: relative;\n    padding: 1.5rem 1.5rem 2rem;\n    border: 10px solid transparent;\n    border-radius: 4px;\n    background: linear-gradient(white, white), linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 100% / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 100% / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 100% 0 / 30px 30px, linear-gradient(#4d4d4d, #4d4d4d) no-repeat 0 0 / 30px 30px, linear-gradient(#e6e6e6, #e6e6e6);\n    background-clip: padding-box, border-box, border-box, border-box, border-box, border-box;\n    background-origin: border-box;\n    max-width: 540px;\n    margin-left: auto;\n    margin-right: auto;\n}\n.bfgrp-sp-whiteboard:before,\n.bfgrp-sp-whiteboard:after ,\n.bfgrp-sp-whiteboard .wp-block-group__inner-container:before,\n.bfgrp-sp-whiteboard .wp-block-group__inner-container:after {\n    position: absolute;\n    content: \u0022\u0022;\n}\n.bfgrp-sp-whiteboard:before {\n    right: 10px;\n    bottom: 15px;\n    width: 52px;\n    height: 8px;\n    border-radius: 2px 2px 0 0;\n    background: #5a95f5;\n}\n.bfgrp-sp-whiteboard:after {\n    right: 11px!important;\n    bottom: 0px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 50px;\n    height: 15px;\n    border-radius: 0 0 4px 4px;\n    background: #d2e2fc;\n}\n.bfgrp-sp-whiteboard .wp-block-group__inner-container:before {\n    right: 71px;\n    bottom: 0;\n    width: 48px;\n    height: 8px;\n    background: linear-gradient(90deg, #ea4335 8%, #f2f2f2 8%, #f2f2f2 70%, #ea4335 70%);\n}\n.bfgrp-sp-whiteboard .wp-block-group__inner-container:after {\n    right: 98px!important;\n    bottom: 8px!important;\n    top: auto!important;\n    left: auto!important;\n    width: 48px;\n    height: 8px;\n    background: linear-gradient(90deg, #333 8%, #f2f2f2 calc(8% + 1px), #f2f2f2 70%, #333 calc(70% + 1px));\n    transform: rotate(-20deg);\n}\n.block-editor-block-list__layout .bfgrp-sp-whiteboard .wp-block-group__inner-container:after {\n    bottom: -40px!important;\n}\n.block-editor-block-list__layout .bfgrp-sp-whiteboard .wp-block-group__inner-container:before {\n    bottom: -48px;\n}\n.bfgrp-sp-blackboard *:first-child {\n    margin-top: 0;\n}\n.bfgrp-sp-blackboard *:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n}"} -->
<div class="wp-block-group bfgrp-sp-whiteboard"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p>サンプルタイトル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サンプルテキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

サンプルタイトル

サンプルテキスト

タイトル

サンプルタイトル

サンプルテキスト

タイトル

対応テーマSANGO・JIN・COCOON・THE SONIC