使い方！
- 専用プラグインをインストールして有効化
コピーボタンをクリック- 「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
アイコンやカラーを変更した約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
アイコンやカラーを変更したパターンを別のページにまとめておきました。
アイコン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 |