段落ブロック：まとめ

このページではブロックエディタの「段落ブロック」をカスタマイズしたデザインを紹介します。

men

段落ブロックは全ブロックのなかでも一番良く使うブロックです。好きなデザインを選んで使って見てください♪

使い方！

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

このページのもくじ

ラベル

①シンプル

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-simple","plusbfClassName":"bfp-label-simple","plusbfStyle":"p.bfp-label-simple {\n    width: fit-content;\n    background-color: #eee;\n    padding: 4px 8px;\n    margin-bottom: 4px;\n}\np.has-text-align-center.bfp-label-simple {\n    margin-left: auto;\n    margin-right: auto;\n}\np.bfp-label-simple.has-text-align-center.wp-block {\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-simple {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-simple">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-simple-c1","plusbfClassName":"bfp-label-simple-c1","plusbfStyle":"p.bfp-label-simple-c1 {\n    width: fit-content;\n    background-color: #f3f8fc;\n    padding: 4px 8px;\n    margin-bottom: 4px;\n    color: #60a7d6;\n}\np.has-text-align-center.bfp-label-simple-c1 {\n    margin-left: auto;\n    margin-right: auto;\n}\np.bfp-label-simple-c1.has-text-align-center.wp-block {\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-simple-c1 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-simple-c1">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-simple-c2","plusbfClassName":"bfp-label-simple-c2","plusbfStyle":"p.bfp-label-simple-c2 {\n    width: fit-content;\n    background-color: #f4fbfc;\n    padding: 4px 8px;\n    margin-bottom: 4px;\n    color: #76ced3;\n}\np.has-text-align-center.bfp-label-simple-c2 {\n    margin-left: auto;\n    margin-right: auto;\n}\np.bfp-label-simple-c2.has-text-align-center.wp-block {\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-simple-c2 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-simple-c2">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-simple-c3","plusbfClassName":"bfp-label-simple-c3","plusbfStyle":"p.bfp-label-simple-c3 {\n    width: fit-content;\n    background-color: #fffaf3;\n    padding: 4px 8px;\n    margin-bottom: 4px;\n    color: #ffc266;\n}\np.has-text-align-center.bfp-label-simple-c3 {\n    margin-left: auto;\n    margin-right: auto;\n}\np.bfp-label-simple-c3.has-text-align-center.wp-block {\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-simple-c3 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-simple-c3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-simple-c4","plusbfClassName":"bfp-label-simple-c4","plusbfStyle":"p.bfp-label-simple-c4 {\n    width: fit-content;\n    background-color: #fef6f4;\n    padding: 4px 8px;\n    margin-bottom: 4px;\n    color: #f28d79;\n}\np.has-text-align-center.bfp-label-simple-c4 {\n    margin-left: auto;\n    margin-right: auto;\n}\np.bfp-label-simple-c4.has-text-align-center.wp-block {\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-simple-c4 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-simple-c4">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

②アウトライン

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outline","plusbfClassName":"bfp-label-outline","plusbfStyle":"p.bfp-label-outline {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 1px solid;\n    color: #333;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outline {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outline {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outline">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outline-c1","plusbfClassName":"bfp-label-outline-c1","plusbfStyle":"p.bfp-label-outline-c1 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 1px solid;\n    color: #60a7d6;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outline-c1 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outline-c1 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outline-c1">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outline-c2","plusbfClassName":"bfp-label-outline-c2","plusbfStyle":"p.bfp-label-outline-c2 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 1px solid;\n    color: #76ced3;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outline-c2 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outline-c2 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outline-c2">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outline-c3","plusbfClassName":"bfp-label-outline-c3","plusbfStyle":"p.bfp-label-outline-c3 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 1px solid;\n    color: #ffc366;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outline-c3 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outline-c3 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outline-c3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outline-c4","plusbfClassName":"bfp-label-outline-c4","plusbfStyle":"p.bfp-label-outline-c4 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 1px solid;\n    color: #f28d79;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outline-c4 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outline-c4 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outline-c4">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

③二重線

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outlinedouble","plusbfClassName":"bfp-label-outlinedouble","plusbfStyle":"p.bfp-label-outlinedouble {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 3px double;\n    color: #333;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outlinedouble {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outlinedouble {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outlinedouble">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outlinedouble-c1","plusbfClassName":"bfp-label-outlinedouble-c1","plusbfStyle":"p.bfp-label-outlinedouble-c1 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 3px double;\n    color: #60a7d6;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outlinedouble-c1 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outlinedouble-c1 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outlinedouble-c1">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outlinedouble-c2","plusbfClassName":"bfp-label-outlinedouble-c2","plusbfStyle":"p.bfp-label-outlinedouble-c2 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 3px double;\n    color: #76ced3;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outlinedouble-c2 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outlinedouble-c2 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outlinedouble-c2">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outlinedouble-c3","plusbfClassName":"bfp-label-outlinedouble-c3","plusbfStyle":"p.bfp-label-outlinedouble-c3 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 3px double;\n    color: #ffc366;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outlinedouble-c3 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outlinedouble-c3 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outlinedouble-c3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-outlinedouble-c4","plusbfClassName":"bfp-label-outlinedouble-c4","plusbfStyle":"p.bfp-label-outlinedouble-c4 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 8px;\n    border: 3px double;\n    color: #f28d79;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-outlinedouble-c4 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-outlinedouble-c4 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-outlinedouble-c4">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

④丸

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-round","plusbfClassName":"bfp-label-round","plusbfStyle":"p.bfp-label-round {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    box-sizing: border-box;\n    background: #eee;\n}\np.has-text-align-center.bfp-label-round {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-round {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-round">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-round-c1","plusbfClassName":"bfp-label-round-c1","plusbfStyle":"p.bfp-label-round-c1 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #60a7d6;\n    background: #f3f8fc;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-round-c1 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-round-c1 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-round-c1">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-round-c2","plusbfClassName":"bfp-label-round-c2","plusbfStyle":"p.bfp-label-round-c2 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #76ced3;\n    background: #f4fbfc;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-round-c2 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-round-c2 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-round-c2">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-round-c3","plusbfClassName":"bfp-label-round-c3","plusbfStyle":"p.bfp-label-round-c3 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #ffc266;\n    background: #fffaf3;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-round-c3 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-round-c3 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-round-c3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-round-c4","plusbfClassName":"bfp-label-round-c4","plusbfStyle":"p.bfp-label-round-c4 {\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #f28d79;\n    background: #fef6f4;\n    box-sizing: border-box;\n}\np.has-text-align-center.bfp-label-round-c4 {\n    margin-right: auto;\n    margin-left: auto;\n}\n.editor-styles-wrapper p.bfp-label-round-c4 {\n    padding: 4px 8px;\n}"} -->
<p class="bfp-label-round-c4">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

⑤吹き出し

サンプルテキスト

タイトル

<!-- wp:paragraph {"align":"left","className":"bfp-label-bubble","plusbfClassName":"bfp-label-bubble","plusbfStyle":"p.bfp-label-bubble {\n    position: relative;\n    z-index: 0;\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    background: #eee;\n    box-sizing: border-box;\n}\np.bfp-label-bubble:before {\n    display: inline-block;\n    position: absolute;\n    bottom: -6px;\n    left: 40px;\n    z-index: -1;\n    width: 14px;\n    height: 14px;\n    background: inherit;\n    content: \u0022\u0022;\n    transform: rotate(45deg);\n}\np.has-text-align-center.bfp-label-bubble:before {\n    left: calc(50% - 9.9px);\n}\np.has-text-align-center.bfp-label-bubble {\n    margin-right: auto;\n    margin-left: auto;\n}"} -->
<p class="has-text-align-left bfp-label-bubble">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-bubble-c1","plusbfClassName":"bfp-label-bubble-c1","plusbfStyle":"p.bfp-label-bubble-c1 {\n    position: relative;\n    z-index: 0;\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #60a7d6;\n    background: #f3f8fc;\n    box-sizing: border-box;\n}\np.bfp-label-bubble-c1:before {\n    display: inline-block;\n    position: absolute;\n    bottom: -6px;\n    left: 40px;\n    z-index: -1;\n    width: 14px;\n    height: 14px;\n    background: inherit;\n    content: \u0022\u0022;\n    transform: rotate(45deg);\n}\np.has-text-align-center.bfp-label-bubble-c1:before {\n    left: calc(50% - 9.9px);\n}\np.has-text-align-center.bfp-label-bubble-c1 {\n    margin-right: auto;\n    margin-left: auto;\n}"} -->
<p class="bfp-label-bubble-c1">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-bubble-c2","plusbfClassName":"bfp-label-bubble-c2","plusbfStyle":"p.bfp-label-bubble-c2 {\n    position: relative;\n    z-index: 0;\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #76ced3;\n    background: #f4fbfc;\n    box-sizing: border-box;\n}\np.bfp-label-bubble-c2:before {\n    display: inline-block;\n    position: absolute;\n    bottom: -6px;\n    left: 40px;\n    z-index: -1;\n    width: 14px;\n    height: 14px;\n    background: inherit;\n    content: \u0022\u0022;\n    transform: rotate(45deg);\n}\np.has-text-align-center.bfp-label-bubble-c2:before {\n    left: calc(50% - 9.9px);\n}\np.has-text-align-center.bfp-label-bubble-c2 {\n    margin-right: auto;\n    margin-left: auto;\n}"} -->
<p class="bfp-label-bubble-c2">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-bubble-c3","plusbfClassName":"bfp-label-bubble-c3","plusbfStyle":"p.bfp-label-bubble-c3 {\n    position: relative;\n    z-index: 0;\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #ffc266;\n    background: #fffaf3;\n    box-sizing: border-box;\n}\np.bfp-label-bubble-c3:before {\n    display: inline-block;\n    position: absolute;\n    bottom: -6px;\n    left: 40px;\n    z-index: -1;\n    width: 14px;\n    height: 14px;\n    background: inherit;\n    content: \u0022\u0022;\n    transform: rotate(45deg);\n}\np.has-text-align-center.bfp-label-bubble-c3:before {\n    left: calc(50% - 9.9px);\n}\np.has-text-align-center.bfp-label-bubble-c3 {\n    margin-right: auto;\n    margin-left: auto;\n}"} -->
<p class="bfp-label-bubble-c3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-label-bubble-c4","plusbfClassName":"bfp-label-bubble-c4","plusbfStyle":"p.bfp-label-bubble-c4 {\n    position: relative;\n    z-index: 0;\n    width: fit-content;\n    margin-bottom: 4px;\n    padding: 4px 16px;\n    border-radius: 40px;\n    color: #f28d79;\n    background: #fef6f4;\n    box-sizing: border-box;\n}\np.bfp-label-bubble-c4:before {\n    display: inline-block;\n    position: absolute;\n    bottom: -6px;\n    left: 40px;\n    z-index: -1;\n    width: 14px;\n    height: 14px;\n    background: inherit;\n    content: \u0022\u0022;\n    transform: rotate(45deg);\n}\np.has-text-align-center.bfp-label-bubble-c4:before {\n    left: calc(50% - 9.9px);\n}\np.has-text-align-center.bfp-label-bubble-c4 {\n    margin-right: auto;\n    margin-left: auto;\n}"} -->
<p class="bfp-label-bubble-c4">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

タイトル

①下線

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under","fontSize":"medium","plusbfClassName":"bfp-title-under","plusbfStyle":"p.bfp-title-under {\n    position: relative;\n    padding: 0.5rem 0;\n}\n.bfp-title-under:before {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    border-radius: 2px;\n    background-color: currentColor;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under has-medium-font-size"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under","fontSize":"medium","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-title-under","plusbfStyle":"p.bfp-title-under {\n    position: relative;\n    padding: 0.5rem 0;\n}\n.bfp-title-under:before {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    border-radius: 2px;\n    background-color: currentColor;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under has-text-color has-medium-font-size" style="color:#60a7d6"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under","fontSize":"medium","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-title-under","plusbfStyle":"p.bfp-title-under {\n    position: relative;\n    padding: 0.5rem 0;\n}\n.bfp-title-under:before {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    border-radius: 2px;\n    background-color: currentColor;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under has-text-color has-medium-font-size" style="color:#76ced3"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under","fontSize":"medium","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-title-under","plusbfStyle":"p.bfp-title-under {\n    position: relative;\n    padding: 0.5rem 0;\n}\n.bfp-title-under:before {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    border-radius: 2px;\n    background-color: currentColor;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under has-text-color has-medium-font-size" style="color:#ffc266"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under","fontSize":"medium","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-title-under","plusbfStyle":"p.bfp-title-under {\n    position: relative;\n    padding: 0.5rem 0;\n}\n.bfp-title-under:before {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    border-radius: 2px;\n    background-color: currentColor;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under has-text-color has-medium-font-size" style="color:#f28d79"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

②下線ストライプ

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-understripe","fontSize":"medium","plusbfClassName":"bfp-title-understripe","plusbfStyle":"p.bfp-title-understripe {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-understripe:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);\n    background-size: 5px 5px;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-understripe has-medium-font-size"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-understripe","fontSize":"medium","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-title-understripe","plusbfStyle":"p.bfp-title-understripe {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-understripe:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);\n    background-size: 5px 5px;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-understripe has-text-color has-medium-font-size" style="color:#60a7d6"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-understripe","fontSize":"medium","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-title-understripe","plusbfStyle":"p.bfp-title-understripe {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-understripe:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);\n    background-size: 5px 5px;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-understripe has-text-color has-medium-font-size" style="color:#76ced3"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-understripe","fontSize":"medium","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-title-understripe","plusbfStyle":"p.bfp-title-understripe {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-understripe:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);\n    background-size: 5px 5px;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-understripe has-text-color has-medium-font-size" style="color:#ffc266"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-understripe","fontSize":"medium","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-title-understripe","plusbfStyle":"p.bfp-title-understripe {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-understripe:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent);\n    background-size: 5px 5px;\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-understripe has-text-color has-medium-font-size" style="color:#f28d79"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

③下線グラデ

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-undergradation","fontSize":"medium","plusbfClassName":"bfp-title-undergradation","plusbfStyle":"p.bfp-title-undergradation {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-undergradation:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-90deg, #fff, transparent);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-undergradation has-medium-font-size"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-undergradation","fontSize":"medium","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-title-undergradation","plusbfStyle":"p.bfp-title-undergradation {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-undergradation:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-90deg, #fff, transparent);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-undergradation has-text-color has-medium-font-size" style="color:#60a7d6"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-undergradation","fontSize":"medium","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-title-undergradation","plusbfStyle":"p.bfp-title-undergradation {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-undergradation:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-90deg, #fff, transparent);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-undergradation has-text-color has-medium-font-size" style="color:#76ced3"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-undergradation","fontSize":"medium","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-title-undergradation","plusbfStyle":"p.bfp-title-undergradation {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-undergradation:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-90deg, #fff, transparent);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-undergradation has-text-color has-medium-font-size" style="color:#ffc266"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-undergradation","fontSize":"medium","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-title-undergradation","plusbfStyle":"p.bfp-title-undergradation {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-undergradation:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(-90deg, #fff, transparent);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-undergradation has-text-color has-medium-font-size" style="color:#f28d79"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

④下線2色

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under2color","fontSize":"medium","plusbfClassName":"bfp-title-under2color","plusbfStyle":"p.bfp-title-under2color {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-under2color:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(90deg, transparent 10%, rgba(255 255 255 / 54%) 10%);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under2color has-medium-font-size"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under2color","fontSize":"medium","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-title-under2color","plusbfStyle":"p.bfp-title-under2color {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-under2color:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(90deg, transparent 10%, rgba(255 255 255 / 54%) 10%);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under2color has-text-color has-medium-font-size" style="color:#60a7d6"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under2color","fontSize":"medium","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-title-under2color","plusbfStyle":"p.bfp-title-under2color {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-under2color:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(90deg, transparent 10%, rgba(255 255 255 / 54%) 10%);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under2color has-text-color has-medium-font-size" style="color:#76ced3"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under2color","fontSize":"medium","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-title-under2color","plusbfStyle":"p.bfp-title-under2color {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-under2color:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(90deg, transparent 10%, rgba(255 255 255 / 54%) 10%);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under2color has-text-color has-medium-font-size" style="color:#ffc266"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-under2color","fontSize":"medium","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-title-under2color","plusbfStyle":"p.bfp-title-under2color {\n    position: relative;\n    padding: 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-under2color:before {\n    position: absolute;\n    bottom: -4px;\n    left: 0;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(90deg, transparent 10%, rgba(255 255 255 / 54%) 10%);\n    content: \u0022\u0022;\n}"} -->
<p class="bfp-title-under2color has-text-color has-medium-font-size" style="color:#f28d79"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

⑤下線矢印

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-underarrow","fontSize":"medium","plusbfClassName":"bfp-title-underarrow","plusbfStyle":"p.bfp-title-underarrow {\n    position: relative;\n    margin-right: 1rem;\n    padding: 0.5rem 1rem 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-underarrow:before {\n    position: absolute;\n    right: -1rem;\n    bottom: -4px;\n    border-width: 1.25rem 0 0 2rem;\n    border-style: solid;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}"} -->
<p class="bfp-title-underarrow has-medium-font-size"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-underarrow","fontSize":"medium","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-title-underarrow","plusbfStyle":"p.bfp-title-underarrow {\n    position: relative;\n    margin-right: 1rem;\n    padding: 0.5rem 1rem 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-underarrow:before {\n    position: absolute;\n    right: -1rem;\n    bottom: -4px;\n    border-width: 1.25rem 0 0 2rem;\n    border-style: solid;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}"} -->
<p class="bfp-title-underarrow has-text-color has-medium-font-size" style="color:#60a7d6"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-underarrow","fontSize":"medium","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-title-underarrow","plusbfStyle":"p.bfp-title-underarrow {\n    position: relative;\n    margin-right: 1rem;\n    padding: 0.5rem 1rem 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-underarrow:before {\n    position: absolute;\n    right: -1rem;\n    bottom: -4px;\n    border-width: 1.25rem 0 0 2rem;\n    border-style: solid;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}"} -->
<p class="bfp-title-underarrow has-text-color has-medium-font-size" style="color:#76ced3"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-underarrow","fontSize":"medium","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-title-underarrow","plusbfStyle":"p.bfp-title-underarrow {\n    position: relative;\n    margin-right: 1rem;\n    padding: 0.5rem 1rem 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-underarrow:before {\n    position: absolute;\n    right: -1rem;\n    bottom: -4px;\n    border-width: 1.25rem 0 0 2rem;\n    border-style: solid;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}"} -->
<p class="bfp-title-underarrow has-text-color has-medium-font-size" style="color:#ffc266"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-title-underarrow","fontSize":"medium","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-title-underarrow","plusbfStyle":"p.bfp-title-underarrow {\n    position: relative;\n    margin-right: 1rem;\n    padding: 0.5rem 1rem 0.5rem 0;\n    border-bottom: 4px solid;\n}\n.bfp-title-underarrow:before {\n    position: absolute;\n    right: -1rem;\n    bottom: -4px;\n    border-width: 1.25rem 0 0 2rem;\n    border-style: solid;\n    border-top-color: transparent;\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}"} -->
<p class="bfp-title-underarrow has-text-color has-medium-font-size" style="color:#f28d79"><strong>サンプルテキスト</strong></p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

ボックス

①アイコンver1

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon1-pen","style":{"color":{"background":"#eeeeee"}},"plusbfClassName":"bfp-box-icon1-pen","plusbfStyle":"p.bfp-box-icon1-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n}\np.bfp-box-icon1-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon1-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon1-pen has-background" style="background-color:#eeeeee">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon1-pen","style":{"color":{"background":"#f3f8fc","text":"#60a7d6"}},"plusbfClassName":"bfp-box-icon1-pen","plusbfStyle":"p.bfp-box-icon1-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n}\np.bfp-box-icon1-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon1-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon1-pen has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon1-pen","style":{"color":{"background":"#f4fbfc","text":"#76ced3"}},"plusbfClassName":"bfp-box-icon1-pen","plusbfStyle":"p.bfp-box-icon1-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n}\np.bfp-box-icon1-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon1-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon1-pen has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon1-pen","style":{"color":{"background":"#fffaf3","text":"#ffc266"}},"plusbfClassName":"bfp-box-icon1-pen","plusbfStyle":"p.bfp-box-icon1-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n}\np.bfp-box-icon1-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon1-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon1-pen has-text-color has-background" style="background-color:#fffaf3;color:#ffc266">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon1-pen","style":{"color":{"background":"#fef6f4","text":"#f28d79"}},"plusbfClassName":"bfp-box-icon1-pen","plusbfStyle":"p.bfp-box-icon1-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n}\np.bfp-box-icon1-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon1-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon1-pen:after,\np.bfp-box-icon1-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon1-pen has-text-color has-background" style="background-color:#fef6f4;color:#f28d79">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

②アイコンver2

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon2-pen","plusbfClassName":"bfp-box-icon2-pen","plusbfStyle":"p.bfp-box-icon2-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n    border: 2px solid;\n}\np.bfp-box-icon2-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon2-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon2-pen">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon2-pen","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-box-icon2-pen","plusbfStyle":"p.bfp-box-icon2-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n    border: 2px solid;\n}\np.bfp-box-icon2-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon2-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon2-pen has-text-color" style="color:#60a7d6">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon2-pen","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-box-icon2-pen","plusbfStyle":"p.bfp-box-icon2-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n    border: 2px solid;\n}\np.bfp-box-icon2-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon2-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon2-pen has-text-color" style="color:#76ced3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon2-pen","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-box-icon2-pen","plusbfStyle":"p.bfp-box-icon2-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n    border: 2px solid;\n}\np.bfp-box-icon2-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon2-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon2-pen has-text-color" style="color:#ffc266">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon2-pen","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-box-icon2-pen","plusbfStyle":"p.bfp-box-icon2-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border-radius: 4px;\n    border: 2px solid;\n}\np.bfp-box-icon2-pen:before,\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon2-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon2-pen:after,\np.bfp-box-icon2-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon2-pen has-text-color" style="color:#f28d79">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

③アイコンver3

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon3-pen","style":{"color":{"background":"#eeeeee"}},"plusbfClassName":"bfp-box-icon3-pen","plusbfStyle":"p.bfp-box-icon3-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n}\np.bfp-box-icon3-pen:before,\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    width: 3rem;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon3-pen:before {\n    border-right: 1px dashed;\n    content: \u0022\u0022;\n}\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon3-pen has-background" style="background-color:#eeeeee">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon3-pen","style":{"color":{"background":"#f3f8fc","text":"#60a7d6"}},"plusbfClassName":"bfp-box-icon3-pen","plusbfStyle":"p.bfp-box-icon3-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n}\np.bfp-box-icon3-pen:before,\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    width: 3rem;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon3-pen:before {\n    border-right: 1px dashed;\n    content: \u0022\u0022;\n}\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon3-pen has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon3-pen","style":{"color":{"background":"#f4fbfc","text":"#76ced3"}},"plusbfClassName":"bfp-box-icon3-pen","plusbfStyle":"p.bfp-box-icon3-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n}\np.bfp-box-icon3-pen:before,\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    width: 3rem;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon3-pen:before {\n    border-right: 1px dashed;\n    content: \u0022\u0022;\n}\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon3-pen has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon3-pen","style":{"color":{"background":"#fffaf3","text":"#ffc266"}},"plusbfClassName":"bfp-box-icon3-pen","plusbfStyle":"p.bfp-box-icon3-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n}\np.bfp-box-icon3-pen:before,\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    width: 3rem;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon3-pen:before {\n    border-right: 1px dashed;\n    content: \u0022\u0022;\n}\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon3-pen has-text-color has-background" style="background-color:#fffaf3;color:#ffc266">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon3-pen","style":{"color":{"background":"#fef6f4","text":"#f28d79"}},"plusbfClassName":"bfp-box-icon3-pen","plusbfStyle":"p.bfp-box-icon3-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n}\np.bfp-box-icon3-pen:before,\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 0;\n    width: 3rem;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon3-pen:before {\n    border-right: 1px dashed;\n    content: \u0022\u0022;\n}\np.bfp-box-icon3-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon3-pen:after {\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon3-pen has-text-color has-background" style="background-color:#fef6f4;color:#f28d79">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

④アイコンver4

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon4-pen","plusbfClassName":"bfp-box-icon4-pen","plusbfStyle":"p.bfp-box-icon4-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border: 1px solid;\n    border-radius: 8px;\n    box-shadow: 0.25rem 0.25rem 0 0;\n}\np.bfp-box-icon4-pen:before,\n.bfp-box-icon4-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon4-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after,\np.bfp-box-icon4-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon4-pen">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon4-pen","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-box-icon4-pen","plusbfStyle":"p.bfp-box-icon4-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border: 1px solid;\n    border-radius: 8px;\n    box-shadow: 0.25rem 0.25rem 0 0;\n}\np.bfp-box-icon4-pen:before,\n.bfp-box-icon4-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon4-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after,\np.bfp-box-icon4-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon4-pen has-text-color" style="color:#60a7d6">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon4-pen","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-box-icon4-pen","plusbfStyle":"p.bfp-box-icon4-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border: 1px solid;\n    border-radius: 8px;\n    box-shadow: 0.25rem 0.25rem 0 0;\n}\np.bfp-box-icon4-pen:before,\n.bfp-box-icon4-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon4-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after,\np.bfp-box-icon4-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon4-pen has-text-color" style="color:#76ced3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon4-pen","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-box-icon4-pen","plusbfStyle":"p.bfp-box-icon4-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border: 1px solid;\n    border-radius: 8px;\n    box-shadow: 0.25rem 0.25rem 0 0;\n}\np.bfp-box-icon4-pen:before,\n.bfp-box-icon4-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon4-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after,\np.bfp-box-icon4-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon4-pen has-text-color" style="color:#ffc266">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon4-pen","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-box-icon4-pen","plusbfStyle":"p.bfp-box-icon4-pen {\n    position: relative;\n    padding: 1rem 1.5rem 1rem 4rem;\n    border: 1px solid;\n    border-radius: 8px;\n    box-shadow: 0.25rem 0.25rem 0 0;\n}\np.bfp-box-icon4-pen:before,\n.bfp-box-icon4-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 18px);\n    left: 1rem;\n    width: 36px;\n    height: 36px;\n    line-height: 36px;\n}\np.bfp-box-icon4-pen:before {\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.block-editor-block-list__layout p.bfp-box-icon4-pen:after,\np.bfp-box-icon4-pen:after {\n    color: #fff;\n    font-family: font awesome\\ 5 free;\n    font-weight: 600;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon4-pen has-text-color" style="color:#f28d79">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC

⑤アイコンver5

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon5-pen","plusbfClassName":"bfp-box-icon5-pen","plusbfStyle":"p.bfp-box-icon5-pen {\n    position: relative;\n    padding: 1.75rem 1.5rem 1.5rem;\n    border: 2px solid;\n}\np.bfp-box-icon5-pen:before,\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: -22px;\n    left: 1.5rem;\n    width: 44px;\n}\np.bfp-box-icon5-pen:before {\n    height: 44px;\n    border: 20px solid;\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px #fff;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    line-height: 44px;\n    color: #fff;\n    font-family: \u0022Font Awesome 5 Free\u0022;\n    font-weight: 600;\n    font-size: 1.25em;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon5-pen">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon5-pen","style":{"color":{"text":"#60a7d6"}},"plusbfClassName":"bfp-box-icon5-pen","plusbfStyle":"p.bfp-box-icon5-pen {\n    position: relative;\n    margin-top: 1em;\n    padding: 1.75rem 1.5rem 1.5rem;\n    border: 2px solid;\n}\np.bfp-box-icon5-pen:before,\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: -22px;\n    left: 1.5rem;\n    width: 44px;\n}\np.bfp-box-icon5-pen:before {\n    height: 44px;\n    border: 20px solid;\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px #fff;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    line-height: 44px;\n    color: #fff;\n    font-family: \u0022Font Awesome 5 Free\u0022;\n    font-weight: 600;\n    font-size: 1.25em;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon5-pen has-text-color" style="color:#60a7d6">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon5-pen","style":{"color":{"text":"#76ced3"}},"plusbfClassName":"bfp-box-icon5-pen","plusbfStyle":"p.bfp-box-icon5-pen {\n    position: relative;\n    margin-top: 1em;\n    padding: 1.75rem 1.5rem 1.5rem;\n    border: 2px solid;\n}\np.bfp-box-icon5-pen:before,\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: -22px;\n    left: 1.5rem;\n    width: 44px;\n}\np.bfp-box-icon5-pen:before {\n    height: 44px;\n    border: 20px solid;\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px #fff;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    line-height: 44px;\n    color: #fff;\n    font-family: \u0022Font Awesome 5 Free\u0022;\n    font-weight: 600;\n    font-size: 1.25em;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon5-pen has-text-color" style="color:#76ced3">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon5-pen","style":{"color":{"text":"#ffc266"}},"plusbfClassName":"bfp-box-icon5-pen","plusbfStyle":"p.bfp-box-icon5-pen {\n    position: relative;\n    margin-top: 1em;\n    padding: 1.75rem 1.5rem 1.5rem;\n    border: 2px solid;\n}\np.bfp-box-icon5-pen:before,\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: -22px;\n    left: 1.5rem;\n    width: 44px;\n}\np.bfp-box-icon5-pen:before {\n    height: 44px;\n    border: 20px solid;\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px #fff;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    line-height: 44px;\n    color: #fff;\n    font-family: \u0022Font Awesome 5 Free\u0022;\n    font-weight: 600;\n    font-size: 1.25em;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon5-pen has-text-color" style="color:#ffc266">サンプルテキスト</p>
<!-- /wp:paragraph -->

サンプルテキスト

タイトル

<!-- wp:paragraph {"className":"bfp-box-icon5-pen","style":{"color":{"text":"#f28d79"}},"plusbfClassName":"bfp-box-icon5-pen","plusbfStyle":"p.bfp-box-icon5-pen {\n    position: relative;\n    margin-top: 1em;\n    padding: 1.75rem 1.5rem 1.5rem;\n    border: 2px solid;\n}\np.bfp-box-icon5-pen:before,\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    display: inline-block;\n    position: absolute;\n    top: -22px;\n    left: 1.5rem;\n    width: 44px;\n}\np.bfp-box-icon5-pen:before {\n    height: 44px;\n    border: 20px solid;\n    border-radius: 50%;\n    box-shadow: 0 0 0 4px #fff;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\np.bfp-box-icon5-pen:after,\n.block-editor-block-list__layout p.bfp-box-icon5-pen:after {\n    line-height: 44px;\n    color: #fff;\n    font-family: \u0022Font Awesome 5 Free\u0022;\n    font-weight: 600;\n    font-size: 1.25em;\n    text-align: center;\n    content: \u0022\\f304\u0022;\n}"} -->
<p class="bfp-box-icon5-pen has-text-color" style="color:#f28d79">サンプルテキスト</p>
<!-- /wp:paragraph -->

対応テーマ

SANGO・JIN・COCOON・THE SONIC