{"id":1372,"date":"2024-05-12T11:55:33","date_gmt":"2024-05-12T11:55:33","guid":{"rendered":"https:\/\/tableberg.com\/?post_type=docs&#038;p=1372"},"modified":"2024-06-22T23:31:55","modified_gmt":"2024-06-22T23:31:55","password":"","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ab%e3%83%aa%e3%83%9c%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"docs","link":"https:\/\/tableberg.com\/ja\/docs\/how-to-add-ribbons-to-wordpress-tables\/","title":{"rendered":"\u30ea\u30dc\u30f3\u30fb\u30d6\u30ed\u30c3\u30af"},"content":{"rendered":"<p>The Ribbon block overlays content with a decorative strike. It is used to draw visitors\u2019 attention to specific information, like features, discounts, promotions, top-selling items, sales copies, etc.<\/p>\n\n\n\n<p>By adding the Ribbon block to a table, you can make some of its cells stand out from others. <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0\">\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/a> provides a simple and easy way to add Ribbons to your tables in WordPress.<\/p>\n\n\n\n<p>This documentation post will show you how to add Ribbons to WordPress tables.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 01: Find and Add the Ribbon Block to the Table<\/h2>\n\n\n\n<p>TableBerg includes several blocks to create well-functional tables. Ribbon is one of them. Find and add the <strong>Ribbon block<\/strong> to your desired cell by clicking the <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Ribbon-Block-to-the-Table.webp\" alt=\"Find and Add the Ribbon Block to the Table\" class=\"wp-image-1373\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Ribbon-Block-to-the-Table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Ribbon-Block-to-the-Table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Ribbon-Block-to-the-Table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Find-and-Add-the-Ribbon-Block-to-the-Table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>\u306b\u3064\u3044\u3066 <strong>Ribbon block<\/strong> will be added to the cell in a single.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/SCR-20240512-omqp.png\" alt=\"The Ribbon block is added to the Table\" class=\"wp-image-1374\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/SCR-20240512-omqp.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/SCR-20240512-omqp-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/SCR-20240512-omqp-1024x523.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/SCR-20240512-omqp-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 02: Configure Settings of the Ribbon Block<\/h2>\n\n\n\n<p>You\u2019ll find numerous options to change the ribbon block settings under the <strong>\u8a2d\u5b9a\u30bf\u30d6<\/strong> on the right sidebar. <\/p>\n\n\n\n<p>Options you\u2019ll find there are <strong>Ribbon Type, Ribbon Text, Side, Distance,<\/strong> \u305d\u3057\u3066 <strong>\u30b5\u30a4\u30ba<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Ribbon-Block-1024x523.webp\" alt=\"Configure Settings of the Ribbon Block\" class=\"wp-image-1375\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Ribbon-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Ribbon-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Ribbon-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Configure-Settings-of-the-Ribbon-Block.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"font-size:clamp(1.146rem, 1.146rem + ((1vw - 0.2rem) * 1.113), 1.8rem);\"><strong># Change the Ribbon Type<\/strong><\/p>\n\n\n\n<p>\u306b\u884c\u304f\u3002 <strong>Ribbon Type option<\/strong> under the <strong>\u8a2d\u5b9a\u30bf\u30d6<\/strong>. Click the dropdown icon below it. There are four options \u2013 <strong>Bookmark, Corner, Side, <\/strong>\u305d\u3057\u3066 <strong>Icon<\/strong>. By selecting these options, you can easily change the ribbon type.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-type.mp4\"><\/video><\/figure>\n\n\n\n<p style=\"font-size:clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.074), 28px);\"><strong># Change the Ribbon Text<\/strong> <strong>and Size<\/strong><\/p>\n\n\n\n<p>\u306b\u884c\u304f\u3002 <strong>Ribbon Text<\/strong> option. Write your desired copy in the box below. You\u2019ll see the Ribbon copy is changing on the table.<\/p>\n\n\n\n<p>Next, from the <strong>\u30b5\u30a4\u30ba <\/strong>option, you can increase the size of the Ribbon text.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-Text-and-Size-1024x523.webp\" alt=\"\" class=\"wp-image-1377\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-Text-and-Size-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-Text-and-Size-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-Text-and-Size-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Ribbon-Text-and-Size.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p style=\"font-size:clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.074), 28px);\"><strong># Change the Side and Distance<\/strong><\/p>\n\n\n\n<p>Using the <strong>Side<\/strong> option, you can showcase the Ribben whether on the right or left side.<\/p>\n\n\n\n<p>If you Ribbon copy appears in two lines, by increasing <strong>Distance<\/strong>, you can bring the copy in one line.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Side-and-Distance.webp\" alt=\"Change the Side and Distance\" class=\"wp-image-1378\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Side-and-Distance.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Side-and-Distance-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Side-and-Distance-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Change-the-Side-and-Distance-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step 03: Stylize the Ribbon Block<\/h2>\n\n\n\n<p>\u306b\u884c\u304f\u3002 <strong>\u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>. You\u2019ll be able to change the text and background color of the Ribbon block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Ribbon-Block.webp\" alt=\"Stylize the Ribbon Block\" class=\"wp-image-1379\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Ribbon-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Ribbon-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Ribbon-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Ribbon-Block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Now, your table is ready to add content to the cell where you have added the Ribbon block. Hope you can do the rest yourself.<\/p>\n\n\n\n<p>Like Ribbon, you can make your table attention-grabbing using the Icon block. Here\u2019s a documentation on <a href=\"https:\/\/tableberg.com\/ja\/%e8%ab%b8%e6%b3%a8%e6%84%8f\/tableberg-one\/%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%83%90%e3%83%bc%e3%82%b0\/how-to-add-icons-to-wordpress-tables\/\" target=\"_blank\" rel=\"noopener\" title=\"how to add the Icon block to your WordPress table\">how to add the Icon block to your WordPress table<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The Ribbon block overlays content with a decorative strike. It is used to draw visitors&#8217; attention to specific information, like features, discounts, promotions, top-selling items, sales copies, etc. By adding the Ribbon block to a table, you can make some of its cells stand out from others. TableBerg provides a simple and easy way to add Ribbons to your tables in WordPress. This documentation post will show you how to add Ribbons to WordPress tables. Step 01: Find and Add the Ribbon Block to the Table TableBerg includes several blocks to create well-functional tables. Ribbon is one of them. Find and add the Ribbon block to your desired cell by [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"doc_category":[94],"doc_tag":[78,81],"class_list":["post-1372","docs","type-docs","status-publish","hentry","doc_category-sub-blocks","doc_tag-icon-block","doc_tag-ribbon-block"],"year_month":"2026-04","word_count":363,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"\u30a4\u30b9\u30c6\u30a3\u30a2\u30af\u30fb\u30ec\u30a4\u30cf\u30f3","author_nicename":"wpx_irayhan","author_url":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"doc_category_info":[{"term_name":"Sub-Blocks","term_url":"https:\/\/tableberg.com\/ja\/docs-category\/sub-blocks\/"}],"doc_tag_info":[{"term_name":"Icon Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/icon-block\/"},{"term_name":"Ribbon Block","term_url":"https:\/\/tableberg.com\/ja\/docs-tag\/ribbon-block\/"}],"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=1372"}],"version-history":[{"count":2,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1372\/revisions"}],"predecessor-version":[{"id":1826,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/docs\/1372\/revisions\/1826"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=1372"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_category?post=1372"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/doc_tag?post=1372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}