WordPressでおしゃれなボックスを作る方法｜コピペOKの囲み枠デザイン集
はじめに
WordPressの記事を読みやすく、おしゃれに見せたいときに便利なのが「ボックス」や「囲み枠」です。
重要なポイント、注意書き、補足情報、Q&A、手順説明などを通常の本文と分けて表示できるため、読者が内容を理解しやすくなります。特にブログ記事では、文章だけが続くと読み飛ばされやすくなるため、適度にボックスを入れることでメリハリのあるページに仕上げられます。
この記事では、WordPressでボックスを作る方法を初心者向けに解説します。ブロックエディターで作る方法から、HTMLとCSSをコピペして使えるおしゃれな囲み枠デザインまで紹介するので、すぐに自分のブログで活用できます。
1. WordPressのボックスとは？囲み枠を使うメリット
WordPressのボックスとは、文章や画像、リンクなどを枠線や背景色で囲んだデザインのことです。「囲み枠」「装飾ボックス」「カスタムボックス」などと呼ばれることもあります。
本文中にボックスを使うことで、重要な情報を目立たせたり、読者に伝えたい内容を整理したりできます。
1-1. ボックス・囲み枠でできること
WordPressのボックスを使うと、次のような表現ができます。
重要なポイントを目立たせる、注意書きをわかりやすく表示する、手順を整理して見せる、補足情報を本文と分ける、商品レビューやおすすめ情報を囲む、Q&A形式で読みやすくするなど、使い方はさまざまです。
たとえば、通常の文章の中に「ここだけは読んでほしい」という情報がある場合、ボックスで囲むだけで読者の目に留まりやすくなります。
1-2. 読みやすさとデザイン性が上がる理由
ボックスを使うと、文章のかたまりが視覚的に区切られます。
ブログ記事は、読者が最初から最後までじっくり読むとは限りません。多くの人は、見出しや強調部分を拾いながら読み進めます。そのため、重要な内容をボックスで囲むことで、読者が必要な情報を見つけやすくなります。
また、枠線・背景色・余白・角丸・影などを調整すれば、サイト全体の雰囲気に合ったおしゃれなデザインにできます。シンプルなブログでも、ボックスを使うだけで完成度が高く見えるのもメリットです。
1-3. ボックスを使うべき場面・使いすぎないほうがよい場面
ボックスは便利ですが、使いすぎると逆に読みにくくなります。
使うべき場面は、重要ポイント、注意喚起、まとめ、補足説明、手順、比較、Q&Aなどです。読者に「ここは通常の本文とは違う情報だ」と伝えたいときに使うと効果的です。
一方で、本文のほとんどをボックスで囲んでしまうと、どこが重要なのかわかりにくくなります。1記事の中で使うボックスの種類は2〜4種類程度に絞り、必要な場所だけに使うのがおすすめです。
2. WordPressでボックスを作る主な方法
WordPressでボックスを作る方法はいくつかあります。初心者でも使いやすい方法から、自由にデザインできる方法まであるので、自分のスキルや目的に合わせて選びましょう。
2-1. ブロックエディターで作る方法
WordPressのブロックエディターでは、グループブロックやカラムブロック、段落ブロックの背景色設定などを使って簡単なボックスを作れます。
たとえば、グループブロックを追加し、その中に文章を入れて背景色や余白を設定すれば、シンプルな囲み枠のように見せることができます。
コードを使いたくない初心者には、まずブロックエディターの標準機能で作る方法がおすすめです。ただし、細かいデザイン調整には限界があります。
2-2. HTMLとCSSをコピペして作る方法
自由度の高いボックスを作りたい場合は、HTMLとCSSを使う方法が便利です。
CSSでデザインを指定し、記事本文にHTMLを貼り付けることで、オリジナルのボックスを表示できます。一度CSSを登録しておけば、記事内ではHTMLをコピペするだけで同じデザインを何度も使えます。
この記事で紹介するボックスデザインも、基本的にはCSSとHTMLを組み合わせて作ります。
2-3. テーマ標準のボックス機能を使う方法
WordPressテーマによっては、最初からおしゃれなボックス機能が用意されています。
たとえば、注意ボックス、ポイントボックス、補足ボックス、吹き出し、タブ、ランキングボックスなどをブロックから選べるテーマもあります。
テーマ標準の機能を使えば、CSSを追加しなくてもデザインを統一しやすいのがメリットです。ただし、別のテーマに変更するとデザインが崩れたり、独自ブロックが使えなくなったりする場合があります。
2-4. プラグインを使う方法
ボックス用のブロックを追加できるプラグインを使う方法もあります。
ブロック拡張系プラグインを導入すると、装飾ボックス、アコーディオン、タブ、ボタン、カードなど、さまざまなデザインを簡単に使えるようになります。
ただし、プラグインを増やしすぎるとサイト表示が重くなったり、管理が複雑になったりすることがあります。必要な機能だけを選んで使うのがポイントです。
2-5. 初心者におすすめの作り方
初心者におすすめなのは、まずブロックエディターの標準機能で簡単なボックスを作り、慣れてきたらCSSとHTMLでカスタマイズする方法です。
最初から複雑なデザインを作ろうとすると、CSSの管理が難しくなります。まずはシンプルなボックスを作り、色や余白、角丸を少しずつ調整していくと失敗しにくいです。
3. コピペ前に確認したいWordPressの編集画面
HTMLやCSSをコピペする前に、WordPressのどこに貼り付けるのかを確認しておきましょう。貼る場所を間違えると、ボックスが表示されなかったり、コードがそのまま表示されたりすることがあります。
3-1. ブロックエディターの場合
ブロックエディターでHTMLを貼り付ける場合は、「カスタムHTML」ブロックを使います。
記事編集画面で「＋」ボタンを押し、「カスタムHTML」と検索してブロックを追加します。その中にHTMLコードを貼り付けると、プレビュー画面でボックスとして表示されます。
通常の段落ブロックにHTMLを貼り付けると、正しく表示されないことがあるため注意しましょう。
3-2. クラシックエディターの場合
クラシックエディターを使っている場合は、編集画面を「ビジュアル」ではなく「テキスト」タブに切り替えてHTMLを貼り付けます。
「ビジュアル」タブに貼り付けると、HTMLタグが文字として表示される場合があります。必ずテキスト編集モードで貼り付けてください。
3-3. CSSを貼り付ける場所
CSSは、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」に貼り付けるのが一般的です。
追加CSSに書いた内容は、サイト全体に反映されます。テーマファイルを直接編集するより安全なので、初心者は追加CSSを使うのがおすすめです。
テーマによっては「カスタムCSS」「独自CSS」などの設定欄が用意されている場合もあります。その場合は、テーマのCSS入力欄を使っても問題ありません。
3-4. HTMLを貼り付ける場所
HTMLは、ボックスを表示したい記事本文の位置に貼り付けます。
ブロックエディターなら「カスタムHTML」ブロック、クラシックエディターなら「テキスト」タブに貼り付けます。
CSSは一度登録しておけば共通で使えますが、HTMLは記事ごとに必要な場所へ貼り付ける必要があります。
3-5. スマホ表示を確認する方法
ボックスを設置したら、必ずスマホ表示を確認しましょう。
WordPressのプレビュー画面では、パソコン・タブレット・スマホ表示を切り替えられる場合があります。また、実際にスマホで記事を開いて確認するのもおすすめです。
パソコンではきれいに見えても、スマホでは余白が広すぎる、文字が小さい、横幅がはみ出すといった問題が起こることがあります。
4. WordPressでおしゃれなボックスを作る基本手順
ここからは、WordPressでボックスを作る基本的な流れを解説します。CSSとHTMLを使う場合でも、手順はそれほど難しくありません。
4-1. CSSを追加する
まずは、ボックスの見た目を決めるCSSを追加します。
WordPress管理画面から「外観」→「カスタマイズ」→「追加CSS」を開き、使いたいボックスのCSSを貼り付けます。
たとえば、シンプルな囲み枠なら次のようなCSSです。
CSS.simple-box {
border: 1px solid #ddd;
padding: 20px;
margin: 24px 0;
border-radius: 8px;
background: #fff;
}
このCSSでは、枠線、余白、角丸、背景色を指定しています。
4-2. 記事本文にHTMLを貼り付ける
次に、記事本文のボックスを表示したい場所にHTMLを貼り付けます。
HTML<div class="simple-box">
<p>ここにボックス内の文章を入れます。</p>
</div>
CSSのクラス名とHTMLのclass名を同じにすることで、デザインが反映されます。
4-3. 文章を入れ替える
HTMLを貼り付けたら、ボックス内の文章を自分の記事内容に合わせて変更します。
HTML<div class="simple-box">
<p>WordPressのボックスを使うと、重要な情報を読みやすく整理できます。</p>
</div>
文章だけでなく、リストやリンク、画像を入れることもできます。
HTML<div class="simple-box">
<ul>
<li>重要ポイントを目立たせる</li>
<li>注意書きをわかりやすくする</li>
<li>記事全体にメリハリをつける</li>
</ul>
</div>
4-4. 色・余白・角丸を調整する
ボックスをおしゃれに見せるには、色・余白・角丸の調整が大切です。
背景色を変えたい場合は、CSSのbackgroundを変更します。
CSS.simple-box {
background: #f7fbff;
}
角丸を大きくしたい場合は、border-radiusの数値を変更します。
CSS.simple-box {
border-radius: 16px;
}
余白を広げたい場合は、paddingを調整します。
CSS.simple-box {
padding: 28px;
}
少し変えるだけでも印象が大きく変わるので、サイトの雰囲気に合わせて調整してみましょう。
4-5. プレビューで表示を確認する
CSSとHTMLを設定したら、記事を公開する前にプレビューで確認します。
確認すべきポイントは、枠線や背景色が反映されているか、文章が読みやすいか、スマホで横にはみ出していないか、余白が狭すぎないか、他のデザインとぶつかっていないかです。
問題がなければ、そのまま公開しても大丈夫です。
5. コピペOK｜シンプルなボックスデザイン
ここでは、WordPressですぐに使えるシンプルなボックスデザインを紹介します。CSSを追加CSSに貼り付け、HTMLを記事本文に貼り付けて使ってください。
5-1. ベーシックな囲み枠ボックス
まずは、どんなサイトにも合わせやすい基本の囲み枠です。
CSS.basic-box {
border: 1px solid #dcdcdc;
padding: 20px;
margin: 24px 0;
background: #fff;
}
HTML<div class="basic-box">
<p>ここに本文を入れます。シンプルな囲み枠なので、補足説明やまとめに使いやすいデザインです。</p>
</div>
装飾が控えめなので、ビジネス系ブログや情報サイトにも使いやすいボックスです。
5-2. 背景色付きのやわらかいボックス
背景色を入れると、本文との違いがわかりやすくなります。
CSS.soft-box {
padding: 20px;
margin: 24px 0;
background: #f5f9ff;
border-left: 4px solid #6aa6ff;
}
HTML<div class="soft-box">
<p>背景色付きのボックスです。ポイントや補足情報をやさしい印象で伝えたいときに便利です。</p>
</div>
薄い色を使うと、主張しすぎず読みやすいデザインになります。
5-3. 角丸のおしゃれなボックス
角丸を入れると、やわらかく親しみやすい印象になります。
CSS.round-box {
border: 1px solid #e0e0e0;
padding: 22px;
margin: 24px 0;
border-radius: 14px;
background: #fffdf8;
}
HTML<div class="round-box">
<p>角丸のボックスです。やさしい雰囲気のブログや女性向けサイトにも使いやすいデザインです。</p>
</div>
角丸は大きくしすぎると幼い印象になることもあるため、8px〜16px程度がおすすめです。
5-4. 影付きの立体感あるボックス
影をつけると、カードのような立体感を出せます。
CSS.shadow-box {
padding: 24px;
margin: 28px 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
HTML<div class="shadow-box">
<p>影付きのボックスです。商品紹介やレビュー、まとめ部分を目立たせたいときにおすすめです。</p>
</div>
影を強くしすぎると重たい印象になるため、薄めに設定するとおしゃれに見えます。
5-5. 点線・破線のかわいいボックス
点線や破線の枠線を使うと、かわいらしい雰囲気になります。
CSS.dashed-box {
border: 2px dashed #f2a6b3;
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #fffafa;
}
HTML<div class="dashed-box">
<p>点線のかわいいボックスです。メモ、補足、ちょっとしたお知らせに使いやすいデザインです。</p>
</div>
かわいい印象にしたい場合は、淡いピンク、ベージュ、ミント系の色と相性が良いです。
6. コピペOK｜タイトル付きボックスデザイン
タイトル付きボックスは、「ポイント」「注意」「補足」などの内容をわかりやすく伝えたいときに便利です。
6-1. 見出し付きの基本ボックス
ボックスの上部にタイトルを入れる基本デザインです。
CSS.title-box {
border: 1px solid #d7e3f4;
margin: 28px 0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.title-box-title {
background: #eef5ff;
color: #2f5f9f;
font-weight: bold;
padding: 12px 18px;
}
.title-box-content {
padding: 18px;
}
HTML<div class="title-box">
<div class="title-box-title">ポイント</div>
<div class="title-box-content">
<p>タイトル付きボックスは、読者に内容の種類をすぐ伝えられるのがメリットです。</p>
</div>
</div>
記事内で何度も使う場合は、タイトルだけ変更すればさまざまな用途に使えます。
6-2. ラベル風タイトル付きボックス
ラベルが付いたように見える、おしゃれなデザインです。
CSS.label-box {
position: relative;
border: 1px solid #f0c36d;
padding: 28px 20px 20px;
margin: 32px 0 24px;
border-radius: 10px;
background: #fffdf5;
}
.label-box-title {
position: absolute;
top: -14px;
left: 18px;
background: #f0c36d;
color: #fff;
font-weight: bold;
padding: 5px 14px;
border-radius: 20px;
font-size: 14px;
}
HTML<div class="label-box">
<div class="label-box-title">CHECK</div>
<p>ラベル風のタイトルを付けると、ボックス全体がより目立ちます。</p>
</div>
「CHECK」「POINT」「MEMO」など短い英字ラベルと相性が良いデザインです。
6-3. アイコン付きボックス
アイコンを入れると、ボックスの意味が直感的に伝わります。
CSS.icon-box {
border: 1px solid #cfe8d8;
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #f6fff9;
}
.icon-box-title {
font-weight: bold;
margin-bottom: 10px;
color: #2f7a4f;
}
HTML<div class="icon-box">
<div class="icon-box-title">✅ ポイント</div>
<p>アイコン付きボックスは、重要ポイントやチェック項目を目立たせたいときに便利です。</p>
</div>
絵文字を使えば、画像アイコンを用意しなくても簡単に装飾できます。ただし、使いすぎると文章が軽く見えることもあるため、サイトの雰囲気に合わせましょう。
6-4. 注意・ポイント・補足に使えるボックス
注意、ポイント、補足はブログ記事で特によく使うボックスです。色を分けると、読者が意味を理解しやすくなります。
CSS.note-box {
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #f5f9ff;
border-left: 5px solid #5b9dff;
}
.warning-box {
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #fff7f7;
border-left: 5px solid #ff7777;
}
.tips-box {
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #f7fff5;
border-left: 5px solid #67b567;
}
HTML<div class="note-box">
<p><strong>補足：</strong>設定画面はテーマによって表示が異なる場合があります。</p>
</div>
<div class="warning-box">
<p><strong>注意：</strong>CSSを変更する前に、元のコードをコピーして保存しておきましょう。</p>
</div>
<div class="tips-box">
<p><strong>ポイント：</strong>よく使うボックスは再利用できる形で保存しておくと便利です。</p>
</div>
青は補足、赤は注意、緑はポイントのように、色の意味を統一すると読みやすくなります。
6-5. Q&A風のボックス
Q&A形式の記事や、よくある質問の補足に使えるボックスです。
CSS.qa-box {
margin: 24px 0;
}
.qa-question,
.qa-answer {
padding: 16px 18px;
border-radius: 10px;
margin-bottom: 10px;
}
.qa-question {
background: #eef5ff;
font-weight: bold;
}
.qa-answer {
background: #f8f8f8;
}
HTML<div class="qa-box">
<div class="qa-question">Q. WordPress初心者でもボックスは作れますか？</div>
<div class="qa-answer">A. はい。ブロックエディターやコピペ用CSSを使えば、初心者でも簡単に作れます。</div>
</div>
質問と回答を分けて表示できるため、FAQコンテンツにも使いやすいデザインです。
7. コピペOK｜用途別ボックスデザイン集
ここでは、ブログ記事でよく使う用途別のボックスデザインを紹介します。記事の内容に合わせて使い分けると、より読みやすいページになります。
7-1. 重要ポイント用ボックス
重要な内容をしっかり目立たせたいときに使えるボックスです。
CSS.important-box {
padding: 22px;
margin: 28px 0;
border: 2px solid #ffb84d;
border-radius: 12px;
background: #fffaf0;
}
.important-box strong {
color: #d98200;
}
HTML<div class="important-box">
<p><strong>重要：</strong>WordPressのボックスは、読みやすさを高めるために必要な場所だけ使うのがポイントです。</p>
</div>
「重要」「必ず確認」「ここがポイント」など、読者に強く伝えたい内容に向いています。
7-2. 注意喚起用ボックス
エラーや失敗を防ぐための注意書きに使えるボックスです。
CSS.alert-box {
padding: 20px;
margin: 24px 0;
border-radius: 10px;
background: #fff1f1;
border: 1px solid #ffb3b3;
color: #5c2b2b;
}
HTML<div class="alert-box">
<p><strong>注意：</strong>テーマファイルを直接編集する場合は、事前にバックアップを取ってください。</p>
</div>
注意喚起用ボックスは赤系の色を使うと伝わりやすいですが、強すぎる赤は圧迫感が出るため淡い背景色がおすすめです。
7-3. メリット・デメリット用ボックス
比較記事やレビュー記事で使いやすいデザインです。
CSS.pros-box,
.cons-box {
padding: 20px;
margin: 24px 0;
border-radius: 10px;
}
.pros-box {
background: #f3fff5;
border-left: 5px solid #4caf50;
}
.cons-box {
background: #fff6f3;
border-left: 5px solid #ff8a65;
}
.pros-box-title,
.cons-box-title {
font-weight: bold;
margin-bottom: 10px;
}
HTML<div class="pros-box">
<div class="pros-box-title">メリット</div>
<ul>
<li>重要な情報が目立つ</li>
<li>記事にメリハリが出る</li>
<li>読者が内容を理解しやすい</li>
</ul>
</div>
<div class="cons-box">
<div class="cons-box-title">デメリット</div>
<ul>
<li>使いすぎると読みにくい</li>
<li>デザインを増やしすぎると統一感がなくなる</li>
</ul>
</div>
メリットは緑系、デメリットはオレンジや赤系にすると、視覚的に区別しやすくなります。
7-4. 手順説明用ボックス
設定方法や作業手順を説明するときに便利なボックスです。
CSS.step-box {
counter-reset: step;
margin: 24px 0;
}
.step-item {
position: relative;
padding: 18px 18px 18px 54px;
margin-bottom: 14px;
border-radius: 10px;
background: #f7f9fc;
}
.step-item::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 18px;
top: 18px;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
border-radius: 50%;
background: #5b8def;
color: #fff;
font-weight: bold;
}
HTML<div class="step-box">
<div class="step-item">追加CSSにボックス用のCSSを貼り付けます。</div>
<div class="step-item">記事本文にHTMLを貼り付けます。</div>
<div class="step-item">文章を入れ替えてプレビューで確認します。</div>
</div>
番号付きで表示されるため、操作手順を順番に伝えたい記事に向いています。
7-5. 引用・補足説明用ボックス
本文とは少し違う補足情報や引用風の説明に使えるボックスです。
CSS.quote-box {
padding: 22px;
margin: 28px 0;
border-left: 5px solid #b0b0b0;
background: #f8f8f8;
color: #555;
font-style: italic;
}
HTML<div class="quote-box">
<p>補足説明や引用風の文章を入れると、本文と区別して読みやすく表示できます。</p>
</div>
引用として使う場合は、必要に応じて引用元も明記しましょう。
7-6. 商品紹介・レビュー用ボックス
アフィリエイト記事やレビュー記事で使える商品紹介向けボックスです。
CSS.review-box {
display: flex;
gap: 18px;
padding: 22px;
margin: 28px 0;
border: 1px solid #e5e5e5;
border-radius: 12px;
background: #fff;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}
.review-box-image {
flex: 0 0 120px;
}
.review-box-image img {
max-width: 100%;
border-radius: 8px;
}
.review-box-content {
flex: 1;
}
@media (max-width: 600px) {
.review-box {
flex-direction: column;
}
.review-box-image {
flex: none;
}
}
HTML<div class="review-box">
<div class="review-box-image">
<img src="画像URL" alt="商品名">
</div>
<div class="review-box-content">
<h3>商品名</h3>
<p>商品の特徴やおすすめポイントをここに入れます。</p>
<p><a href="#">詳しく見る</a></p>
</div>
</div>
スマホでは縦並びになるようにしておくと、画面幅が狭くても読みやすくなります。
8. ボックスデザインをおしゃれに見せるコツ
WordPressのボックスは、ただ枠で囲むだけでも使えますが、少し工夫するとよりおしゃれに見えます。
8-1. サイトカラーに合わせる
ボックスの色は、サイト全体の色と合わせるのが基本です。
サイトのメインカラーが青ならボックスも青系、ベージュ系のサイトなら淡いブラウンやクリーム色を使うと統一感が出ます。
逆に、記事ごとに色を変えすぎるとごちゃごちゃした印象になります。よく使う色は2〜3色に絞るのがおすすめです。
8-2. 余白を広めに取る
おしゃれなボックスに見せるには、余白がとても重要です。
文字と枠線が近すぎると窮屈に見えます。paddingは16px〜28px程度を目安にすると、読みやすく落ち着いた印象になります。
また、ボックスの上下にはmarginを入れて、前後の文章と適度に間隔を空けましょう。
8-3. 枠線を太くしすぎない
枠線が太すぎると、ボックスだけが強く目立ってしまいます。
通常の囲み枠なら1px〜2px程度で十分です。強調したい場合でも、全体を太い枠で囲むより、左側だけ太いラインを入れるほうがすっきり見えます。
8-4. アイコンやタイトルを入れすぎない
アイコンやタイトルは便利ですが、すべてのボックスに入れると情報量が多くなりすぎます。
重要ポイントにはタイトル付き、ちょっとした補足にはシンプルな背景色付きボックスなど、用途ごとに装飾の強さを変えると読みやすくなります。
8-5. スマホで読みやすいサイズにする
ブログ記事はスマホで読まれることが多いため、スマホ表示の確認は必須です。
横幅が固定されているボックスは、スマホで画面からはみ出すことがあります。基本的にはwidthを固定せず、親要素に合わせて表示されるようにしましょう。
画像や横並びレイアウトを使う場合は、メディアクエリでスマホ時に縦並びへ変更すると安心です。
9. 作ったボックスをWordPressで再利用する方法
よく使うボックスは、毎回ゼロから作るのではなく、再利用できる形にしておくと効率的です。
9-1. ブロックパターンに登録する
ブロックエディターでは、複数のブロックを組み合わせたデザインをブロックパターンとして登録できます。
よく使うボックスをパターン化しておけば、記事作成時に簡単に呼び出せます。タイトル付きボックスや商品紹介ボックスなど、決まった形で何度も使うデザインに向いています。
9-2. 再利用ブロックとして保存する
同じ内容を複数の記事で使いたい場合は、再利用ブロックとして保存する方法もあります。
たとえば、プロフィール紹介、キャンペーン案内、注意事項など、文章まで同じ内容を使うボックスに便利です。
ただし、再利用ブロックを編集すると、同じブロックを使っている他の記事にも変更が反映される場合があります。記事ごとに内容を変えたい場合は注意しましょう。
9-3. CSSクラスを使って管理する
CSSとHTMLで作ったボックスは、クラス名で管理できます。
たとえば、ポイント用はpoint-box、注意用はwarning-box、補足用はnote-boxのように名前を分けておくと、後から見てもわかりやすいです。
クラス名は英数字とハイフンを使い、用途がわかる名前にすると管理しやすくなります。
9-4. よく使うボックスをテンプレート化する
よく使うHTMLは、メモアプリやコード管理ツールに保存しておくのもおすすめです。
たとえば、次のようにテンプレート化しておけば、記事を書くたびにすぐ使えます。
HTML<div class="point-box">
<p><strong>ポイント：</strong>ここに文章を入れます。</p>
</div>
WordPress内だけで管理しにくい場合は、外部に自分用のテンプレート集を作っておくと便利です。
10. ボックスが表示されない・崩れるときの対処法
CSSやHTMLを貼り付けたのにボックスが表示されない場合は、いくつかの原因が考えられます。
10-1. CSSが反映されない場合
CSSが反映されない場合は、まず貼り付け場所を確認しましょう。
追加CSSに正しく貼り付けられているか、保存や公開ボタンを押したか、CSSの記述に間違いがないかを確認してください。
特に、波かっこ{}の閉じ忘れや、セミコロン;の抜けがあると、後ろのCSSまで反映されないことがあります。
10-2. HTMLを貼る場所が間違っている場合
HTMLを通常の段落ブロックやビジュアルエディターに貼っていると、正しく表示されないことがあります。
ブロックエディターでは「カスタムHTML」ブロック、クラシックエディターでは「テキスト」タブに貼り付けましょう。
HTMLタグがそのまま文字として表示されている場合は、貼り付け場所が間違っている可能性が高いです。
10-3. テーマやプラグインのCSSと干渉している場合
テーマやプラグインのCSSが影響して、ボックスのデザインが崩れることがあります。
たとえば、同じクラス名がすでに使われていると、意図しないデザインが反映される場合があります。
対策として、クラス名を少し独自のものに変更しましょう。
CSS.myblog-point-box {
padding: 20px;
background: #f5f9ff;
border-left: 5px solid #5b9dff;
}
boxやtitleのような一般的すぎるクラス名は避け、サイト名や用途を含めると干渉しにくくなります。
10-4. スマホでデザインが崩れる場合
スマホでボックスが崩れる場合は、横幅や余白の指定を見直しましょう。
特に、width: 600px;のように固定幅を指定していると、スマホ画面からはみ出すことがあります。
スマホ対応には、次のようなCSSを追加すると便利です。
CSS.custom-box {
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 600px) {
.custom-box {
padding: 16px;
font-size: 15px;
}
}
box-sizing: border-box;を入れておくと、余白や枠線を含めて幅が計算されるため、レイアウト崩れを防ぎやすくなります。
10-5. キャッシュが原因で反映されない場合
CSSを変更したのに表示が変わらない場合、キャッシュが原因のことがあります。
ブラウザのキャッシュ、WordPressのキャッシュプラグイン、サーバー側のキャッシュなどに古いCSSが残っていると、変更がすぐに反映されません。
対処法として、ブラウザを更新する、シークレットウィンドウで確認する、キャッシュプラグインのキャッシュを削除する、サーバーのキャッシュをクリアするなどを試してみましょう。
11. WordPressのボックス作成でよくある質問
最後に、WordPressのボックス作成でよくある質問に回答します。
11-1. CSSがわからなくてもボックスは作れる？
CSSがわからなくても、WordPressのブロックエディターやテーマ標準機能を使えばボックスは作れます。
ただし、デザインを細かく調整したい場合はCSSを使ったほうが便利です。この記事で紹介したコードをコピペすれば、初心者でも簡単におしゃれなボックスを作れます。
11-2. プラグインなしでもおしゃれなボックスは作れる？
プラグインなしでも、HTMLとCSSを使えばおしゃれなボックスを作れます。
むしろ、シンプルな囲み枠やタイトル付きボックスであれば、プラグインを使わずに作ったほうがサイトを軽く保ちやすいです。
多機能な装飾やアニメーションが必要な場合だけ、プラグインを検討するとよいでしょう。
11-3. Gutenbergでもコピペで使える？
Gutenbergでもコピペで使えます。
CSSは追加CSSに貼り付け、HTMLはカスタムHTMLブロックに貼り付ければ表示できます。通常の段落ブロックではなく、必ずカスタムHTMLブロックを使うのがポイントです。
11-4. ボックスの色だけ変更する方法は？
ボックスの色だけ変更したい場合は、CSSのbackground、border、colorなどを編集します。
たとえば、背景色を変える場合は次の部分を変更します。
CSSbackground: #f5f9ff;
枠線の色を変える場合は、次の部分を変更します。
CSSborder: 1px solid #dcdcdc;
色はカラーコードで指定できます。サイトのメインカラーに合わせると、統一感のあるデザインになります。
11-5. SEO的にボックスを使うメリットはある？
ボックスを使っただけで検索順位が直接上がるわけではありません。
ただし、読みやすい記事は読者が内容を理解しやすく、滞在時間や回遊率の改善につながる可能性があります。また、重要な情報を整理して見せることで、読者満足度の高いコンテンツを作りやすくなります。
SEOでは、検索キーワードに合った内容をわかりやすく伝えることが大切です。WordPressのボックスは、その読みやすさをサポートする装飾として活用できます。
まとめ
WordPressでボックスを作る方法には、ブロックエディターを使う方法、HTMLとCSSをコピペする方法、テーマ標準機能を使う方法、プラグインを使う方法があります。
初心者は、まずブロックエディターやテーマ機能で簡単な囲み枠を作り、慣れてきたらCSSとHTMLで自由にカスタマイズするのがおすすめです。
おしゃれなボックスを作るポイントは、サイトカラーに合わせること、余白をしっかり取ること、枠線を太くしすぎないこと、スマホ表示を確認することです。
ボックスは、重要ポイント、注意書き、補足説明、手順、Q&A、商品紹介など、さまざまな場面で活用できます。ただし、使いすぎると読みにくくなるため、必要な場所だけに絞って使いましょう。
この記事で紹介したコピペOKの囲み枠デザインを活用すれば、WordPressの記事をより読みやすく、おしゃれに仕上げることができます。