【CSS】コピペで簡単！ブログ記事を読みやすくする「テキストボックス」の作り方

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

前回の「おしゃれなリスト（箇条書き）」のカスタマイズに続き、今回は記事のメリハリを作る「テキストボックス（枠線ボックス）」の実装方法を解説します。

「この記事でわかること」や「注意点」など、読者に絶対に読んでほしい重要なポイントは、単なるテキストではなくボックスで囲むことで視認性が劇的に上がります。テーマ標準のボックスに物足りなさを感じている方や、サイトのブランドカラーに完全に統一したオリジナルボックスを作りたい方に最適です。

今回も極力シンプルなクラス名を採用し、後からのメンテナンスがしやすいプロ仕様のCSSを用意しました。

【コピペでOK】シンプルな角丸テキストボックス

まずは、どんな場面でも使いやすい、背景色と枠線がついたシンプルな角丸ボックスです。

1. 追加CSSに貼り付けるコード

/* シンプルな角丸ボックス */
.box_simple {
    background-color: #f8f9fa; /* 薄いグレーの背景 */
    border: 2px solid #4caf50; /* 緑色の枠線 */
    border-radius: 8px; /* 角を少し丸くする */
    padding: 1.5em; /* ボックスの内側の余白 */
    margin-bottom: 2em; /* ボックスの下側の余白 */
}

/* ボックス内の最後の段落の余白を消す（レイアウト崩れ防止） */
.box_simple p:last-child {
    margin-bottom: 0;
}

2. 記事作成画面（HTML）での使い方

カスタムHTMLブロック等を使用して、<div class="box_simple"> で囲むだけです。

<div class="box_simple">
    <p>ここに重要なポイントやまとめを記載します。</p>
    <p>改行して複数の段落を入れることも可能です。</p>
</div>

【応用編】プロっぽい「見出し付き」テキストボックス

当ブログでもよく使用している、「ポイント」や「注意」といった見出し（タイトル）が上部に付いているスタイルのボックスです。

1. 追加CSSに貼り付けるコード

/* 見出し付きボックスの全体設定 */
.box_title {
    background-color: #fff;
    border: 2px solid #ffb300; /* マスタードイエローの枠線 */
    border-radius: 4px;
    padding: 2em 1.5em 1.5em; /* 上部の余白を多めに取る */
    margin: 2.5em 0 2em;
    position: relative;
}

/* 見出し部分の設定 */
.box_title .ttl {
    position: absolute;
    top: -15px; /* ボックスの上に少しはみ出させる */
    left: 15px;
    background-color: #ffb300; /* 見出しの背景色 */
    color: #fff; /* 見出しの文字色 */
    font-weight: bold;
    padding: 0.3em 1em;
    border-radius: 20px; /* 見出しを丸くする */
    margin: 0;
    line-height: 1.4;
}

.box_title p:last-child {
    margin-bottom: 0;
}

2. 記事作成画面（HTML）での使い方

<div class="box_title">
    <p class="ttl">重要なポイント</p>
    <p>見出し（タイトル）付きのボックスは、何を伝えたいブロックなのかが一目でわかります。</p>
</div>

カスタマイズのポイント：余白（padding）の重要性

ボックスデザインにおいて、色や線の太さ以上にプロとアマチュアの差が出るのが「余白（padding）」の使い方です。

文字が枠線にギリギリまで近づいていると、非常に窮屈で素人っぽい印象を与えてしまいます。今回紹介したCSSでは padding: 1.5em; のように、文字のサイズ（em）を基準に広めの余白をしっかりと確保しています。このゆとりが、読みやすさと洗練されたデザインを生み出します。

情報を四角く区切る「テキストボックス」は、長文になりがちな解説記事のオアシスのような存在です。ぜひブログのテーマカラーに合わせて色（#4caf50 や #ffb300）を変更し、自分だけのオリジナルボックスを作ってみてください。

次回は、SWELLなどのテーマでも人気の「吹き出し」を、CSSのみ（擬似要素）で実装する仕組みについて解説します。