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

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

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

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

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

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

この記事でわかること

ワードプレスのGutenberg(ブロックエディター)を使って

  • シンプルな囲み枠のボックス
  • 角丸の囲み枠のボックス
  • タイトルつきのボックス
  • タブつきのボックス

といった代表的な装飾ボックスの作成方法を知ることができます。

この基本的な方法を知っておけば、あとはググってCSSをコピペしたりちょこ変するだけでいろいろと応用できるようになります。

※装飾ボックスというと、『カスタムHTMLブロックにHTMLをコピペして使う』という紹介記事が多いですが、文字の入力などボックス内のコンテンツを編集する際カスタムHTMLブロックに直接ベタ打ちする必要があり、非常に記事作成がしにくいです。

そこで本記事では、カスタムHTMLブロックは使用せず、グループブロックを使って編集入力しやすい方法を紹介します。

本記事で紹介するCSSは、2021年8月10日により汎用性のあるものに変更しました。

変更以前のものでも機能しましたが、テーマによってグループブロックにpaddingが初期値設定してある場合に意図した表示にならないことがありました。

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手順1:段落ブロックを準備する

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

段落ブロックを準備

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

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

段落ブロックをグループ化する

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

グループ化された状態

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

リスト表示でブロックの構造を見る

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

段落ブロック単体でも枠線をつけることはできますが、グループブロックに枠線をつけることで、複数の段落や他のブロック(画像やリストなど)も囲み枠の中に入れることができます。

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

ボックスを作成する

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

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

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

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

グループブロックに背景色を設定

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

背景色をつけたボックス

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

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

リストと画像を追加

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

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

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

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

こんなやつです。

角丸ボックス見本

サルワカさんのHTML

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

サルワカさんのCSS

.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はサルワカさんのものをコピペで流用可能です。

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

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

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

追加CSSクラス名kakumaru-boxを設定

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

手順2:カスタムCSSを記述する

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

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

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

記述するCSSコードは以下の通りです。

.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;
}

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

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

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

出来上がった角丸ボックス

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

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

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

・ボックス全体の文字色・背景色
・枠線の種類、太さ、色border: solid 3px #6091d3; を変更)
・枠線の角の丸み
border-radius: 10px;を変更)

※ブロックエディターの編集画面では、ボックスは表示されないかもしれません。

しかし、プレビュー表示やサイト表示させると表示されます。もしそれでも表示されない場合は、キャッシュの可能性が高いので、ブラウザのキャッシュをクリアしてください(CTRL+F5)。

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

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

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

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

サルワカさんと作成角丸ボックスのHTML比較

※グループブロックには、必ずwp-block-group__inner-containerというdiv要素が形成される仕様となっています。

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

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

(class="kakumaru-box"の中のclass="wo-block-group__inner-container"を指定)

コピペして使えるHTML構造

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

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

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

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

こんなボックスです。

めくれたテープ風見本

サルワカさんのHTML

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

サルワカさんのCSS

.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;
}

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

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

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

手順2:カスタムCSSを記述する

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

.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構造のものであれば、同じ要領でコピペして使っていけばよいわけですね。

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

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

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

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

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

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

枠の途中にタイトル(CSSの変更要)

こんなボックスです。

枠の途中にタイトル見本

サルワカさんのHTML

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

サルワカさんのCSS

.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構造は次のようになっています。

タイトル付ボックスのHTML

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

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

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

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

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

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

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

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

手順2:カスタムCSSを記述する

次のようなカスタムCSSを記述します。
サルワカさんのCSSと並べておきますので比べてみてください。

今回記述するCSS

.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;
}

サルワカさんのCSS

.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>要素で追加したのと同じことになります
POINT文字を表示するCSS変更点

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

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

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

先頭に<span>を追加したければ、その親要素にCSSで疑似要素beforeを付加すればよい

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

出来上がったタイトル付ブロック

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

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

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

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

タブ付ボックス見本

サルワカさんのHTML

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

サルワカさんのCSS

.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;
}

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

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

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

手順2:カスタムCSSを記述する

次のようなCSSです。

.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の変更要)

こんなボックスです。

ワイドタブボックス見本

サルワカさんのHTML

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

サルワカさんのCSS

.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構造は次のようになっています。

ワイドタブ付ボックスのHTML

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

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

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

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

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

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

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

手順2:カスタムCSSを記述する

次のようなカスタムCSSを記述します。
サルワカさんのCSSと並べておきますので比べてみてください。

今回記述するCSS

.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;
}

サルワカさんのCSS

.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;を追加記述
ワイドタブのPOINT文字を表示するCSS変更点

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

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

先頭に<div>を追加したければ、その親要素に疑似要素beforeをブロック要素として付加する

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

出来上がったワイドタブ付ブロック

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

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

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

再利用ブロックの使い方

パターン化の方法

まとめ

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

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

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

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

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

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