ここでは、購入特典の「装飾パーツ」のイメージと、コピー用コードを記載しています。
コピペ用コードは「コード導入マニュアル」をご確認の上ご使用ください。
装飾パーツは定期的に追加していきます。
注意
装飾パーツをイメージ通りに表示するには、Gutenberg 設定「ブロック下の余白」の [ -小 ]：を「-7 px」に設定してください。
※実際の表示イメージとビジュアルエディタで見るイメージとは異なります。実際のイメージはプレビュー画面で確認してください。
ふきだし付きメモ
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"100px","width":"0px","style":"none"}},"backgroundColor":"soft-red","textColor":"white","fontSize":"small","stMarginBottom":"0"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-white-color has-soft-red-background-color has-text-color has-background has-link-color has-small-font-size" style="border-style:none;border-width:0px;border-radius:100px">ココがおすすめ</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-thumbs-up","iconSize":"150","iconColor":"#f78da7","backgroundColor":"#fdf0f2","borderWidth":0,"borderColor":"#e92f3d"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#fdf0f2;border-width:0px;border-color:#e92f3d;border-radius:2px"><div class="clip-fonticon" style="color:#f78da7;font-size:150%;border-color:#f78da74d"><i class="st-fa st-svg-thumbs-up st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！ココがおすすめ！</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"30px"}},"backgroundColor":"very-dark-gray","textColor":"white","fontSize":"small","stMarginBottom":"0"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-white-color has-very-dark-gray-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:30px">ココがダメ</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-thumbs-down","iconSize":"150","iconColor":"#313131","backgroundColor":"#fafafa"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#fafafa;border-radius:2px"><div class="clip-fonticon" style="color:#313131;font-size:150%;border-color:#3131314d"><i class="st-fa st-svg-thumbs-down st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！ココがダメ！</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"30px"}},"backgroundColor":"soft-red","textColor":"white","fontSize":"small","stMarginBottom":"0"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-white-color has-soft-red-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:30px">ココに注意</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-exclamation-circle","iconSize":"150","iconColor":"#e92f3d","backgroundColor":"#fdf0f2"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#fdf0f2;border-radius:2px"><div class="clip-fonticon" style="color:#e92f3d;font-size:150%;border-color:#e92f3d4d"><i class="st-fa st-svg-exclamation-circle st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！ココに注意！</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"30px"}},"backgroundColor":"vivid-cyan-blue","textColor":"white","fontSize":"small","stMarginBottom":"0"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:30px">ココがポイント</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-hand-right","iconSize":"150","iconColor":"#006cab","backgroundColor":"#eefaff"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#eefaff;border-radius:2px"><div class="clip-fonticon" style="color:#006cab;font-size:150%;border-color:#006cab4d"><i class="st-fa st-svg-hand-right st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>ここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントです</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"30px"}},"backgroundColor":"vivid-yellow","textColor":"white","fontSize":"small","stMarginBottom":"0"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-white-color has-vivid-yellow-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:30px">コメント</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-comments","iconSize":"150","iconColor":"#ffc107","backgroundColor":"#fffde7"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#fffde7;border-radius:2px"><div class="clip-fonticon" style="color:#ffc107;font-size:150%;border-color:#ffc1074d"><i class="st-fa st-svg-comments st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>ここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントですここがポイントです</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-no-st-margin-bottom has-st-icon has-st-icon-file-text-o","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"30px"}},"backgroundColor":"vivid-cyan-blue","textColor":"white","fontSize":"small","stMarginBottom":"0","stIcon":"st-svg-file-text-o"} -->
<p class="is-style-st-paragraph-bubble has-no-st-margin-bottom has-st-icon has-st-icon-file-text-o has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:30px">補足情報</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/memo {"selectedIcon":"st-svg-pencil","iconSize":"150","iconColor":"#8ed1fc","backgroundColor":"#eefaff"} -->
<div class="wp-block-st-blocks-memo clip-memobox has-border" style="background-color:#eefaff;border-radius:2px"><div class="clip-fonticon" style="color:#8ed1fc;font-size:150%;border-color:#8ed1fc4d"><i class="st-fa st-svg-pencil st-css-no" data-icon-label="" aria-hidden=""></i></div><div class="clip-memotext"><!-- wp:paragraph -->
<p>補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。補足情報はこちらです。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:st-blocks/memo -->内部リンク用
注意
ボックスの中にある「AFFINGER: 記事一覧(ID)」の記事ID番号はデフォルトで「1」になっています。
任意のID番号に変更してお使いください。
コピペ用コードを表示する
<!-- wp:st-blocks/my-box {"selectedIcon":"","titleColor":"#313131","titleFontSize":"90","backgroundColor":"#ffffff","borderWidth":1,"borderRadius":0} -->
<div class="wp-block-st-blocks-my-box st-mybox has-title" style="background-color:#ffffff;border-width:1px;border-radius:0px"><p class="st-mybox-title" style="color:#313131;font-size:90%;font-weight:bold;background-color:#ffffff"><span class="st-mybox-title-text">＼あわせて読みたい／</span></p><div class="st-in-mybox"><!-- wp:st-blocks/st-postgroup {"card":false} -->
[st-postgroup html_class="" id="1" rank="0" type="" slide="off" slides_to_show="3,3,2" slide_date="on" slide_more="ReadMore" slide_center="off" fullsize_type=""]
<!-- /wp:st-blocks/st-postgroup --></div></div>
<!-- /wp:st-blocks/my-box -->
コピペ用コードを表示する
<!-- wp:st-blocks/my-box {"selectedIcon":"st-svg-file-text-o","titleColor":"#313131","titleFontSize":"90","borderWidth":1,"borderRadius":1} -->
<div class="wp-block-st-blocks-my-box st-mybox has-title has-icon" style="border-width:1px;border-radius:1px"><p class="st-mybox-title" style="color:#313131;font-size:90%;font-weight:bold;background-color:#ffffff"><i class="st-fa st-svg-file-text-o st-css-no" aria-hidden=""></i><span class="st-mybox-title-text">参考</span></p><div class="st-in-mybox"><!-- wp:st-blocks/st-postgroup {"card":false} -->
[st-postgroup html_class="" id="1" rank="0" type="" slide="off" slides_to_show="3,3,2" slide_date="on" slide_more="ReadMore" slide_center="off" fullsize_type=""]
<!-- /wp:st-blocks/st-postgroup --></div></div>
<!-- /wp:st-blocks/my-box -->
コピペ用コードを表示する
<!-- wp:group {"className":"is-style-st-group-stripe-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-st-group-stripe-box"><!-- wp:paragraph {"className":"is-style-st-paragraph-marumozi has-no-st-margin-bottom has-st-icon has-st-icon-file-text-o","style":{"border":{"radius":"0px","width":"0px","style":"none"}},"stMarginBottom":"0","stIcon":"st-svg-file-text-o"} -->
<p class="is-style-st-paragraph-marumozi has-no-st-margin-bottom has-st-icon has-st-icon-file-text-o" style="border-style:none;border-width:0px;border-radius:0px">参考記事</p>
<!-- /wp:paragraph -->
<!-- wp:st-blocks/st-postgroup {"postIds":"318","card":false} -->
[st-postgroup html_class="" id="318" rank="0" type="" slide="off" slides_to_show="3,3,2" slide_date="on" slide_more="ReadMore" slide_center="off" fullsize_type=""]
<!-- /wp:st-blocks/st-postgroup --></div>
<!-- /wp:group -->
コピペ用コードを表示する
<!-- wp:paragraph {"className":"is-style-st-paragraph-bubble has-st-margin-bottom has-st-margin-bottom\u002d\u002d1 has-st-icon has-st-icon-file-text-o","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"0px"},"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"backgroundColor":"very-dark-gray","textColor":"white","fontSize":"small","stMarginBottom":"-1","stIcon":"st-svg-file-text-o"} -->
<p class="is-style-st-paragraph-bubble has-st-margin-bottom has-st-margin-bottom--1 has-st-icon has-st-icon-file-text-o has-white-color has-very-dark-gray-background-color has-text-color has-background has-link-color has-small-font-size" style="border-radius:0px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)">参考記事</p>
<!-- /wp:paragraph -->
<!-- wp:group {"className":"is-style-st-group-bg-diagonal has-st-border has-st-solid-border has-st-medium-border-width","layout":{"type":"constrained"},"stBorderStyle":"solid"} -->
<div class="wp-block-group is-style-st-group-bg-diagonal has-st-border has-st-solid-border has-st-medium-border-width"><!-- wp:st-blocks/st-postgroup {"card":false} -->
[st-postgroup html_class="" id="1" rank="0" type="" slide="off" slides_to_show="3,3,2" slide_date="on" slide_more="ReadMore" slide_center="off" fullsize_type=""]
<!-- /wp:st-blocks/st-postgroup --></div>
<!-- /wp:group -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->装飾ボックス
コピペ用コードを表示する
<!-- wp:st-blocks/flexbox {"titleFontSize":"110","titleColor":"#313131","backgroundColor":"#ffffff","borderWidth":3,"borderColor":"#c3c3c3","height":270} -->
<div class="wp-block-st-blocks-flexbox st-header-flexwrap" style="width:100%;box-sizing:border-box;height:270px;background-color:#ffffff;border:3px solid #c3c3c3;margin-bottom:20px;padding:20px"><div class="st-header-flexbox"><p class="st-header-flextitle" style="color:#313131;font-size:110%"><i class="st-fa st-svg-file-text-o st-css-no" aria-hidden=""></i><span class="st-header-flextext">こんな方におすすめ</span></p><!-- wp:list {"className":"is-style-st-square-checkbox-no-border","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|20"}}},"underlineSettings":true} -->
<ul style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20)" class="wp-block-list is-style-st-square-checkbox-no-border st-list-underline"><!-- wp:list-item -->
<li>これはダミーテキストです</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>これはダミーテキストです</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>これはダミーテキストです</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div></div>
<!-- /wp:st-blocks/flexbox -->
コピペ用コードを表示する
<!-- wp:group {"className":"has-st-border has-st-solid-border has-st-thick-border-width is-style-st-group-bg-dot","style":{"border":{"color":"#b3b3b3","width":"10px","radius":"3px"},"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"layout":{"type":"constrained"},"stBorderStyle":"thick"} -->
<div class="wp-block-group has-st-border has-st-solid-border has-st-thick-border-width is-style-st-group-bg-dot has-border-color" style="border-color:#b3b3b3;border-width:10px;border-radius:3px;padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>タイトル</strong></p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul id="block-677d78da-94fc-4374-be1f-cdb6df766f1d" class="wp-block-list"><!-- wp:list-item -->
<li>ポイント１</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>ポイント２</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>ポイント３</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->
コピペ用コードを表示する
<!-- wp:st-blocks/flexbox {"selectedIcon":"","titleColor":"#ffffff","backgroundColor":"#003333","borderWidth":10,"borderColor":"#996600"} -->
<div class="wp-block-st-blocks-flexbox st-header-flexwrap" style="width:100%;box-sizing:border-box;height:auto;background-color:#003333;border:10px solid #996600;margin-bottom:20px;padding:20px"><div class="st-header-flexbox"><p class="st-header-flextitle" style="color:#ffffff;font-size:150%"><span class="st-header-flextext">タイトル</span></p><!-- wp:list {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<ul class="wp-block-list has-white-color has-text-color has-link-color"><!-- wp:list-item -->
<li>ポイント１</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>ポイント２</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>ポイント３</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div></div>
<!-- /wp:st-blocks/flexbox -->
