ワードプレスGutenbergで装飾ボックス（囲み枠）を作成する方法（枠線つき、タイトルつき、タグつき）

2022年5月25日

読みやすいブログ記事には、必ずといってよいほど装飾ボックス（囲み枠）が使われています。

ブログ用の有料テーマやプラグインには、いろいろな装飾ボックスが準備されていますが、
『他のサイトと似てくるから少し違ったものを使いたい』
『テーマに準備されている色が自分のサイトのトーンと合わないから変えたい』
と思ったりしますよね。

そこで本記事では、ワードプレスのGutenberg（ブロックエディター）で、素敵な装飾ボックスを作成する方法を解説します。

※本記事で紹介のCSSは、ワードプレスversion5.9で導入されたブロックテーマ（Twenty Twenty-Twoなど）やtheme.jsonを使用したテーマでは使えません。theme.jsonを使用しない従来テーマを前提としています。

本記事以外にも、ブロックスタイルでシンプルな枠線ボックスを、ブロックバリエーションでタイトル付ボックスを自作する方法も紹介しています。よかったら参考にしてみてください。CSSについてはある程度理解できている方向けです。

グループブロックにスタイルを追加して枠線をつける方法

既存のグループブロックにスタイルを追加して枠線をつける方法を紹介します。 具体例として下記のよう ...

 https://web-children.com/2022/01/07/block-style-adding-to-gr...

ブロックバリエーションを使ってグループブロックでタイトル付ボックスを作成する方法

ブロックバリエーションという機能を使って、グループブロックでタイトル付ボックスを作成する方法につ ...

 https://web-children.com/2022/01/10/create-title-box-by-bloc...

なお、テーマLuxeritasの場合は次の記事が便利です。

簡単におしゃれなタイトル付ボックスを自作する方法

ワードプレスLuxeritasで簡単におしゃれな装飾ボックス（囲み枠）を自作する方法

読みやすい記事には、必ず装飾ボックス（囲い枠）でアクセントがつけられているものです。 Luxeritasに ...

 https://web-children.com/2021/08/25/original-design-using-lu...

ブロックパターン集をダウンロードして使う方法

記事作成に便利なLuxeritas【すぐに使えるブロックパターン集】を活用しよう！

Luxeritasではversion3.19.0からパターン登録ができるようになりましたが、同時に”すぐに使えるブロッ ...

 https://web-children.com/2021/06/28/luxeritas-block-pattern-...

ブロックエディターで装飾ボックスを作成する４つの方法

ブロックエディターで装飾ボックスを作成する方法としては主に次のようなものがあります。

1. テーマの準備した装飾ボックスを使用する
2. 装飾ボックス用プラグインを使う
3. カスタムHTML＋カスタムCSSを使う
4. 既存ブロック＋カスタムCSSを使う

①に関しては、すでに使用しているテーマに準備されていなければテーマの変更が必要です。

②に関しては、さまざまなプラグインが提案されていますので、また別記事で紹介したいと思います。

③ですが、ググって出てきたHTMLとCSSをコピペして使うならば、これが一番手っ取り早いです。
ただし、HTML形式となってしまうので、テキストや画像といったコンテンツを入力するのにもHTMLの中に書いていく必要があります。

④ですが、カスタムCSSはググってコピペする（または自分で作成）必要がありますが、コンテンツ入力には既存の段落ブロックや画像ブロックなどが使用できるメリットがあります。

そこでこの記事では、④の方法について紹介していきます。

テーマは極力テーマ依存性のでないよう、シンプルなTwenty Seventeenを使います。

カスタムCSSについてよく知らない、という方には次の記事がおすすめです。

もう失敗しない！カスタムCSS使い方とはまるポイントを徹底解説（ワードプレス）

ワードプレスのカスタムCSSを使い方のほか、CSSで特に気をつけたいセレクターの使い方やよくはまる詳細 ...

 https://web-children.com/2020/12/14/custom-css/

既存ブロック＋カスタムCSSで装飾ボックス作成の手順概要

手順概要としては次の通りです。

1. 既存ブロックでボックス作成準備をする
   （具体的にはグループブロックと段落ブロックでボックス雛形を作成します）
2. ①で準備したグループブロックの追加CSSクラスを設定する
3. カスタムCSSを作成（コピペまたは作成）
4. 出来上がったボックスを再利用ブロックに登録またはブロックパターンに登録

上記①～③で装飾ボックスは出来上がりますが、④をしておくといつでも呼び出して使えます。

ここで初心者の方にハードルの高いのは③のカスタムCSSの作成ですが、ググって出てくる記事を参考にすれば簡単です。

本記事では、サルワカさんの記事のカスタムCSSを流用していきます。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイト ...

 https://saruwakakun.com/html-css/reference/box

既存ブロックでボックスを作成する準備

Gutenbergでボックスを作成するために、次の手順で入れ子構造のブロックを作成しておきます。

1. 段落ブロックを準備する（適当にテキストを入れておく）
2. 段落ブロックを選択してグループ化する

こうすることで、グループブロックの中に段落ブロックが入っている入れ子構造となります。

グループ化する準備の具体的手順

手順１：段落ブロックを準備する

次のように、段落ブロックを準備して適当にテキストを入力しておきます。
（この例では『あああ』と入れておきました）

手順２：段落ブロックをグループ化する

段落ブロックを選択した状態で、ツールバー内一番右の3点メニューを開けて”グループ化”をクリックします。

グループ化ができたら、次のようにアイコンがグループブロックに変わって、ブロックも青枠で囲まれます。

これで、アウトラインをクリックしてリスト表示を見ると、グループブロックの中に段落ブロックが入った入れ子構造となっていることが確認できます。

このような構造にしておいて、グループブロックに枠線をつけたりすれば装飾ボックスができあがるというわけです。

注意事項

ワードプレスversion6.0でグループブロックにレイアウト設定機能が追加されましたが、初期設定のまま”グループ”としてください。”横並び”や”縦積み”を選択すると本記事のCSSは適用できません。

グループブロックの詳細な使い方はこちらの記事も参照ください。

ワードプレス　グループブロックが超便利！グループ化だけじゃない活用方法

ワードプレスGutenberg（ブロックエディター）のグループブロックの基本的な使い方～応用方法までを紹 ...

 https://web-children.com/2021/08/13/group-block-of-gutenberg...

ボックスを作成する

それでは、作成したグループブロックを使って装飾ボックスを作成していきましょう。
（グループブロックは複製して使うと毎回作成する手間が省けます。ブロックの複製は、ブロック内ツールバー3点メニューから操作できます。）

背景色で塗ったボックス（カスタムCSS不要）

まずは手始めに、枠線なしのボックスを作成してみましょう。
カスタムCSSは不要です。

①グループブロックを選択（画面右の情報パネル（ブロックタブ）でグループが表示される）
②色設定を開ける
③背景色を設定

サイト表示させると次のようになります。

背景色は好きに設定できますし、段落ブロック以外のブロックも配置できます。

例えば、段落ブロックの下にリストブロックと画像ブロックを追加してみると下記のようなものが簡単に作成できます。

カスタムCSSなしでもこの程度の装飾ボックスは作成可能なのです。
記事の中でうまく使えば十分アクセントになりますよね。

でもここからは、カスタムCSSを使った装飾ボックスを作成していきましょう。

シンプルな枠線ボックス（CSSコピペで可）

サルワカさんの記事のシンプルな囲み枠の”角丸”を作成します。

こんなやつです。

<div class="box2">
    <p>ここに文章</p> 
</div>

.box2 {
    padding: 0.5em 1em; 
    margin: 2em 0; 
    font-weight: bold; 
    color: #6091d3;/*文字色*/ 
    background: #FFF; 
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/ 
} 
.box2 p { 
    margin: 0; padding: 0; 
}

CSSはサルワカさんのものをコピペで流用可能です。

では手順を解説していきます。

手順１：グループブロックに追加CSSクラスを設定する

①準備しておいたグループブロックを選択
（画面右の情報パネル（ブロックタブ）でグループが表示される）
②高度な設定を開ける
③任意のクラス名を入力（今回は”kakumaru-box”としました）

これで、このグループブロックにclass="kakumaru-box"というクラスが付与されました。

手順２：カスタムCSSを記述する

記述場所は、子テーマを使用している場合は子テーマのstyle.cssにします。

WordPressカスタマイズには子テーマを使おう！機能・役割と作成方法

ワードプレスで自分のWebサイトをつくったら、最初はデフォルトのテーマのままでもよいですが、慣れて ...

 https://web-children.com/2020/11/29/child-themes/

子テーマを使用しない場合はテーマの追加CSS欄か、プラグインsimple Custom CSS and JSなどを使うとよいでしょう。

次の記事の中にsimple Custom CSS and JSを使ってカスタムCSSを記述した例があります。

ワードプレス　カバーブロックで画像の縦横比を固定する方法

カバーブロックは画像と文字を重ねるのに便利ですが、元画像のまま表示されるのではなく、表示するデバ ...

 https://web-children.com/2020/10/21/cover-block-image-aspect...

記述するCSSコードは以下の通りです。4行目以降にサルワカさんのCSSを流用しています。

.kakumaru-box {
    padding: 0 !important;
}
.kakumaru-box .wp-block-group__inner-container {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;/*背景色*/
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.kakumaru-box .wp-block-group__inner-container p {
    margin: 0; 
    padding: 0;
}

4行目以降では、サルワカさんのCSSのセレクター部を次のように置き替えてます(理由は後述)。

.box2 ⇒ .kakumaru-box .wp-block-group__inner-container

※.kakumaru-boxと.wp-block-group__inner-containerの間には半角スペースを入れてください。

できあがったボックスをサイト表示すると次の通りです。

ボックス内には、さらに段落ブロックや画像ブロックなどの他のブロックを追加挿入が可能です。

カスタムHTMLブロックで作成したボックスと違って、Gutenbergの編集機能は使えるというわけですね。

ただし装飾ボックスに作成のCSSで表現している部分は除きます。例えば、ボックス全体の背景色はCSSで指定しているので、グループブロックの背景色では指定しないでください（見映えが崩れます）。

したがって次のデザインについてはカスタムCSSの記述を変更して対応してください。

• ボックス内側の余白（padding: 0.5em 1em; を変更）
• ボックス全体の文字色・背景色（文字色はcolor: #6091d3; 背景色はbackground: #FFF; を変更 ）
• 枠線の種類、太さ、色（border: solid 3px #6091d3; を変更）
• 枠線の角の丸み（border-radius: 10px;を変更）

HTML構造比較でセレクター置き替えの理由を確認

このように角丸ボックスについては、セレクターさえ変更すればサルワカさんのCSSをそのままコピペ流用可能です。

そこでHTMLの構造を比較して、コピペ流用可能であることを確認してみましょう。

サルワカさんのHTMLと実際に作成した囲み枠を比較すると、赤の点線部が同じ構造だとわかります。

このことを利用して、セレクターを次のように変更すればHTML共通部を指定できるわけですね。

.box2 ⇒ .kakumaru-box .wp-block-group__inner-container

（class="kakumaru-box"の中のclass="wo-block-group__inner-container"を指定）

HTML構造がこのようなボックスの場合は、CSSをコピペして流用することができる。

実際ググって出てくるほとんどのシンプルな装飾ボックスは、こういったHTML構造となっています。

.kakumaru-box  {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;/*背景色*/
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.kakumaru-box p {
    margin: 0; 
    padding: 0;
}

ではサルワカさんの記事の中から同じHTML構造のものをもう１つコピペして作成してみましょう。

めくれたテープ風のボックス（CSSコピペで可）

こんなボックスです。

<div class="box25">
    <p>ここに文章</p> 
</div>

.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}

手順１：グループブロックに追加CSSクラスを設定する

角丸ボックスと同じ要領でクラス名を付与します。

①グループブロックを選択（画面右の情報パネル（ブロックタブ）でグループが表示される）
②高度な設定を開ける
③任意のクラス名を入力（今回は”taping-box”としました）

手順２：カスタムCSSを記述する

４行目以降は、サルワカさんのCSSのセレクターを.box25から.taping-box .wp-block-group__inner-containerに変更したのみです。

.taping-box {
    padding: 0 !important;
}
.taping-box .wp-block-group__inner-container {
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.taping-box .wp-block-group__inner-container:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.taping-box .wp-block-group__inner-container p {
    margin: 0; 
    padding: 0;
}

これで以下のような装飾ボックスができあがりました。

このように

といったHTML構造のものであれば、同じ要領でコピペして使っていけばよいわけですね。

単純なコピペではできないHTML構造の装飾枠

では、サルワカさん記事の中で単純なコピペではCSSを流用できないボックスを見てみましょう。

ここでは大きく2通りあります。

1. 段落（<p></p>）の前に<span></span>でタイトルをつける
2. 段落（<p></p>）の前に<div></div>でタイトルをつける

順番に紹介していきましょう。

①段落（<p></p>）の前に<span></span>でタイトル

枠の途中にタイトル（CSSの変更要）

こんなボックスです。

<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

今回のHTML構造は次のようになっています。

CSSをコピペ流用できるHTML構造とは違って、新たに<span>要素が<p>要素の前に配置されています。

この場合、準備しておいたグループブロックにも<span>要素を追加しないと同じCSSをコピペして使うことができません。

しかしHTMLの書き換えはカスタムHTMLブロックを使うことになり面倒です。

そこで、CSSで疑似要素でHTMLの<span>要素を代替する手法を使います。

CSSの疑似要素::beforeや::afterを1分で理解する【ワードプレスのカスタマイズ】

ワードプレスをCSSでカスタマイズするとき、よく見るのが::beforeや::afterです。 アイコンなどの装飾 ...

 https://web-children.com/2021/06/19/css-pseudo-element/

具体的に手順を追って説明していきましょう。

手順１：グループブロックに追加CSSクラスを設定する

まずはこれまでと同じ要領で、準備しておいたグループブロックにクラス名を付与します。

①グループブロックを選択（画面右の情報パネル（ブロックタブ）でグループが表示される）
②高度な設定を開ける
③任意のクラス名を入力（今回は”title-box”としました）

手順２：カスタムCSSを記述する

次のようなカスタムCSSを記述します。
サルワカさんのCSSと並べておきますので比べてみてください。
（今回記述するCSSの最初の3行目はパディングゼロ指定の記述なので、4行目以降を比較ください）

.title-box {
    padding: 0 !important;
}
.title-box .wp-block-group__inner-container {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.title-box .wp-block-group__inner-container::before {
    content:"POINT";
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 8px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.title-box .wp-block-group__inner-container p {
    margin: 0; 
    padding: 0;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

クラス名の変更（.box26を.title-box .wp-block-group__inner-containerに変更）以外にも次の変更が必要です。

• <span>要素に相当する.box-titleを疑似要素::beforeに置き替え
• ::before疑似要素で指定したセレクターに適用するCSSプロパティの中にcontent: “POINT";を追加する。
  （これで、POINTという文字を<span>要素で追加したのと同じことになります）

※::beforeの前には半角スペースは入れないでください。

このようにCSSの疑似要素beforeを使用すれば、beforeを付けた要素の頭の子要素として<span></span>を配置したのと同じ効果となるのです。

ちなみにafterという疑似要素を使うと、付加した要素の子要素の最後尾に<span></span>を配置した効果となります。

こうして出来上がったボックスは次の通りです。

※ラベルとなるPOINT文字の背景色にはbackground:#FFF;で白色としていますが、設置するwebのページの背景色が白でない場合は、その背景色に置き替えてください。

ラベルをつけたようなデザイン（CSSの変更要）

同じパターンのHTMLの例としてもうひとつ作成してみましょう。

次のようなタブ付きのボックスです。

<div class="box27">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

手順１：グループブロックに追加CSSクラスを設定する

これまでと同じ要領でクラス名を付与します。

①グループブロックを選択（画面右の情報パネル（ブロックタブ）でグループが表示される）
②高度な設定を開ける
③任意のクラス名を入力（今回は”tab-box”としました）

手順２：カスタムCSSを記述する

次のようなCSSです。

.tab-box {
    padding: 0 !important;
}
.tab-box .wp-block-group__inner-container {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.tab-box .wp-block-group__inner-container::before {
    content:"POINT";
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.tab-box .wp-block-group__inner-container p {
    margin: 0; 
    padding: 0;
}

先ほどのタイトル付きボックスと同様、疑似要素beforeで<span>要素を代替しています。
変更パターンは同じなので、慣れれば簡単ですね。

できあがったボックスは次の通りです。

②段落（<p></p>）の前に<div></div>でタイトル

枠の頭にワイドなタブタイトル（CSSの変更要）

こんなボックスです。

<div class="box29">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

今回のHTML構造は次のようになっています。

先ほどは<span>要素でしたが、今回は<div>要素が<p>要素の前に配置されています。

この場合もCSSの疑似要素を使ってHTMLの<div>要素を代替する手法を使います。

ただし、疑似要素::beforeではインライン要素（<span></span>）として挿入されるので、これをブロック要素（<div></div>）に変換します。

HTMLブロックとインライン要素の違いとは？WPカスタマイズの必須知識

ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを ...

 https://web-children.com/2021/05/23/html-block-and-inline/

具体的に手順を追って説明していきましょう。

手順１：グループブロックに追加CSSクラスを設定する

まずはこれまでと同じ要領で、準備しておいたグループブロックにクラス名を付与します。

①グループブロックを選択（画面右の情報パネル（ブロックタブ）でグループが表示される）
②高度な設定を開ける
③任意のクラス名を入力（今回は”title-box-wide”としました）

手順２：カスタムCSSを記述する

次のようなカスタムCSSを記述します。
サルワカさんのCSSと並べておきますので比べてみてください。
（今回記述するCSSの最初の3行目はパディングゼロ指定の記述なので、4行目以降を比較ください）

.title-box-wide {
    padding: 0 !important;
}
.title-box-wide .wp-block-group__inner-container {
    margin: 2em 0;
    background: #dcefff;
}
.title-box-wide .wp-block-group__inner-container::before {
    content:"POINT";
    display: block;
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.title-box-wide .wp-block-group__inner-container p {
    padding: 15px 20px;
    margin: 0;
}

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

クラス名の変更（.box29を.title-box-wide .wp-block-group__inner-containerに変更）以外にも次の変更が必要です。

• <div>要素に相当する.box-titleを疑似要素::beforeに置き替え
• ::before疑似要素で指定したセレクターに適用するCSSプロパティの中にcontent: “POINT";を追加する。
  （これで、POINTという文字を<span>要素で追加したのと同じことになります）
• さらに::before疑似要素をブロック要素に変更するためにdisplay:block;を追加記述

※::beforeの前には半角スペースは入れないでください。

このようにCSSの疑似要素beforeで<div>要素を代替するためには、display:block;でブロック要素に変換する必要があります。

こうして出来上がったボックスは次の通りです。

出来上がった装飾ボックスは再利用ブロック化またはパターン化する

できあがった装飾ボックスを今後記事の作成に使用するためにも、再利用ブロックに登録したり、さらにパターン化しておけば便利です。

実際私もよく使うボックスはパターン化していつでも呼び出せるようにしています。

再利用ブロックの使い方

WordPress再利用ブロックで効率よく記事を書こう！特徴（メリット）と便利な使い方・

ワードプレスのブロックエディターには、従来のクラシックエディターにはない機能がたくさんあります。 ...

 https://web-children.com/2019/11/29/reuse-block-in-wordpress...

パターン化の方法

WordPress再利用ブロックをパターンに登録してテンプレ化する方法（再利用ブロックの

ワードプレスの再利用ブロックは、私もブログ記事を書く上で重宝していますが不便な点もあります。 そ ...

 https://web-children.com/2021/04/12/reusable-blocks-extended...

まとめ

ブロックエディターとカスタムCSSで装飾ボックスを作成する方法を解説してきました。

ざっとまとめると次の通りです。

1. グループブロックの中に段落ブロックの入った入れ子構造を準備しておく
2. グループブロックに直接背景色などを設定するだけでも簡単なボックスができる
3. グループブロックに追加CSSクラス名を付与してカスタムCSSを適用する
4. シンプルな枠線ボックス等ではググったカスタムCSSを直接コピペ流用できる
5. コピペ流用できないHTML構造の場合はCSSの疑似要素をうまく使うとよい
6. できあがった装飾ボックスは再利用ブロックに登録またはパターン化して利用しよう

本記事はカスタムCSSを利用しただけですが、ブロックスタイルやブロックバリエーションでブロックを直接カスタマイズして装飾ボックスを作成したい場合は、次の記事がおすすめです。

グループブロックにスタイルを追加して枠線をつける方法

既存のグループブロックにスタイルを追加して枠線をつける方法を紹介します。 具体例として下記のよう ...

 https://web-children.com/2022/01/07/block-style-adding-to-gr...

ブロックバリエーションを使ってグループブロックでタイトル付ボックスを作成する方法

ブロックバリエーションという機能を使って、グループブロックでタイトル付ボックスを作成する方法につ ...

 https://web-children.com/2022/01/10/create-title-box-by-bloc...

ワードプレスの始め方
～稼ぐためのしくみづくりまでを
徹底解説！！

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

詳細はこちら

amazonでたった１コインで手に入れる