スラ子
ライムス
WordPressの記事で、結論・注意点・手順・補足を目立たせたいときに便利なのが囲み枠です。
ただし、昔の記事でよくある「HTMLコードを大量に並べて好きなものをコピペしてください」という方法は、今のWordPressでは最初の選択肢とは限りません。現在のブロックエディタでは、グループブロックへ背景・枠線・角丸・余白・影を設定するだけで、コードなしでも実用的な囲み枠を作れます。
この記事では、ブロックエディタだけで作る方法、CSSで共通デザインを作る方法、パターンとして再利用する方法、スマホで崩れにくくする考え方まで一から解説します。
結論｜今は「グループブロック」で囲み枠を作るのが基本
初心者が囲み枠を作るなら、まずはグループブロックを使う方法がおすすめです。
WordPress公式ドキュメントでは、グループブロックに対して背景色、余白、枠線、角丸、影などのスタイル設定が用意されています。使っているテーマによって表示される項目には差がありますが、標準機能だけでもかなり自由に作れます。
- ✓背景色
- ✓枠線の色・太さ・種類
- ✓角丸
- ✓内側の余白
- ✓外側の余白
- ✓影
毎回HTMLを書く必要はありません。まずブロックエディタだけで作ってみて、「同じデザインを何十記事でも使いたい」「サイト全体で完全に統一したい」という段階になったらCSSへ進むと分かりやすいです。
ブロックエディタだけで囲み枠を作る手順
作り方はシンプルです。囲みたい文章や見出しをグループブロックの中へ入れ、右側の設定パネルからスタイルを変えます。
- 01囲みたいブロックを選ぶ段落・見出し・リストなど、ひとまとまりにしたい内容を選びます。
- 02「グループ化」を選ぶ複数ブロックを1つのグループとして扱える状態にします。
- 03背景色と文字色を決める記事全体の配色とぶつからない色を選びます。
- 04枠線と角丸を設定する枠線の色・太さ・スタイル、角丸の大きさを指定します。
- 05内側の余白を入れる文字が枠線に近づきすぎないように余白を確保します。
- 06PCとスマホで表示確認する本文幅・改行・余白が崩れていないか確認します。
WordPress公式では、グループブロックを使うと複数ブロックを1つの単位として扱い、共通の背景色やスタイルを設定できると案内されています。
囲み枠は「役割」でデザインを分ける
囲み枠を増やすときに避けたいのが、色だけ違う似た箱を大量に作ることです。
読者から見ると、「青は何を表すのか」「赤は警告なのか」「黄色は補足なのか」が分からないと、装飾が情報になりません。
| 役割 | 見せ方の例 | 使う場面 |
|---|---|---|
| 結論 | 濃い見出し＋明るい本文面 | 最初に答えを伝える |
| 確認 | チェック形式 | 作業前後の確認項目 |
| 手順 | 番号付きルート | 操作を順番に進める |
| 注意 | 警告色＋キャラクター | 失敗しやすい点 |
| 補足 | 控えめな背景＋短文 | 本文を止めずに補う |
すぐ使える囲み枠CSSの基本形
ブロックエディタだけでも作れますが、同じ囲み枠を多くの記事で使うなら、CSSクラスを用意する方法が便利です。
ここでは、派手なコード集ではなく「何を変えればデザインが変わるか」が分かる最小構成を紹介します。
プレビューとCSSを一緒に見ながら、枠線・背景・角丸・余白の役割を確認できます。
.my-box {
padding: 1.2em;
border: 1px solid #d8e2ec;
border-radius: 12px;
background: #fff;
}.my-box-accent {
padding: 1.2em;
border: 1px solid #d8e2ec;
border-left: 5px solid #c89a32;
border-radius: 12px;
background: #f8fbff;
}.my-box-soft {
padding: 1.2em;
border: 1px solid #e4dcc4;
border-radius: 14px;
background: #fffaf0;
}.my-box-shadow {
padding: 1.2em;
border: 1px solid #d8e2ec;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 22px rgba(10,40,80,.08);
}クラス名を記事側へ付け、CSSをテーマや追加CSS側で管理すれば、後から色や余白を変えるときも一括で変更できます。
枠線・角丸・余白はどう決める？
囲み枠を作るときに迷いやすいのが数値です。最初から細かく調整する必要はありません。本文サイズとのバランスで決めれば十分です。
- 枠線は1〜2pxから試す
- 強い注意だけ左線や上線を太くする
- 角丸は8〜16px程度から試す
- 内側の余白は本文1文字分より広めに取る
- 影は薄くして文章より目立たせすぎない
- 背景色と本文文字のコントラストを確認する
WordPress公式のBorder & Shadow設定では、枠線の幅・色・スタイル・角丸を調整でき、対応ブロックでは影も利用できます。テーマによって利用できる項目が異なるため、編集画面の設定パネルを確認してください。
毎回同じ囲み枠を作るならパターンを使う
同じ囲み枠を何度も作るなら、ブロックを毎回ゼロから作る必要はありません。WordPressではブロックの組み合わせをパターンとして再利用できます。
たとえば「注意ボックス」「結論ボックス」「記事末CTA」のように、同じ構造を何度も使うパーツはパターン化すると制作時間を減らせます。
| 方法 | 向いている使い方 | 特徴 |
|---|---|---|
| 通常ブロック | 1回だけ使う | その記事だけで完結 |
| 非同期パターン | 形だけ再利用したい | 挿入後は各記事で別々に編集できる |
| 同期パターン | 全記事で同じ内容を出したい | 元を変更すると利用箇所へ反映される |
| CSSクラス | 見た目だけ共通化したい | 文章は別でもデザインを一括変更できる |
スラ子
ライムス
スマホ表示で囲み枠が崩れないための考え方
PCではきれいでも、スマホで読むと窮屈になる囲み枠があります。特に左右の余白を大きくしすぎると、本文の横幅が狭くなります。
- ✓左右の余白が広すぎないか
- ✓長いURLやコードが枠外へ出ていないか
- ✓表やボタンを入れたとき横にはみ出さないか
- ✓文字色と背景色の差が十分か
- ✓囲み枠が連続して圧迫感を出していないか
WordPress 7.1以降のブロックテーマでは、対応するスタイル設定について画面サイズごとに値を変えられるレスポンシブスタイルも用意されています。ただし、すべてのテーマ・ブロックで同じように使えるわけではありません。
囲み枠を使いすぎると逆に読みにくくなる
囲み枠が便利だからといって、すべての段落を箱に入れると本文の流れが細切れになります。
囲み枠は「ここだけ見れば意味が分かる」場所に絞って使うのが基本です。
- 結論を先に伝えたい場所
- 作業前後の確認項目
- 間違えると問題が起きる注意点
- 比較すると理解しやすい情報
- 記事を読みながら実行する手順
HTMLを直接書く方法は今でも使える？
もちろん使えます。カスタムHTMLブロックへHTMLを書き、CSSを適用する方法は今でも有効です。
ただし、記事本文へ毎回インラインCSSを大量に書くと、後から全記事のデザインを変えたいときに修正箇所が増えます。
| 方法 | 向いている人 | 運用しやすさ |
|---|---|---|
| ブロック設定 | 初心者 | 編集画面だけで完結しやすい |
| パターン | 同じUIを繰り返す人 | 制作時間を減らしやすい |
| CSSクラス | 複数記事で統一したい人 | 後から一括変更しやすい |
| インラインCSS | 単発の細かな調整 | 大量利用には向きにくい |
長く運営するサイトなら、記事本文にデザインの数値を大量に埋め込むより、CSSクラスや共通UIへ寄せるほうが変更に強くなります。
アドセンスクエストでは「普通の箱」をそのまま使わない
このサイトでは、囲み枠をただの四角い箱として使うのではなく、内容の役割ごとに専用UIを使っています。
- 手順はAQ攻略ルート
- 確認項目はAQチェックUI
- 外部の一次情報はAQ公式情報ナビ
- 内部リンクはAQリンクカード
- 運営経験はライムス実戦メモ
- 注意点は魔王の試練
- 専門用語はアドクエ戦士の用語メモ
見た目を変えること自体が目的ではありません。読者が一目で「これは手順」「これは注意」「これは公式情報」と分かる状態を作ることが目的です。
WordPress全体のデザインも一緒に見直す
囲み枠だけきれいにしても、本文幅、見出し、サイドバー、関連記事、カテゴリーなどがバラバラだとサイト全体の印象は揃いません。
テーマ自体の選び方から確認したい場合は、こちらで現在の判断基準を解説しています。
WordPressサイトをこれから作る段階なら、サーバー・ドメイン・WordPress導入から順番に進められます。
カテゴリーの順番やサイト内の案内も整えたい場合は、こちらの記事も続けて確認できます。
WordPress囲み枠のよくある質問
プラグインがなくても囲み枠は作れますか？
作れます。グループブロックに背景色・枠線・角丸・余白を設定すれば、WordPress標準機能だけでも作成できます。
昔のHTMLコードをそのまま使っても大丈夫ですか？
HTMLとして正しければ表示できます。ただし、古いコードには誤ったCSSや現在のテーマと相性が悪い指定が含まれていることもあります。まずブロック標準機能で実現できないか確認すると安全です。
囲み枠を毎回同じデザインにしたいです
CSSクラスかパターンを使う方法が向いています。見た目だけ揃えるならCSSクラス、構造まで繰り返すならパターンが便利です。
影は付けたほうがいいですか？
必須ではありません。影が強すぎると本文より箱が目立ちます。使う場合は薄くして、他のUIとの統一感を確認してください。
スマホだけ余白を小さくできますか？
テーマやWordPressの対応状況によります。CSSのメディアクエリを使えば画面幅ごとに余白を変えられます。WordPress 7.1以降のブロックテーマでは、一部のスタイルにレスポンシブ設定もあります。
まとめ｜囲み枠は「見た目」より役割を決めて使う
現在のWordPressでは、囲み枠を作るために毎回HTMLコードを貼り付ける必要はありません。グループブロックとスタイル設定だけでも、背景・枠線・角丸・余白・影まで設定できます。
- 最初はグループブロックで作る
- 背景・枠線・角丸・余白を調整する
- 同じ形を繰り返すならパターンを使う
- サイト全体で統一するならCSSクラスを使う
- スマホで余白・横幅・改行を確認する
- 囲み枠は情報の役割ごとに使い分ける
装飾の数を増やすより、「このUIは何を伝えるためのものか」が分かるルールを作ることが大切です。
スラ子
ライムス
まず無料で学びたい人と、 ブログ収益化を本格的に攻略したい人。 今の段階に合わせて選んでください。
ブログ収益化を始めるために、 最初に知っておきたい内容を無料で受け取れます。
- 何から始めればいいか知りたい
- まず無料で情報を確認したい
- ブログ収益化の全体像をつかみたい
ブログとYouTubeのGoogle AdSenseを、 RPGのように段階を追って学ぶための実践講座です。
- キーワード選定から記事作成まで学ぶ
- AIを実際のブログ運営へ活用する
- SEO・専門性・権威性まで育てる
