Webサイト制作所のWordPressテーマには、ブロックエディターで直感的に使える“オリジナル”の「その他」カスタムブロックが揃っています。見出しやボタン、ボックス、ちょっとした装飾まで、ドラッグ＆ドロップで思いどおり。この記事では、よく使う場面やデザインのコツ、時短テクをまとめてご紹介します。
ブロック「メディアとテキスト」のカスタムブロック
画像+テキスト（1）
| 画像とテキスト | 固定位置 |
| テキスト | 背景色・文字色カラーピッカーでカスタム可能 |
フリーランス主夫の開発・販売するWordPressテーマでは、画像にテキストを重ねたコンテンツをマウス操作で簡単作成できます！
画像+テキスト（2）
| 画像とテキスト | 固定位置 |
| テキスト | 背景色・文字色カラーピッカーでカスタム可能 |
フリーランス主夫の開発・販売するWordPressテーマでは、画像にテキストを重ねたコンテンツをマウス操作で簡単作成できます！
テキスト+画像（1）
| 画像とテキスト | 固定位置 |
| テキスト | 背景色・文字色カラーピッカーでカスタム可能 |
フリーランス主夫の開発・販売するWordPressテーマでは、画像にテキストを重ねたコンテンツをマウス操作で簡単作成できます！
テキスト+画像（2）
| 画像とテキスト | 固定位置 |
| テキスト | 背景色・文字色カラーピッカーでカスタム可能 |
フリーランス主夫の開発・販売するWordPressテーマでは、画像にテキストを重ねたコンテンツをマウス操作で簡単作成できます！
メディアとテキストの作成方法
STEP 1 メディアとテキストブロックを呼び出す ブロックエディターの挿入したいところに「メディアとテキスト」ブロックを呼び出します
- 「ブロックを追加」を選択
- 「メディアとテキスト」を選択
STEP 2 メディアとテキストを設定 メディアを挿入しテキストを入力
- メディアを挿入
- テキストを入力
STEP 3 カスタムスタイル メディアとテキストのカスタムスタイルを設定
- カスタムスタイルを選択
- ※テキストの背景色や文字色などはここでは設定しない
STEP 4 テキストのカスタム テキストの背景色や文字色等をカスタマイズ
- テキストの部分をクリック
- テキストの背景色や文字色などをカスタム
- 完了
ブロック「段落（Pタグ）」のカスタムブロック
ノート実線
| 実践 | 変更不可 |
| テキスト | 文字色カラーピッカーでカスタム可能 |
| 背景色 | 変更不可 背景色をカスタムする場合は、ブロック「グループ」の入れ子にして、グループの背景色をカスタム |
フリーランス主夫のWordPressテーマは、ブロック「段落」のカスタムブロックノート（実線）を活用すれば、このような罫線つきのデザインをマウス操作で簡単作成できます。
ノート（実線）のカスタム
こちらは、ブロック「グループ」の中にノート（実線）を入れ子にして、グループの背景色をカスタムしています。ノート（実線）の背景色は変更できないので、ブロック「グループ」の入れ子にする事で色々なカスタムが可能です。
こちらは、ブロック「グループ」のカスタムブロックテープ付きの入れ子にノート実線を実装してみました。
ノート（点線）
| 画像とテキスト | 固定位置（テキストは真ん中） |
| テキスト | 背景色・文字色カラーピッカーでカスタム可能 |
フリーランス主夫のWordPressテーマは、ブロック「段落」のカスタムブロックノート（点線）を活用すれば、このような罫線（点線）つきのデザインをマウス操作で簡単作成できます。
ノート（点線）のカスタム
こちらは、ブロック「グループ」の中にノート（点線）を入れ子にして、グループの背景色をカスタムしています。ノート（点線）の背景色は変更できないので、ブロック「グループ」の入れ子にする事で色々なカスタムが可能です。
こちらは、ブロック「グループ」のカスタムブロックメモ帳の入れ子にノート（点線）を実装してみました。
グループの入れ子で段落を活用する方法
STEP 1 グループブロックを呼び出す ブロックエディターの挿入したいところに「グループ」ブロックを呼び出します
- 「ブロックを追加」を選択
- 「グループ」を選択
STEP 2 グループの中に段落を追加 グループを作成・カスタマイズし段落を追加
- グループのスタイルを設定
- グループの中に「段落」ブロックを追加
STEP 3 段落を設定 段落にテキスト入力をしてカスタマイズ設定
- 段落にテキストを入力
- 段落のカスタマイズ
STEP 4 完成 簡単操作で作成できます！
グループ「黒板」に段落「整える」で作成しています。
カスタムブロックがあれば、プログラミングのスキルが無くても簡単に見栄えの良いコンテンツを作成できます。