ワードプレスで枠線を付ける方法｜初心者向けに囲み枠・画像・表の設定を解説
はじめに
ワードプレスの記事を読みやすくするには、重要な文章や画像、表などに枠線を付ける方法が効果的です。枠線を使うと情報のまとまりが一目でわかり、注意点や補足情報も目立たせやすくなります。
ワードプレスで枠線を付ける方法は、大きく分けて次の2つです。
ブロックやテーマの設定機能を使う方法
CSSを追加してデザインする方法
初心者の方は、まずCSSを使わない方法から試すのがおすすめです。細かな色や太さ、点線、角丸などを自由に調整したい場合は、追加CSSを利用しましょう。
この記事では、囲み枠だけでなく、画像や表に枠線を付ける方法も具体的なCSSコード付きで解説します。
1. ワードプレスで枠線を付ける方法の基本
1-1. 枠線を付けられる場所は「囲み枠・画像・表・ボタン」など
ワードプレスでは、さまざまな要素に枠線を付けられます。
代表的な使用場所は次のとおりです。
文章をまとめた囲み枠
投稿内に挿入した画像
テーブルブロックで作成した表
リンク用のボタン
引用文
注意書きや補足情報
見出し
カラムやグループブロック
たとえば、文章を囲み枠に入れると、通常の本文と重要な情報を区別できます。画像に薄い枠線を付ければ、白い背景の画像でも表示範囲がわかりやすくなります。
ただし、すべての要素に枠線を付けると画面がごちゃごちゃしてしまいます。強調したい場所を絞って使用することが重要です。
1-2. ブロックエディターとクラシックエディターで設定方法が異なる
ワードプレスの編集画面には、主にブロックエディターとクラシックエディターがあります。
現在の標準であるブロックエディターでは、文章や画像、表などを「ブロック」として扱います。各ブロックの設定画面から、色、余白、枠線、角丸などを調整できる場合があります。ワードプレスではバージョン5.0以降、ブロックエディターが標準の編集方式になっています。WordPress.org
クラシックエディターでは、ツールバーだけで囲み枠を細かく設定するのは困難です。基本的には、テキスト編集画面でHTMLを入力し、CSSで枠線を指定します。
クラシックエディターで囲み枠を作るHTMLの例は次のとおりです。
HTML<div class="simple-box">
ここに囲み枠内の文章を入力します。
</div>
このHTMLに対応するCSSを追加することで、枠線を表示できます。
1-3. CSSを使う方法と使わない方法の違い
CSSを使わない方法は、設定が簡単で、コードを間違える心配が少ない点がメリットです。ブロックエディターの設定やテーマ標準機能を使えば、初心者でも視覚的に操作できます。
一方、CSSを使う方法では、次の項目を細かく設定できます。
枠線の色
枠線の太さ
実線、点線、二重線
角丸の大きさ
内側の余白
外側の余白
背景色
影
スマホ表示時のデザイン
簡単な囲み枠であれば、ブロックの設定だけでも十分です。サイト全体で同じデザインを使いたい場合や、画像と表の枠線を統一したい場合は、CSSを使うと効率的です。
2. 初心者向け｜CSSなしで囲み枠を作る方法
2-1. ブロックエディターの「グループ」ブロックで枠線を付ける
ブロックエディターでは、「グループ」ブロックを使って複数の文章をまとめられます。
基本的な手順は次のとおりです。
投稿または固定ページの編集画面を開く
「＋」をクリックしてブロック追加画面を開く
「グループ」と検索する
グループブロックを追加する
グループ内に段落や見出しを入れる
グループブロック全体を選択する
右側の設定パネルで「スタイル」または「枠線」を開く
枠線の色や太さを設定する
グループブロックでは、利用環境に応じて枠線の色、幅、スタイル、角丸を設定できます。また、余白を調整するための寸法設定も用意されています。WordPress.org
設定項目が見つからない場合は、右上の設定アイコンをクリックし、「ブロック」タブが選択されているか確認してください。使用中のテーマによって、表示される設定項目が異なることもあります。
2-2. 「背景色」「余白」「角丸」を設定して見やすい囲み枠にする
枠線を付けるだけでは、文章と線が近すぎて窮屈に見えることがあります。見やすい囲み枠を作るには、背景色、余白、角丸も一緒に設定しましょう。
おすすめの設定例は次のとおりです。
枠線の太さ：1～2px
内側の余白：16～24px
角丸：6～12px
背景色：白または薄い色
外側の余白：上下24px程度
内側の余白は、枠線と文章の間隔です。余白がないと文字が枠線に接近し、読みにくくなります。
角丸を設定すると、囲み枠の印象が柔らかくなります。ワードプレスの枠線設定では、角丸の値をpxや％、em、remなどの単位で指定できる環境があります。WordPress.org
背景色を付ける場合は、原色に近い濃い色よりも、薄いグレーや薄い青、薄い黄色などを選ぶと本文になじみやすくなります。
2-3. テーマ標準の装飾ブロック・囲み枠機能を使う方法
ワードプレステーマによっては、独自の囲み枠や装飾ブロックが用意されています。
たとえば、次のような装飾です。
ポイントボックス
注意ボックス
補足ボックス
アイコン付きボックス
タイトル付き囲み枠
吹き出し
FAQボックス
テーマ標準の機能を使うメリットは、サイト全体のデザインと統一しやすいことです。また、テーマ側でスマホ表示も調整されているケースが多いため、CSSを自分で書くより簡単に導入できます。
使用できる装飾はテーマによって異なります。ブロック追加画面で、使用中のテーマ名や「ボックス」「囲み」「装飾」などのキーワードを検索してみましょう。
テーマの公式マニュアルに、独自ブロックの使い方が掲載されている場合もあります。
2-4. プラグインで囲み枠デザインを追加する方法
使用中のテーマに囲み枠機能がない場合は、ブロック拡張プラグインを利用する方法もあります。
ブロック拡張プラグインを導入すると、次のような機能を追加できる場合があります。
複数種類の囲み枠
アイコン付きの注意書き
タイトル付きボックス
枠線や背景色の詳細設定
影やグラデーション
レスポンシブ設定
導入手順は次のとおりです。
管理画面の「プラグイン」を開く
「新規プラグインを追加」を選択する
ブロック拡張プラグインを検索する
「今すぐインストール」をクリックする
インストール後に「有効化」をクリックする
投稿編集画面で追加されたブロックを確認する
プラグインは便利ですが、複数のブロック拡張プラグインを入れると、似た機能が重複することがあります。必要な機能を確認し、導入数を増やしすぎないようにしましょう。
3. CSSで囲み枠を自由にカスタマイズする方法
3-1. 追加CSSを入力する場所
CSSを追加する場所は、使用しているテーマの種類によって異なります。
クラシックテーマでは、一般的に次の場所から入力します。
「外観」→「カスタマイズ」→「追加CSS」
ブロックテーマでは、次の場所から追加できる環境があります。
「外観」→「エディター」→「スタイル」→右上の3点メニュー→「追加CSS」
サイトエディターのスタイル画面には、サイト全体に適用する追加CSSと、特定のブロック種類に適用する追加ブロックCSSがあります。WordPress.org
なお、追加CSSは基本的に使用中のテーマと関連付けられます。テーマを変更すると、以前のテーマで入力したCSSが新しいテーマにそのまま適用されないことがあります。WordPress Developer Resources
CSSを編集する前に、入力済みのコードをメモ帳などへコピーして保存しておくと安心です。
3-2. 基本の枠線CSS「border」の書き方
CSSで枠線を設定するときは、borderを使用します。
基本形は次のとおりです。
CSS.simple-box {
border: 1px solid #333333;
}
borderには、左から順に次の内容を指定しています。
CSSborder: 太さ 線の種類 色;
上記のコードでは、1pxの黒に近い実線が表示されます。
実際に文章を読みやすくするには、余白も追加しましょう。
CSS.simple-box {
border: 1px solid #333333;
padding: 20px;
margin: 24px 0;
}
投稿編集画面では、枠線を付けたいグループブロックを選択し、「高度な設定」内の「追加CSSクラス」に次のクラス名を入力します。
simple-box
追加CSSクラスの入力欄には、先頭のピリオドを付けません。CSS側では.simple-box、編集画面ではsimple-boxと入力します。追加CSSクラスを設定すると、対象ブロックに独自のCSSを適用できます。WordPress.org
3-3. 実線・点線・二重線など枠線デザインの変更方法
枠線の種類は、border-styleに相当する値で変更できます。
実線はsolidです。
CSS.solid-box {
border: 2px solid #555555;
}
点線はdottedです。
CSS.dotted-box {
border: 2px dotted #555555;
}
破線はdashedです。
CSS.dashed-box {
border: 2px dashed #555555;
}
二重線はdoubleです。
CSS.double-box {
border: 4px double #555555;
}
二重線は線が細すぎると二重に見えにくいため、3px以上を目安に設定します。
上下左右の一部分だけに線を付けることも可能です。
CSS.left-border-box {
border-left: 5px solid #2f6fed;
padding: 16px 20px;
}
左側だけに太い線を付けるデザインは、ポイントや補足情報の表示に向いています。
3-4. 枠線の色・太さ・角丸・余白を調整する方法
枠線を細かく調整するときは、次のプロパティを使います。
CSS.custom-box {
border: 2px solid #4b74c6;
border-radius: 10px;
padding: 20px;
margin: 24px 0;
background-color: #f5f8ff;
}
それぞれの役割は次のとおりです。
border：枠線の太さ、種類、色border-radius：角丸padding：枠線の内側に設ける余白margin：枠線の外側に設ける余白background-color：背景色
上下左右の余白を個別に設定する場合は、4つの値を指定します。
CSS.custom-box {
padding: 16px 20px 16px 20px;
}
値の順番は、上、右、下、左です。
枠線の色を決めるときは、サイトで使用しているメインカラーやリンクカラーに合わせると、デザインを統一しやすくなります。
3-5. 特定のブロックだけに枠線を付ける方法
特定のブロックだけに枠線を付けるには、「追加CSSクラス」を使います。
たとえば、注意書き用のクラスを作成します。
CSS.notice-box {
border: 2px solid #d94848;
background-color: #fff5f5;
border-radius: 8px;
padding: 20px;
margin: 24px 0;
}
次に、枠線を付けたいグループブロックを選び、「高度な設定」→「追加CSSクラス」に次の文字を入力します。
notice-box
これで、そのクラスを設定したブロックだけに赤い枠線が表示されます。
同じCSSクラスを別のブロックにも入力すれば、同じデザインを繰り返し使用できます。
4. ワードプレスで画像に枠線を付ける方法
4-1. 画像ブロックの設定で枠線を付ける方法
画像ブロックの右側に「枠線」の設定が表示されている場合は、CSSを使わずに設定できます。
手順は次のとおりです。
投稿編集画面で画像を選択する
右上の設定アイコンをクリックする
「ブロック」タブを開く
「スタイル」または「枠線」を開く
枠線の色や太さを設定する
必要に応じて角丸を設定する
画像ブロックで利用できるスタイルは、テーマによって異なります。標準や角丸などのスタイルが表示される場合があります。WordPress.org
枠線の項目が表示されない場合は、追加CSSを使用してください。
4-2. 追加CSSで画像全体に枠線を付ける方法
記事内にある画像へ一括で枠線を付ける場合は、画像ブロックを対象にCSSを指定します。
CSS.wp-block-image img {
border: 1px solid #dddddd;
}
このコードを追加すると、画像ブロック内の画像に1pxの薄い枠線が表示されます。
角丸も付ける場合は、次のように記述します。
CSS.wp-block-image img {
border: 1px solid #dddddd;
border-radius: 8px;
}
ただし、この指定では記事内の多くの画像に枠線が適用されます。写真には枠線を付けず、操作画面のスクリーンショットだけに付けたい場合は、特定の画像にCSSクラスを設定する方法が適しています。
4-3. 特定の画像だけに枠線を付ける方法
特定の画像だけに枠線を付ける場合は、画像ブロックに独自のCSSクラスを設定します。
追加するCSSは次のとおりです。
CSS.border-image img {
border: 2px solid #cccccc;
border-radius: 6px;
}
枠線を付けたい画像ブロックを選択し、「高度な設定」→「追加CSSクラス」に次の文字を入力します。
border-image
この方法なら、必要な画像だけに枠線を適用できます。
枠線と画像の間に余白を入れたい場合は、paddingと背景色も設定します。
CSS.border-image img {
border: 1px solid #cccccc;
padding: 5px;
background-color: #ffffff;
}
4-4. 画像に影を付けて見やすくする方法
白い背景の画像は、記事の背景と境界がわかりにくいことがあります。その場合は、枠線と一緒に薄い影を付けると見やすくなります。
CSS.shadow-image img {
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
box-shadowの4つの値は、横方向の位置、縦方向の位置、ぼかしの大きさ、影の色を表します。
影を濃くしすぎると画像が浮いて見えるため、透明度は低めに設定するのがおすすめです。
より控えめな影にする場合は、次のようにします。
CSS.shadow-image img {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
4-5. 画像の枠線が表示されない・ぼやけるときの対処法
画像の枠線が表示されない場合は、次の項目を確認します。
CSSクラス名が一致しているか
画像ではなく画像ブロックにクラスを設定しているか
CSSの波括弧やセミコロンが抜けていないか
キャッシュが残っていないか
テーマのCSSに上書きされていないか
テーマの指定が強く、枠線が反映されない場合は、セレクターを具体的にします。
CSS.entry-content .border-image img {
border: 2px solid #cccccc;
}
1pxの枠線がぼやけて見える場合は、画像や親要素に拡大・縮小の指定がないか確認してください。ブラウザの表示倍率によって見え方が変わる場合もあります。
また、画像そのものに白い余白が含まれていると、枠線と画像本体の間が広く見えます。この場合は、画像編集ソフトなどで元画像の余白を削除する必要があります。
5. ワードプレスで表に枠線を付ける方法
5-1. テーブルブロックで表を作成する方法
ブロックエディターでは、テーブルブロックを使って表を作成できます。
手順は次のとおりです。
投稿編集画面で「＋」をクリックする
「テーブル」と検索する
テーブルブロックを選択する
列数と行数を入力する
「表を作成」をクリックする
各セルに内容を入力する
作成後は、ツールバーから行や列を追加・削除できます。テーブルブロックには、列幅をそろえる設定や、標準・ストライプなどのスタイルも用意されています。最終的な見た目はテーマによって異なります。WordPress.org
5-2. 表の外枠・セルごとの枠線を表示する方法
テーマによっては、テーブルブロックを追加した時点でセルに枠線が表示されます。
表示されない場合は、次のCSSを追加します。
CSS.wp-block-table table {
width: 100%;
border-collapse: collapse;
border: 2px solid #666666;
}
.wp-block-table th,
.wp-block-table td {
border: 1px solid #cccccc;
padding: 12px;
}
tableに指定した線が表全体の外枠です。thとtdに指定した線が各セルの枠線です。
border-collapse: collapse;を設定すると、隣り合うセルの枠線が重ならず、1本の線として表示されます。
5-3. 枠線の色や太さをCSSで変更する方法
表の外枠だけを太くする場合は、次のように指定します。
CSS.wp-block-table table {
border: 3px solid #333333;
border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
border: 1px solid #aaaaaa;
}
見出しセルの背景色も変更すると、表の内容を理解しやすくなります。
CSS.wp-block-table th {
background-color: #f2f4f7;
font-weight: 700;
}
特定の表だけにデザインを適用する場合は、テーブルブロックにcustom-tableという追加CSSクラスを設定します。
CSS.custom-table table {
border: 3px solid #315b96;
border-collapse: collapse;
}
.custom-table th,
.custom-table td {
border: 1px solid #9eb3d0;
padding: 12px;
}
5-4. スマホ表示でも崩れにくい表の作り方
列数が多い表は、スマホ画面では横幅に収まらないことがあります。無理に縮小すると文字が読みにくくなるため、横スクロールできるように設定すると便利です。
CSS.wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wp-block-table table {
min-width: 600px;
}
ただし、2～3列程度の簡単な表にmin-widthを設定すると、不要な横スクロールが発生する場合があります。列数や内容に応じて調整してください。
スマホで見やすい表にするポイントは次のとおりです。
列数を増やしすぎない
長い文章をセル内に入れない
余白を広くしすぎない
文字サイズを小さくしすぎない
実機または開発者ツールで確認する
スマホ向けに余白を小さくする場合は、メディアクエリを使用します。
CSS@media screen and (max-width: 768px) {
.wp-block-table th,
.wp-block-table td {
padding: 8px;
}
}
5-5. 表の枠線が消える原因と対処法
表の枠線が消える主な原因は、テーマ側のCSSでborder: none;が指定されていることです。
まず、次のように対象を具体的に指定します。
CSS.entry-content .wp-block-table table,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
border-style: solid;
}
それでも反映されない場合は、色と太さも明示します。
CSS.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
border: 1px solid #cccccc;
}
ほかにも、次の原因が考えられます。
CSSのクラス名が間違っている
編集画面だけを確認している
キャッシュが残っている
別のプラグインが表のデザインを変更している
テーマ側の指定がCSSより優先されている
編集画面と公開ページでは、適用されるCSSが異なる場合があります。必ずプレビューまたは公開ページでも確認しましょう。
6. 枠線デザインの具体例
6-1. シンプルな囲み枠
本文になじみやすい、基本的な囲み枠です。
CSS.simple-box {
border: 1px solid #cccccc;
padding: 20px;
margin: 24px 0;
background-color: #ffffff;
}
説明文、引用ではない補足、手順のまとめなど、幅広い用途に使えます。
6-2. 注意書きに使える目立つ囲み枠
重要な注意点には、赤やオレンジ系の枠線が適しています。
CSS.warning-box {
border: 2px solid #d64545;
border-radius: 8px;
padding: 20px;
margin: 24px 0;
background-color: #fff4f4;
}
注意書きの冒頭を太字にすると、内容がさらに伝わりやすくなります。
HTML<strong>注意：</strong>CSSを変更する前に、現在のコードを保存してください。
6-3. 補足・ポイントに使える薄い色の囲み枠
補足情報には、主張が強すぎない薄い背景色を使います。
CSS.point-box {
border-left: 5px solid #4d78c9;
padding: 16px 20px;
margin: 24px 0;
background-color: #f3f7ff;
}
左側だけに太い線を付けることで、通常の囲み枠よりも軽い印象になります。
6-4. 角丸のおしゃれな囲み枠
柔らかい雰囲気のブログには、角丸と薄い影を組み合わせたデザインが向いています。
CSS.round-box {
border: 1px solid #d8dce3;
border-radius: 14px;
padding: 22px;
margin: 24px 0;
background-color: #ffffff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
角丸を大きくしすぎると、サイト全体の雰囲気と合わない場合があります。ボタンや画像の角丸と同程度にそろえると統一感が生まれます。
6-5. 点線・二重線を使った装飾枠
親しみやすい雰囲気を出す場合は、点線が使えます。
CSS.dotted-box {
border: 2px dotted #78909c;
border-radius: 8px;
padding: 20px;
margin: 24px 0;
background-color: #fafafa;
}
情報をしっかり区切りたい場合は、二重線も効果的です。
CSS.double-box {
border: 4px double #607d8b;
padding: 20px;
margin: 24px 0;
background-color: #ffffff;
}
点線や二重線は装飾性が高いため、記事内で多用せず、特定の用途に限定しましょう。
7. ワードプレスで枠線を付けるときの注意点
7-1. デザインを統一して読みやすくする
囲み枠ごとに色や線の種類が異なると、読者が意味を判断しにくくなります。
たとえば、次のように用途を決めておくと効果的です。
青色：ポイント
赤色：注意
黄色：補足
グレー：一般的なまとめ
同じ役割の囲み枠には、同じCSSクラスを使いましょう。記事ごとにデザインを作り直すよりも、サイト全体に統一感が生まれます。
7-2. 枠線を使いすぎない
すべての段落を囲むと、どこが重要なのかわからなくなります。また、枠線が多いページは視線が細かく分断され、読みにくくなることがあります。
囲み枠は、次のような情報に絞るのがおすすめです。
結論
注意事項
操作手順
要点のまとめ
読者が見落としやすい補足
通常の説明文は囲まず、余白や見出しで整理しましょう。
7-3. スマホ表示を必ず確認する
パソコンで見やすい囲み枠でも、スマホでは内側の余白が広すぎる場合があります。特に、枠線の内側にさらにリストや画像、表を入れると、表示領域が狭くなります。
スマホだけ余白を小さくする例は次のとおりです。
CSS@media screen and (max-width: 768px) {
.simple-box,
.warning-box,
.point-box {
padding: 14px;
margin: 20px 0;
}
}
横幅を固定値で指定するのは避け、基本的には親要素に合わせて表示されるようにします。
CSS.simple-box {
width: 100%;
box-sizing: border-box;
}
box-sizing: border-box;を指定すると、枠線と余白を含めて横幅が計算されるため、はみ出しを防ぎやすくなります。
7-4. テーマ更新でCSSが消えないようにする
テーマのCSSファイルを直接編集すると、テーマ更新時に変更内容が上書きされる可能性があります。
CSSは、次のいずれかに保存しましょう。
ワードプレスの追加CSS
子テーマのスタイルシート
カスタムCSSを管理できる機能
ブロックテーマのスタイル画面
テーマファイルを直接編集する場合は、子テーマを利用するのが基本です。
また、追加CSSはテーマと関連付けられるため、テーマ変更時にはコードを移行できるよう、別の場所にもバックアップしておきましょう。
7-5. 文字色・背景色とのコントラストに注意する
背景色と文字色が近いと、文章が読みにくくなります。
たとえば、薄い黄色の背景に白い文字を使用すると、十分なコントラストを確保できません。薄い背景色には、黒や濃いグレーの文字を合わせるのが基本です。
枠線についても、背景色と同化するほど薄い色では区切りがわかりません。一方で、黒く太い枠線を多用すると圧迫感が出ます。
実際の公開ページをパソコンとスマホの両方で確認し、文字と背景、枠線の境界が無理なく認識できるか確認してください。
8. 枠線がうまく表示されないときの原因と解決策
8-1. CSSの記述ミスを確認する
CSSが反映されない場合は、最初に記述ミスを確認します。
よくある間違いは次のとおりです。
波括弧が閉じられていない
セミコロンが抜けている
クラス名の先頭にピリオドがない
全角記号が混ざっている
プロパティ名のスペルが違う
正しい記述例は次のとおりです。
CSS.sample-box {
border: 1px solid #cccccc;
padding: 20px;
}
次のように波括弧が閉じられていないと、それ以降のCSSにも影響する可能性があります。
CSS.sample-box {
border: 1px solid #cccccc;
padding: 20px;
追加した箇所だけでなく、直前に入力したCSSも確認しましょう。
8-2. キャッシュを削除して表示を確認する
CSSを変更しても、ブラウザやキャッシュ機能に古いデータが残っていると、変更前のデザインが表示されることがあります。
次の順番で確認します。
ページを再読み込みする
強制再読み込みを行う
ブラウザのキャッシュを削除する
キャッシュ系プラグインのキャッシュを削除する
サーバー側のキャッシュを削除する
CDNを使用している場合はCDNキャッシュも確認する
シークレットウィンドウや別のブラウザでページを開く方法も有効です。
8-3. テーマやプラグインのCSSが影響している場合
テーマやプラグインのCSSが、追加した枠線の設定を上書きしていることがあります。
たとえば、テーマ側で次の指定がある場合です。
CSS.wp-block-image img {
border: none;
}
独自クラスを使って、より具体的に指定します。
CSS.entry-content .border-image img {
border: 2px solid #cccccc;
}
CSSは、基本的に対象の指定が具体的なルールほど優先されやすくなります。
どうしても上書きできない場合は、原因を確認したうえで!importantを使う方法もあります。
CSS.border-image img {
border: 2px solid #cccccc !important;
}
ただし、!importantを多用すると後から修正しにくくなるため、最後の手段として使用しましょう。
8-4. 追加CSSクラス名の入力ミスを確認する
CSS側とブロック側でクラス名が一致している必要があります。
CSS側が次の場合、
CSS.notice-box {
border: 2px solid #d64545;
}
ブロックの追加CSSクラスには、次のように入力します。
notice-box
次のようにピリオドを付けて入力するのは誤りです。
.notice-box
また、notice_boxとnotice-boxは別のクラス名です。半角スペースや全角文字が混ざっていないかも確認してください。
複数のクラスを入力する場合は、半角スペースで区切ります。
notice-box shadow-box
8-5. ブロックごとの設定が反映されない場合
ブロック設定で枠線を指定しても反映されない場合は、次の点を確認します。
親ブロックではなく対象ブロックを選択しているか
投稿を保存または更新したか
編集画面だけでなく公開画面を確認したか
テーマが該当する設定に対応しているか
スタイル設定が別のルールで上書きされていないか
複数のブロックを囲んでいる場合は、段落ではなくグループブロック全体を選択する必要があります。
左上の「ドキュメント概観」やリストビューを開くと、グループとその内側にある段落の関係を確認しやすくなります。
9. ワードプレスの枠線に関するよくある質問
9-1. CSSがわからなくても枠線は付けられる？
ブロックエディターのグループブロックや、テーマ標準の囲み枠機能を使えば、CSSがわからなくても枠線を付けられます。
グループブロックを選択し、右側の設定パネルに「枠線」が表示されているか確認してください。
設定項目がない場合は、装飾ブロックを備えたテーマやブロック拡張プラグインを利用する方法があります。
9-2. 記事内の一部分だけ枠線で囲める？
記事内の一部分だけを囲むことも可能です。
ブロックエディターでは、囲みたい段落や見出しをグループ化し、そのグループブロックに枠線を設定します。
CSSを使う場合は、対象のグループブロックに独自の追加CSSクラスを設定してください。
CSS.partial-box {
border: 1px solid #cccccc;
padding: 20px;
}
ブロック側にはpartial-boxと入力します。
9-3. 画像すべてに自動で枠線を付けられる？
画像ブロックを対象にCSSを指定すれば、記事内の画像へまとめて枠線を付けられます。
CSS.wp-block-image img {
border: 1px solid #dddddd;
}
ただし、ロゴ、アイコン、装飾画像などにも適用される可能性があります。投稿本文だけに限定したい場合は、テーマの本文クラスを組み合わせます。
CSS.entry-content .wp-block-image img {
border: 1px solid #dddddd;
}
特定の画像を除外したい場合は、すべてに自動適用するより、必要な画像だけに追加CSSクラスを設定する方法が安全です。
9-4. 表の枠線だけ太くできる？
表全体の外枠とセルの枠線は、別々に指定できます。
CSS.wp-block-table table {
border: 4px solid #333333;
border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
border: 1px solid #cccccc;
}
このコードでは、表全体の外枠が4px、セルの枠線が1pxになります。
見出し部分の下線だけを太くすることも可能です。
CSS.wp-block-table thead {
border-bottom: 3px solid #333333;
}
9-5. 枠線を消すにはどうすればいい？
ブロックの設定で付けた枠線は、枠線の太さを0にするか、設定をリセットします。
CSSで付けた枠線は、該当するコードを削除するか、border: none;を指定します。
CSS.no-border {
border: none;
}
画像の枠線を消す場合は、次のように指定できます。
CSS.no-border-image img {
border: none;
box-shadow: none;
}
表の枠線を消す場合は、表とセルの両方を指定します。
CSS.borderless-table table,
.borderless-table th,
.borderless-table td {
border: none;
}
テーマ標準の枠線を消したい場合は、対象ブロックに独自クラスを設定して上書きすると、ほかの要素への影響を抑えられます。
まとめ
ワードプレスで枠線を付ける方法には、ブロックの設定、テーマ標準機能、プラグイン、追加CSSがあります。
初心者の方は、グループブロックを使い、右側の設定パネルから枠線、背景色、余白、角丸を調整する方法がおすすめです。設定だけでは希望するデザインを作れない場合は、borderを使ったCSSで自由にカスタマイズできます。
基本となるCSSは次のとおりです。
CSS.simple-box {
border: 1px solid #cccccc;
border-radius: 8px;
padding: 20px;
margin: 24px 0;
background-color: #ffffff;
}
画像には.wp-block-image img、表には.wp-block-tableを対象としたCSSを使うことで、枠線を設定できます。特定の要素だけを変更したい場合は、追加CSSクラスを活用しましょう。
枠線は情報を整理し、重要な内容を伝えやすくする装飾です。ただし、使いすぎると読みにくくなるため、用途ごとに色やデザインを統一し、パソコンとスマホの両方で表示を確認することが大切です。