{"id":984,"date":"2025-01-26T09:35:32","date_gmt":"2025-01-26T09:35:32","guid":{"rendered":"https:\/\/tableberg.com\/?p=984"},"modified":"2025-01-26T09:35:35","modified_gmt":"2025-01-26T09:35:35","slug":"how-to-create-text-boxes-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-create-text-boxes-in-wordpress\/","title":{"rendered":"WordPress\u3067\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\uff083\u7a2e\u985e\uff09"},"content":{"rendered":"

A text box is a designated area within the Gutenberg editor where you can craft and publish texts with different typography, font, color, stylization, and other formatting options.<\/p>\n\n\n\n

When you want to highlight an important announcement, testimonial, or a brief product description, text boxes allow you to do so. In this article, we\u2019ll show you several ways how to create text boxes in WordPress.<\/p>\n\n\n\n

\n
\"\"
\u30bf\u30a4\u30d71\uff1a<\/mark> \u8272\u4ed8\u304d\u80cc\u666f\u306e\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9 \u21b4 \u21b4 \u21b4 \u21b4<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
\u30bf\u30a4\u30d72\uff1a<\/mark> \u30dc\u30fc\u30c0\u30fc\u4ed8\u304d\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n
\"\"
\u30bf\u30a4\u30d73\uff1a<\/mark> \u8868\u21b4\u306e\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9<\/a><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n\n

\u30bf\u30a4\u30d71\uff1a\u80cc\u666f\u304c\u8272\u306e\u4ed8\u3044\u305f\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u8ffd\u52a0\u3059\u308b<\/h2>\n\n\n\n

This is a simple-straightforward process. You just have to add a color to the background of the specific paragraph block.<\/p>\n\n\n\n

\u30b9\u30c6\u30c3\u30d71\uff1a\u6295\u7a3f\uff0f\u30da\u30fc\u30b8\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u9078\u629e\u3059\u308b<\/h3>\n\n\n\n

Open the post\/page where you want to add the text box. Select your desired text<\/strong> by placing your cursor on the particular paragraph. <\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

\u30b9\u30c6\u30c3\u30d72\uff1a\u30d6\u30ed\u30c3\u30af\u306e\u80cc\u666f\u306b\u8272\u3092\u52a0\u3048\u308b<\/h3>\n\n\n\n

\u306b\u884c\u304f\u3002 Styles tab,<\/strong> as pointed out in the image below. Click the Background option<\/strong> and select a color. The color will be instantly applied to the block which you can see in real time.<\/p>\n\n\n\n

Once the color is applied around and inside the entire block, it will seem like a box has been created around it, creating a text box.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Thus, you can create a text box with a colored background.<\/p>\n\n\n\n

\n\n\n\n

\u30bf\u30a4\u30d72\uff1a\u30dc\u30fc\u30c0\u30fc\u4ed8\u304d\u30c6\u30ad\u30b9\u30c8\u306e\u8ffd\u52a0<\/h2>\n\n\n\n

Adding borders around the block is another easy to create a text box. Follow the steps explained below.<\/p>\n\n\n\n

\u30b9\u30c6\u30c3\u30d71\uff1a\u30a8\u30c7\u30a3\u30bf\u30fc\u4e0a\u3067\u30c6\u30ad\u30b9\u30c8\u3092\u9078\u629e\u3059\u308b<\/h3>\n\n\n\n

Select a text again by clicking your desired paragraph block as we showed you on the above method.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

\u30b9\u30c6\u30c3\u30d72\uff1a\u30b0\u30eb\u30fc\u30d7\u30d6\u30ed\u30c3\u30af\u306b\u5909\u63db\u3059\u308b<\/h3>\n\n\n\n

By default, the paragraph block doesn\u2019t allow you to add a border around it. So, convert it into the Group block<\/strong>. <\/p>\n\n\n\n

\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3002 Paragraph icon<\/strong> on the Gutenberg toolbar. A list will appear with the Group option at the end. Click the Group option<\/strong> on the list.<\/p>\n\n\n\n

The block will be converted into the Group block.<\/p>\n\n\n\n

\"Convert<\/figure>\n\n\n\n

\u30b9\u30c6\u30c3\u30d73\uff1a\u30d6\u30ed\u30c3\u30af\u306b\u30dc\u30fc\u30c0\u30fc\u3068\u534a\u5f84\u3092\u8ffd\u52a0\u3059\u308b<\/h3>\n\n\n\n

\u306b\u884c\u304f\u3002 \u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong> of the block selected. Scroll down the tab a bit.<\/p>\n\n\n\n

\"Go<\/figure>\n\n\n\n

\u3092\u898b\u308b\u3060\u308d\u3046\u3002 Border option<\/strong>. Place a pixel value to define the border width. You may add radius and padding to the block as well if you want. <\/p>\n\n\n\n

So, your text box is ready. Adding radius and padding can make the text box more presentable. As a result, you can consider adding them.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n
\n\n\n\n

\u30bf\u30a4\u30d73\uff1a\u30c6\u30fc\u30d6\u30eb\u306b\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u8ffd\u52a0\u3059\u308b<\/h2>\n\n\n\n

You may often want to create multiple text boxes in the same row. But it\u2019s not possible with the default paragraph block. However, you can do it easily by creating a table. <\/p>\n\n\n\n

\u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0<\/strong><\/a> is such a table-builder plugin to do so. \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong> \u305d\u3057\u3066 \u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/strong> the plugin and follow the steps shown below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 01: Add the TableBerg Block to Your Site<\/h3>\n\n\n\n

Simply find the \u30c6\u30fc\u30d6\u30eb\u30d0\u30fc\u30b0\u30fb\u30d6\u30ed\u30c3\u30af<\/strong> in the Gutenberg block library and add it to your post\/page editor.<\/p>\n\n\n\n

\"TableBerg\u30d6\u30ed\u30c3\u30af\u3092\u6295\u7a3f\u307e\u305f\u306f\u30da\u30fc\u30b8\u306b\u8ffd\u52a0\u3059\u308b\"<\/figure>\n\n\n\n

Step 02: Create Columns as Required<\/h3>\n\n\n\n

Like the default Gutenberg table, create as many columns as you need<\/strong> on the table.<\/p>\n\n\n\n

\"Create<\/figure>\n\n\n\n

Step 03: Add Content to the Table Columns<\/h3>\n\n\n\n

Although TableBerg allows you to add Lists, CTA buttons, and Images to the table, we have added plain text only to explain the tutorial.<\/p>\n\n\n\n

\"\u30c6\u30fc\u30d6\u30eb\u306b\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8ffd\u52a0\u3059\u308b\"<\/figure>\n\n\n\n

Step 04: Add Colors to the Table Columns<\/h3>\n\n\n\n

Select a column<\/strong> on the table by placing your cursor on it. Go to the \u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>. Click the Background option<\/strong> and select a color. You\u2019ll see the color has been applied to the column.<\/p>\n\n\n\n

\"Colorize<\/figure>\n\n\n\n

Following the same method, apply different types of colors to other columns on the table. You can see we have applied four different colors to the columns of the table. <\/p>\n\n\n\n

So, your text boxes are ready. But if you want to remove the table border, follow the next step.<\/p>\n\n\n\n

\"Apply<\/figure>\n\n\n\n

Step 05: Remove the Table Border<\/h3>\n\n\n\n

Select the entire table by clicking the TableBerg icon twice on the toolbar. Go to the \u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong> on the right sidebar. Scroll down a bit. Toggle off the option \u30a4\u30f3\u30ca\u30fc\u30dc\u30fc\u30c0\u30fc\u3092\u6709\u52b9\u306b\u3059\u308b<\/strong>. The table borders will be invisible.<\/p>\n\n\n\n

\"Remove<\/figure>\n\n\n\n
\n\n\n\n

\u7d50\u8ad6<\/h2>\n\n\n\n

Thus, you can create text boxes in WordPress in various ways. But before concluding, we want to say one thing which is each of these methods may not be effective in all cases. <\/p>\n\n\n\n

Depending on your content type, you must use a suitable method that upholds readability. Let\u2019s share your feedback in the comment box below if you love this post. <\/p>\n\n\n\n

Explore our blog archive<\/a> to learn more interesting articles on WordPress.<\/p>","protected":false},"excerpt":{"rendered":"

A text box is a designated area within the Gutenberg editor where you can craft and publish texts with different typography, font, color, stylization, and other formatting options. When you want to highlight an important announcement, testimonial, or a brief product description, text boxes allow you to do so. In this article, we’ll show you several ways how to create text boxes in WordPress. Type 1: Add a Text Box With a Colored Background This is a simple-straightforward process. You just have to add a color to the background of the specific paragraph block. Step 1: Select a Text on Your Post\/Page Open the post\/page where you want to add […]<\/p>\n","protected":false},"author":1,"featured_media":7081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[38,9,39],"class_list":["post-984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-presentation","tag-tableberg","tag-text-boxes"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Create-Text-Boxes-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"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=984"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":7083,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/984\/revisions\/7083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7081"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}