WordPressでテキストボックスを作成する方法(3種類)

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.

美しいテーブルを作る
ブロックエディター付き

タイプ1:背景色の付いたテキストボックスを追加する

This is a simple-straightforward process. You just have to add a color to the background of the specific paragraph block.

Step 01: Select a Text on Your Post/Page

Open the post/page where you want to add the text box. Select your desired text by placing your cursor on the particular paragraph.

Select a text on your post/page to create a box around it

Step 02: Add a Color to the Background of the Block

に行く。 Styles tab, as pointed out in the image below. Click the Background option and select a color. The color will be instantly applied to the block which you can see in real time.

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.

Add a color to the background of the block to a box around it

Thus, you can create a text box with a colored background.


タイプ2:ボーダー付きテキストの追加

Adding borders around the block is another easy to create a text box. Follow the steps explained below.

Step 01: Select the Text on the Editor

Select a text again by clicking your desired paragraph block as we showed you on the above method.

Select a paragraph block to add border around it

Step 02: Convert It into the Ground Block

By default, the paragraph block doesn’t allow you to add a border around it. So, convert it into the Group block.

をクリックする。 Paragraph icon on the Gutenberg toolbar. A list will appear with the Group option at the end. Click the Group option on the list.

The block will be converted into the Group block.

Convert the Paragraph block into the Group block

Step 03: Add Border and Radius to the Block

に行く。 スタイルタブ of the block selected. Scroll down the tab a bit.

Go to the Styles tab of the Group block

を見るだろう。 Border option. Place a pixel value to define the border width. You may add radius and padding to the block as well if you want.

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.

Add border, radius, and padding to the Group block to create a text box

タイプ 3:テーブルにテキストボックスを追加する

You may often want to create multiple text boxes in the same row. But it’s not possible with the default paragraph block. However, you can do it easily by creating a table.

テーブルバーグ is such a table-builder plugin to do so. インストール そして アクティブ化 the plugin and follow the steps shown below.

TableBergプラグインをインストールして有効化する

Step 01: Add the TableBerg Block to Your Site

Simply find the テーブルバーグ・ブロック in the Gutenberg block library and add it to your post/page editor.

TableBergブロックを投稿またはページに追加する

Step 02: Create Columns as Required

Like the default Gutenberg table, create as many columns as you need on the table.

Create columns as you need

Step 03: Add Content to the Table Columns

Although TableBerg allows you to add Lists, CTA buttons, and Images to the table, we have added plain text only to explain the tutorial.

テーブルにコンテンツを追加する

Step 04: Add Colors to the Table Columns

Select a column on the table by placing your cursor on it. Go to the スタイルタブ. Click the Background option and select a color. You’ll see the color has been applied to the column.

Colorize the table columns with the TableBerg plugin

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.

So, your text boxes are ready. But if you want to remove the table border, follow the next step.

Apply different colors to the table columns

Step 05: Remove the Table Border

Select the entire table by clicking the TableBerg icon twice on the toolbar. Go to the スタイルタブ on the right sidebar. Scroll down a bit. Toggle off the option インナーボーダーを有効にする. The table borders will be invisible.

Remove the table borders

結論

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.

Depending on your content type, you must use a suitable method that upholds readability. Let’s share your feedback in the comment box below if you love this post.

Explore our blog archive to learn more interesting articles on WordPress.



テーブルバーグ・チーム

早割キャンペーン実施中
これは通知バーのデフォルトテキストです。