リストブロック:まとめ

953 views

使い方!

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

ノーマル

①アイコンver1

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:list {"className":"bflist-icon-chevron","plusbfClassName":"bflist-icon-chevron","plusbfStyle":"ul.bflist-icon-chevron {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.bflist-icon-chevron li {\n    display: flex;\n    position: relative;\n    margin: 4px 0;\n    padding-left: 25px;\n    align-items: center;\n}\n.bflist-icon-chevron li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    content: \u0022\\f138\u0022;\n}\n.has-background .bflist-icon-chevron {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-chevron,\nul.bflist-icon-chevron {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-chevron li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-chevron"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ul>
<!-- /wp:list -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-chevron","plusbfClassName":"bflist-icon-chevron","plusbfStyle":"ul.bflist-icon-chevron {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.bflist-icon-chevron li {\n    display: flex;\n    position: relative;\n    margin: 4px 0;\n    padding-left: 25px;\n    align-items: center;\n}\n.bflist-icon-chevron li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    content: \u0022\\f138\u0022;\n}\n.has-background .bflist-icon-chevron {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-chevron,\nul.bflist-icon-chevron {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-chevron li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-chevron"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-chevron","plusbfClassName":"bflist-icon-chevron","plusbfStyle":"ul.bflist-icon-chevron {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.bflist-icon-chevron li {\n    display: flex;\n    position: relative;\n    margin: 4px 0;\n    padding-left: 25px;\n    align-items: center;\n}\n.bflist-icon-chevron li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    content: \u0022\\f138\u0022;\n}\n.has-background .bflist-icon-chevron {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-chevron,\nul.bflist-icon-chevron {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-chevron li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-chevron"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-chevron","plusbfClassName":"bflist-icon-chevron","plusbfStyle":"ul.bflist-icon-chevron {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.bflist-icon-chevron li {\n    display: flex;\n    position: relative;\n    margin: 4px 0;\n    padding-left: 25px;\n    align-items: center;\n}\n.bflist-icon-chevron li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    content: \u0022\\f138\u0022;\n}\n.has-background .bflist-icon-chevron {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-chevron,\nul.bflist-icon-chevron {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-chevron li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-chevron"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-chevron","plusbfClassName":"bflist-icon-chevron","plusbfStyle":"ul.bflist-icon-chevron {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.bflist-icon-chevron li {\n    display: flex;\n    position: relative;\n    margin: 4px 0;\n    padding-left: 25px;\n    align-items: center;\n}\n.bflist-icon-chevron li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    content: \u0022\\f138\u0022;\n}\n.has-background .bflist-icon-chevron {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-chevron,\nul.bflist-icon-chevron {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-chevron li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-chevron"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

②アイコンver2

  • サンプルテキストサンプルテキストサンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:list {"className":"bflist-icon-angle-right","plusbfClassName":"bflist-icon-angle-right","plusbfStyle":"ul.bflist-icon-angle-right {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li,\nul.bflist-icon-angle-right li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-icon-angle-right li:before,\n.bflist-icon-angle-right li:after {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0.25rem;\n    width: 1rem;\n    height: 1rem;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n}\n.bflist-icon-angle-right li:before {\n    z-index: 1;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 0.75rem;\n    content: \u0022\\f105\u0022;\n}\n.bflist-icon-angle-right li:after {\n    z-index: 0;\n    background: currentColor;\n    opacity: 0.2;\n    content: \u0022\u0022;\n}\n.has-background .bflist-icon-angle-right {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-angle-right,\nul.bflist-icon-angle-right {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-angle-right"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-angle-right","plusbfClassName":"bflist-icon-angle-right","plusbfStyle":"ul.bflist-icon-angle-right {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li,\nul.bflist-icon-angle-right li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-icon-angle-right li:before,\n.bflist-icon-angle-right li:after {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0.25rem;\n    width: 1rem;\n    height: 1rem;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n}\n.bflist-icon-angle-right li:before {\n    z-index: 1;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 0.75rem;\n    content: \u0022\\f105\u0022;\n}\n.bflist-icon-angle-right li:after {\n    z-index: 0;\n    background: currentColor;\n    opacity: 0.2;\n    content: \u0022\u0022;\n}\n.has-background .bflist-icon-angle-right {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-angle-right,\nul.bflist-icon-angle-right {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-angle-right"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-angle-right","plusbfClassName":"bflist-icon-angle-right","plusbfStyle":"ul.bflist-icon-angle-right {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li,\nul.bflist-icon-angle-right li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-icon-angle-right li:before,\n.bflist-icon-angle-right li:after {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0.25rem;\n    width: 1rem;\n    height: 1rem;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n}\n.bflist-icon-angle-right li:before {\n    z-index: 1;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 0.75rem;\n    content: \u0022\\f105\u0022;\n}\n.bflist-icon-angle-right li:after {\n    z-index: 0;\n    background: currentColor;\n    opacity: 0.2;\n    content: \u0022\u0022;\n}\n.has-background .bflist-icon-angle-right {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-angle-right,\nul.bflist-icon-angle-right {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-angle-right"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-angle-right","plusbfClassName":"bflist-icon-angle-right","plusbfStyle":"ul.bflist-icon-angle-right {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li,\nul.bflist-icon-angle-right li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-icon-angle-right li:before,\n.bflist-icon-angle-right li:after {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0.25rem;\n    width: 1rem;\n    height: 1rem;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n}\n.bflist-icon-angle-right li:before {\n    z-index: 1;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 0.75rem;\n    content: \u0022\\f105\u0022;\n}\n.bflist-icon-angle-right li:after {\n    z-index: 0;\n    background: currentColor;\n    opacity: 0.2;\n    content: \u0022\u0022;\n}\n.has-background .bflist-icon-angle-right {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-angle-right,\nul.bflist-icon-angle-right {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-angle-right"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-icon-angle-right","plusbfClassName":"bflist-icon-angle-right","plusbfStyle":"ul.bflist-icon-angle-right {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li,\nul.bflist-icon-angle-right li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-icon-angle-right li:before,\n.bflist-icon-angle-right li:after {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0.25rem;\n    width: 1rem;\n    height: 1rem;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n}\n.bflist-icon-angle-right li:before {\n    z-index: 1;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 0.75rem;\n    content: \u0022\\f105\u0022;\n}\n.bflist-icon-angle-right li:after {\n    z-index: 0;\n    background: currentColor;\n    opacity: 0.2;\n    content: \u0022\u0022;\n}\n.has-background .bflist-icon-angle-right {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-icon-angle-right,\nul.bflist-icon-angle-right {\n    border: none;\n}\n.cps-post-main ul.bflist-icon-angle-right li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-icon-angle-right"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

③2重丸ver1

  • サンプルテキストサンプルテキストサンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:list {"className":"bflist-double-circle","plusbfClassName":"bflist-double-circle","plusbfStyle":"ul.bflist-double-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle li,\nul.bflist-double-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle li:before,\n.bflist-double-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bflist-double-circle li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 4px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n}\n.has-background .bflist-double-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle,\nul.bflist-double-circle {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle"><li>サンプルテキストサンプルテキストサンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ul>
<!-- /wp:list -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle","plusbfClassName":"bflist-double-circle","plusbfStyle":"ul.bflist-double-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle li,\nul.bflist-double-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle li:before,\n.bflist-double-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bflist-double-circle li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 4px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n}\n.has-background .bflist-double-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle,\nul.bflist-double-circle {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle","plusbfClassName":"bflist-double-circle","plusbfStyle":"ul.bflist-double-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle li,\nul.bflist-double-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle li:before,\n.bflist-double-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bflist-double-circle li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 4px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n}\n.has-background .bflist-double-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle,\nul.bflist-double-circle {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle","plusbfClassName":"bflist-double-circle","plusbfStyle":"ul.bflist-double-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle li,\nul.bflist-double-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle li:before,\n.bflist-double-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bflist-double-circle li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 4px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n}\n.has-background .bflist-double-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle,\nul.bflist-double-circle {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle","plusbfClassName":"bflist-double-circle","plusbfStyle":"ul.bflist-double-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle li,\nul.bflist-double-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle li:before,\n.bflist-double-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    border-radius: 50%;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.bflist-double-circle li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 4px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n}\n.has-background .bflist-double-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle,\nul.bflist-double-circle {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

④2重丸ver2

  • サンプルテキストサンプルテキストサンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:list {"className":"bflist-double-circle2","plusbfClassName":"bflist-double-circle2","plusbfStyle":"ul.bflist-double-circle2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle2 li,\nul.bflist-double-circle2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle2 li:before,\n.bflist-double-circle2 li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    content: \u0022\u0022;\n}\n.bflist-double-circle2 li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle2 li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n    background: currentColor;\n}\n.has-background .bflist-double-circle2 {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle2,\nul.bflist-double-circle2 {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle2"><li>サンプルテキストサンプルテキストサンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ul>
<!-- /wp:list -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle2","plusbfClassName":"bflist-double-circle2","plusbfStyle":"ul.bflist-double-circle2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle2 li,\nul.bflist-double-circle2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle2 li:before,\n.bflist-double-circle2 li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    content: \u0022\u0022;\n}\n.bflist-double-circle2 li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle2 li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n    background: currentColor;\n}\n.has-background .bflist-double-circle2 {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle2,\nul.bflist-double-circle2 {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle2","plusbfClassName":"bflist-double-circle2","plusbfStyle":"ul.bflist-double-circle2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle2 li,\nul.bflist-double-circle2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle2 li:before,\n.bflist-double-circle2 li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    content: \u0022\u0022;\n}\n.bflist-double-circle2 li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle2 li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n    background: currentColor;\n}\n.has-background .bflist-double-circle2 {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle2,\nul.bflist-double-circle2 {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle2","plusbfClassName":"bflist-double-circle2","plusbfStyle":"ul.bflist-double-circle2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle2 li,\nul.bflist-double-circle2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle2 li:before,\n.bflist-double-circle2 li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    content: \u0022\u0022;\n}\n.bflist-double-circle2 li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle2 li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n    background: currentColor;\n}\n.has-background .bflist-double-circle2 {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle2,\nul.bflist-double-circle2 {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-double-circle2","plusbfClassName":"bflist-double-circle2","plusbfStyle":"ul.bflist-double-circle2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-double-circle2 li,\nul.bflist-double-circle2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-double-circle2 li:before,\n.bflist-double-circle2 li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    content: \u0022\u0022;\n}\n.bflist-double-circle2 li:before {\n    z-index: 1;\n    width: .5rem;\n    height: .5rem;\n    left: .25rem;\n    top: 0.5rem;\n    border: 1px solid;\n    box-sizing: border-box;\n}\n.bflist-double-circle2 li:after {\n    z-index: 0;\n    opacity: 0.2;\n    width: 1rem;\n    height: 1rem;\n    left: 0;\n    top: 0.25rem;\n    background: currentColor;\n}\n.has-background .bflist-double-circle2 {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-double-circle2,\nul.bflist-double-circle2 {\n    border: none;\n}\n.cps-post-main ul.bflist-double-circle2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-double-circle2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

⑤下線

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-circle-underline","plusbfClassName":"bflist-circle-underline","plusbfStyle":"ul.bflist-circle-underline {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-circle-underline li,\nul.bflist-circle-underline li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 4px;\n    padding-left: 25px;\n}\nul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed #eee;\n}\n.has-background ul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed;\n}\n.bflist-circle-underline li:before {\n    display: flex;\n    position: absolute;\n    left: 0.25rem;\n    z-index: 1;\n    width: 0.5rem;\n    height: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    border: 4px solid;\n    border-radius: 50%;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.has-background .bflist-circle-underline {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-circle-underline,\nul.bflist-circle-underline {\n    border: none;\n}\n.cps-post-main ul.bflist-circle-underline li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-circle-underline"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-circle-underline","plusbfClassName":"bflist-circle-underline","plusbfStyle":"ul.bflist-circle-underline {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-circle-underline li,\nul.bflist-circle-underline li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 4px;\n    padding-left: 25px;\n}\nul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed #eee;\n}\n.has-background ul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed;\n}\n.bflist-circle-underline li:before {\n    display: flex;\n    position: absolute;\n    left: 0.25rem;\n    z-index: 1;\n    width: 0.5rem;\n    height: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    border: 4px solid;\n    border-radius: 50%;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.has-background .bflist-circle-underline {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-circle-underline,\nul.bflist-circle-underline {\n    border: none;\n}\n.cps-post-main ul.bflist-circle-underline li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-circle-underline"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-circle-underline","plusbfClassName":"bflist-circle-underline","plusbfStyle":"ul.bflist-circle-underline {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-circle-underline li,\nul.bflist-circle-underline li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 4px;\n    padding-left: 25px;\n}\nul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed #eee;\n}\n.has-background ul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed;\n}\n.bflist-circle-underline li:before {\n    display: flex;\n    position: absolute;\n    left: 0.25rem;\n    z-index: 1;\n    width: 0.5rem;\n    height: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    border: 4px solid;\n    border-radius: 50%;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.has-background .bflist-circle-underline {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-circle-underline,\nul.bflist-circle-underline {\n    border: none;\n}\n.cps-post-main ul.bflist-circle-underline li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-circle-underline"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-circle-underline","plusbfClassName":"bflist-circle-underline","plusbfStyle":"ul.bflist-circle-underline {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\n.cps-post-main ul.bflist-circle-underline li,\nul.bflist-circle-underline li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 4px;\n    padding-left: 25px;\n}\nul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed #eee;\n}\n.has-background ul.bflist-circle-underline li:not(:last-child) {\n    border-bottom: 1px dashed;\n}\n.bflist-circle-underline li:before {\n    display: flex;\n    position: absolute;\n    left: 0.25rem;\n    z-index: 1;\n    width: 0.5rem;\n    height: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    border: 4px solid;\n    border-radius: 50%;\n    content: \u0022\u0022;\n    box-sizing: border-box;\n}\n.has-background .bflist-circle-underline {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ul.bflist-circle-underline,\nul.bflist-circle-underline {\n    border: none;\n}\n.cps-post-main ul.bflist-circle-underline li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-circle-underline"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

ナンバー

①丸

  1. サンプルテキストサンプルテキストサンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:list {"ordered":true,"className":"bflist-num-circle","plusbfClassName":"bflist-num-circle","plusbfStyle":"ol.bflist-num-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-circle li,\nol.bflist-num-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-circle li:before,\n.bflist-num-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    top: 0.125rem;\n}\n.bflist-num-circle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #fff;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-circle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.has-background .bflist-num-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-circle,\nol.bflist-num-circle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-circle"><li>サンプルテキストサンプルテキストサンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ol>
<!-- /wp:list -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-circle","plusbfClassName":"bflist-num-circle","plusbfStyle":"ol.bflist-num-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-circle li,\nol.bflist-num-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-circle li:before,\n.bflist-num-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    top: 0.125rem;\n}\n.bflist-num-circle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #fff;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-circle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.has-background .bflist-num-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-circle,\nol.bflist-num-circle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-circle","plusbfClassName":"bflist-num-circle","plusbfStyle":"ol.bflist-num-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-circle li,\nol.bflist-num-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-circle li:before,\n.bflist-num-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    top: 0.125rem;\n}\n.bflist-num-circle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #fff;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-circle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.has-background .bflist-num-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-circle,\nol.bflist-num-circle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-circle","plusbfClassName":"bflist-num-circle","plusbfStyle":"ol.bflist-num-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-circle li,\nol.bflist-num-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-circle li:before,\n.bflist-num-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    top: 0.125rem;\n}\n.bflist-num-circle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #fff;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-circle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.has-background .bflist-num-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-circle,\nol.bflist-num-circle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-circle","plusbfClassName":"bflist-num-circle","plusbfStyle":"ol.bflist-num-circle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-circle li,\nol.bflist-num-circle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-circle li:before,\n.bflist-num-circle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    top: 0.125rem;\n}\n.bflist-num-circle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #fff;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-circle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n}\n.has-background .bflist-num-circle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-circle,\nol.bflist-num-circle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-circle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-circle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

men

JINの場合はもともと似たようなやつがあります♪

②横線

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:list {"ordered":true,"className":"bflist-num-rightborder","plusbfClassName":"bflist-num-rightborder","plusbfStyle":"ol.bflist-num-rightborder {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    counter-reset: num;\n    list-style-type: none;\n}\n.cps-post-main ol.bflist-num-rightborder li,\nol.bflist-num-rightborder li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0.5rem 0;\n    padding-left: 1.75rem;\n}\n.cps-post-main ol.bflist-num-rightborder li:before,\n.bflist-num-rightborder li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    align-items: center;\n    border-right: 2px solid;\n    border-radius: 0;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-rightborder {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-rightborder,\nol.bflist-num-rightborder {\n    border: none;\n}\n.cps-post-main ol.bflist-num-rightborder li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-rightborder"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ol>
<!-- /wp:list -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-rightborder","plusbfClassName":"bflist-num-rightborder","plusbfStyle":"ol.bflist-num-rightborder {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    counter-reset: num;\n    list-style-type: none;\n}\n.cps-post-main ol.bflist-num-rightborder li,\nol.bflist-num-rightborder li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0.5rem 0;\n    padding-left: 1.75rem;\n}\n.cps-post-main ol.bflist-num-rightborder li:before,\n.bflist-num-rightborder li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    align-items: center;\n    border-right: 2px solid;\n    border-radius: 0;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-rightborder {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-rightborder,\nol.bflist-num-rightborder {\n    border: none;\n}\n.cps-post-main ol.bflist-num-rightborder li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-rightborder"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-rightborder","plusbfClassName":"bflist-num-rightborder","plusbfStyle":"ol.bflist-num-rightborder {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    counter-reset: num;\n    list-style-type: none;\n}\n.cps-post-main ol.bflist-num-rightborder li,\nol.bflist-num-rightborder li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0.5rem 0;\n    padding-left: 1.75rem;\n}\n.cps-post-main ol.bflist-num-rightborder li:before,\n.bflist-num-rightborder li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    align-items: center;\n    border-right: 2px solid;\n    border-radius: 0;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-rightborder {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-rightborder,\nol.bflist-num-rightborder {\n    border: none;\n}\n.cps-post-main ol.bflist-num-rightborder li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-rightborder"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-rightborder","plusbfClassName":"bflist-num-rightborder","plusbfStyle":"ol.bflist-num-rightborder {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    counter-reset: num;\n    list-style-type: none;\n}\n.cps-post-main ol.bflist-num-rightborder li,\nol.bflist-num-rightborder li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0.5rem 0;\n    padding-left: 1.75rem;\n}\n.cps-post-main ol.bflist-num-rightborder li:before,\n.bflist-num-rightborder li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    align-items: center;\n    border-right: 2px solid;\n    border-radius: 0;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-rightborder {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-rightborder,\nol.bflist-num-rightborder {\n    border: none;\n}\n.cps-post-main ol.bflist-num-rightborder li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-rightborder"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-rightborder","plusbfClassName":"bflist-num-rightborder","plusbfStyle":"ol.bflist-num-rightborder {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    counter-reset: num;\n    list-style-type: none;\n}\n.cps-post-main ol.bflist-num-rightborder li,\nol.bflist-num-rightborder li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0.5rem 0;\n    padding-left: 1.75rem;\n}\n.cps-post-main ol.bflist-num-rightborder li:before,\n.bflist-num-rightborder li:before {\n    display: flex;\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    align-items: center;\n    border-right: 2px solid;\n    border-radius: 0;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-rightborder {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-rightborder,\nol.bflist-num-rightborder {\n    border: none;\n}\n.cps-post-main ol.bflist-num-rightborder li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-rightborder"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

③四角

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:list {"ordered":true,"className":"bflist-num-square","plusbfClassName":"bflist-num-square","plusbfStyle":"ol.bflist-num-square {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-square li,\nol.bflist-num-square li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-square li:before,\n.bflist-num-square li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-square li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-square li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n}\n.has-background .bflist-num-square {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-square,\nol.bflist-num-square {\n    border: none;\n}\n.cps-post-main ol.bflist-num-square li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-square"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ol>
<!-- /wp:list -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-square","plusbfClassName":"bflist-num-square","plusbfStyle":"ol.bflist-num-square {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-square li,\nol.bflist-num-square li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-square li:before,\n.bflist-num-square li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-square li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-square li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n}\n.has-background .bflist-num-square {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-square,\nol.bflist-num-square {\n    border: none;\n}\n.cps-post-main ol.bflist-num-square li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-square"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-square","plusbfClassName":"bflist-num-square","plusbfStyle":"ol.bflist-num-square {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-square li,\nol.bflist-num-square li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-square li:before,\n.bflist-num-square li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-square li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-square li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n}\n.has-background .bflist-num-square {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-square,\nol.bflist-num-square {\n    border: none;\n}\n.cps-post-main ol.bflist-num-square li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-square"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-square","plusbfClassName":"bflist-num-square","plusbfStyle":"ol.bflist-num-square {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-square li,\nol.bflist-num-square li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-square li:before,\n.bflist-num-square li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-square li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-square li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n}\n.has-background .bflist-num-square {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-square,\nol.bflist-num-square {\n    border: none;\n}\n.cps-post-main ol.bflist-num-square li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-square"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-square","plusbfClassName":"bflist-num-square","plusbfStyle":"ol.bflist-num-square {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-square li,\nol.bflist-num-square li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-square li:before,\n.bflist-num-square li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-square li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-square li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    background: currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n}\n.has-background .bflist-num-square {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-square,\nol.bflist-num-square {\n    border: none;\n}\n.cps-post-main ol.bflist-num-square li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-square"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

対応テーマSANGO・COCOON・THE SONIC

④三角

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:list {"ordered":true,"className":"bflist-num-triangle","plusbfClassName":"bflist-num-triangle","plusbfStyle":"ol.bflist-num-triangle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-triangle li,\nol.bflist-num-triangle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-triangle li:before,\n.bflist-num-triangle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-triangle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-triangle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-left: 0.625rem solid transparent;\n    border-top: 0.625rem solid transparent;\n    border-bottom: 0.625rem solid currentColor;\n    border-right: 0.625rem solid currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-triangle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-triangle,\nol.bflist-num-triangle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-triangle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-triangle"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ol>
<!-- /wp:list -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6"}}} -->
<div class="wp-block-group has-text-color" style="color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-triangle","plusbfClassName":"bflist-num-triangle","plusbfStyle":"ol.bflist-num-triangle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-triangle li,\nol.bflist-num-triangle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-triangle li:before,\n.bflist-num-triangle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-triangle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-triangle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-left: 0.625rem solid transparent;\n    border-top: 0.625rem solid transparent;\n    border-bottom: 0.625rem solid currentColor;\n    border-right: 0.625rem solid currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-triangle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-triangle,\nol.bflist-num-triangle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-triangle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-triangle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3"}}} -->
<div class="wp-block-group has-text-color" style="color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-triangle","plusbfClassName":"bflist-num-triangle","plusbfStyle":"ol.bflist-num-triangle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-triangle li,\nol.bflist-num-triangle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-triangle li:before,\n.bflist-num-triangle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-triangle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-triangle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-left: 0.625rem solid transparent;\n    border-top: 0.625rem solid transparent;\n    border-bottom: 0.625rem solid currentColor;\n    border-right: 0.625rem solid currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-triangle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-triangle,\nol.bflist-num-triangle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-triangle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-triangle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-triangle","plusbfClassName":"bflist-num-triangle","plusbfStyle":"ol.bflist-num-triangle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-triangle li,\nol.bflist-num-triangle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-triangle li:before,\n.bflist-num-triangle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-triangle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-triangle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-left: 0.625rem solid transparent;\n    border-top: 0.625rem solid transparent;\n    border-bottom: 0.625rem solid currentColor;\n    border-right: 0.625rem solid currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-triangle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-triangle,\nol.bflist-num-triangle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-triangle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-triangle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"ordered":true,"className":"bflist-num-triangle","plusbfClassName":"bflist-num-triangle","plusbfStyle":"ol.bflist-num-triangle {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n    counter-reset: num;\n}\n.cps-post-main ol.bflist-num-triangle li,\nol.bflist-num-triangle li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 4px 0;\n    padding-left: 25px;\n}\n.bflist-num-triangle li:before,\n.bflist-num-triangle li:after {\n    display: flex;\n    position: absolute;\n    justify-content: center;\n    align-items: center;\n    top: 0.125rem;\n}\n.bflist-num-triangle li:before {\n    left: 0;\n    z-index: 1;\n    width: 1.25rem;\n    height: 1.25rem;\n    font-size: 0.75rem;\n    content: counter(num)\u0022\u0022;\n    counter-increment: num;\n    box-sizing: border-box;\n}\n.bflist-num-triangle li:after {\n    left: 0;\n    z-index: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-left: 0.625rem solid transparent;\n    border-top: 0.625rem solid transparent;\n    border-bottom: 0.625rem solid currentColor;\n    border-right: 0.625rem solid currentColor;\n    content: \u0022\u0022;\n    opacity: .2;\n    box-sizing: border-box;\n}\n.has-background .bflist-num-triangle {\n    padding: 1rem 1.5rem;\n}\n.editor-styles-wrapper ol.bflist-num-triangle,\nol.bflist-num-triangle {\n    border: none;\n}\n.cps-post-main ol.bflist-num-triangle li:before {\n    background-color: transparent!important;\n}"} -->
<ol class="bflist-num-triangle"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ol>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

対応テーマSANGO・COCOON・THE SONIC

スペシャル

①チェックリストver1

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"background":"#f9f9f9"}}} -->
<div class="wp-block-group has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check","plusbfClassName":"bflist-spe-check","plusbfStyle":"ul.bflist-spe-check {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check li:not(:last-child) {\n    border-bottom: .75rem solid #fff;\n}\n.bflist-spe-check li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check,\nul.bflist-spe-check {\n    border: none;\n}\n.cps-post-main ul.bflist-spe-check li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check","plusbfClassName":"bflist-spe-check","plusbfStyle":"ul.bflist-spe-check {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check li:not(:last-child) {\n    border-bottom: .75rem solid #fff;\n}\n.bflist-spe-check li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check,\nul.bflist-spe-check {\n    border: none;\n}\n.cps-post-main ul.bflist-spe-check li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check","plusbfClassName":"bflist-spe-check","plusbfStyle":"ul.bflist-spe-check {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check li:not(:last-child) {\n    border-bottom: .75rem solid #fff;\n}\n.bflist-spe-check li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check,\nul.bflist-spe-check {\n    border: none;\n}\n.cps-post-main ul.bflist-spe-check li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#ffc266","background":"#fffaf3"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check","plusbfClassName":"bflist-spe-check","plusbfStyle":"ul.bflist-spe-check {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check li:not(:last-child) {\n    border-bottom: .75rem solid #fff;\n}\n.bflist-spe-check li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check,\nul.bflist-spe-check {\n    border: none;\n}\n.cps-post-main ul.bflist-spe-check li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#f28d79","background":"#fef6f4"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check","plusbfClassName":"bflist-spe-check","plusbfStyle":"ul.bflist-spe-check {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check li:not(:last-child) {\n    border-bottom: .75rem solid #fff;\n}\n.bflist-spe-check li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check,\nul.bflist-spe-check {\n    border: none;\n}\n.cps-post-main ul.bflist-spe-check li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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

②チョックリストver2

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"background":"#f9f9f9"}}} -->
<div class="wp-block-group has-background" style="background-color:#f9f9f9"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check2","plusbfClassName":"bflist-spe-check2","plusbfStyle":"ul.bflist-spe-check2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check2 li:not(:last-child) {\n    border-bottom: 1px solid;\n}\n.bflist-spe-check2 li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check2 {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check2,\nul.bflist-spe-check2 {\n    border: 1px solid;\n}\n.cps-post-main ul.bflist-spe-check2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check2"><li>サンプルテキスト</li><li>サンプルテキスト</li><li>サンプルテキスト</li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#60a7d6","background":"#f3f8fc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f3f8fc;color:#60a7d6"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check2","plusbfClassName":"bflist-spe-check2","plusbfStyle":"ul.bflist-spe-check2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check2 li:not(:last-child) {\n    border-bottom: 1px solid;\n}\n.bflist-spe-check2 li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check2 {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check2,\nul.bflist-spe-check2 {\n    border: 1px solid;\n}\n.cps-post-main ul.bflist-spe-check2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#76ced3","background":"#f4fbfc"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#f4fbfc;color:#76ced3"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check2","plusbfClassName":"bflist-spe-check2","plusbfStyle":"ul.bflist-spe-check2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check2 li:not(:last-child) {\n    border-bottom: 1px solid;\n}\n.bflist-spe-check2 li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check2 {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check2,\nul.bflist-spe-check2 {\n    border: 1px solid;\n}\n.cps-post-main ul.bflist-spe-check2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#ffc266","background":"#fffaf3"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fffaf3;color:#ffc266"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check2","plusbfClassName":"bflist-spe-check2","plusbfStyle":"ul.bflist-spe-check2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check2 li:not(:last-child) {\n    border-bottom: 1px solid;\n}\n.bflist-spe-check2 li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check2 {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check2,\nul.bflist-spe-check2 {\n    border: 1px solid;\n}\n.cps-post-main ul.bflist-spe-check2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
タイトル
<!-- wp:group {"style":{"color":{"text":"#f28d79","background":"#fef6f4"}}} -->
<div class="wp-block-group has-text-color has-background" style="background-color:#fef6f4;color:#f28d79"><div class="wp-block-group__inner-container"><!-- wp:list {"className":"bflist-spe-check2","plusbfClassName":"bflist-spe-check2","plusbfStyle":"ul.bflist-spe-check2 {\n    line-height: 1.5;\n    margin-top: 0;\n    margin-bottom: 2em;\n    padding-left: 0;\n    list-style-type: none;\n}\nbody .bflist-spe-check2 li {\n    display: flex;\n    position: relative;\n    align-items: center;\n    margin: 0;\n    padding: 1rem 1rem 1rem 3rem;\n}\n.bflist-spe-check2 li:not(:last-child) {\n    border-bottom: 1px solid;\n}\n.bflist-spe-check2 li:before {\n    display: flex;\n    position: absolute;\n    left: 0.75rem;\n    font-family: \u0022font awesome 5 free\u0022;\n    font-weight: 600;\n    font-size: 1.5rem;\n    content: \u0022\\f058\u0022;\n}\n.has-background .bflist-spe-check2 {\n    padding: 0;\n}\n.editor-styles-wrapper ul.bflist-spe-check2,\nul.bflist-spe-check2 {\n    border: 1px solid;\n}\n.cps-post-main ul.bflist-spe-check2 li:before {\n    background-color: transparent!important;\n}"} -->
<ul class="bflist-spe-check2"><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li><li><span style="color:#333333" class="has-inline-color">サンプルテキスト</span></li></ul>
<!-- /wp:list --></div></div>
<!-- /wp:group -->

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