【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集

文章をすっきり見せたい
重要な部分を強調したい

そんなときに便利なのが「ボックス（囲み枠）」です。

この記事では、シンプルでおしゃれなボックスデザインを紹介。初心者でも安心して使える HTML＋CSSのサンプルコード（コピペOK）も用意しているのですぐに実装できます。

この記事でわかること

基本的なボックスの使い方
色や枠線を変える簡単なカスタマイズ方法
そのまま使えるデザインサンプル

CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】

更新情報2026/02/08 _ 一部CSSを微調整しました見出しデザインを変えるだけで、記事の読みやすさや視認性は大きく変わりサイト全体の印象もアップします。...

【Cocoon】白抜きボックスのデザインを17種類に拡張｜ワンクリック切替カスタマイズ

更新情報（2026/02/19）ノート風スタイルのCSSを一部修正しました。Cocoonの「段落ブロック」は手軽に装飾できて便利ですが、リストや画像など複数のブ...

Contents

ボックス（囲み枠）の基本と使い方
ボックスデザイン｜シンプル系
ボックスデザイン｜オシャレ系
ボックスデザイン｜可愛い系
ボックスデザイン｜括弧（カッコ）
1. かぎ括弧で囲む
2. 角括弧で囲む
ボックスデザイン｜タイトル付き
ボックスデザイン｜アイコン使用（Font Awesome）
まとめ

ボックス（囲み枠）の基本と使い方

ボックスを作る手順（HTML & CSS）

ボックスは CSSで見た目を整え、HTMLで実際に表示するという流れで作ります。基本は次の3ステップです。

Step1
CSSを貼り付ける

まずはボックスの見た目を整えるためのCSSを用意します。使いたいコードをコピーして「スタイルシート」などに貼り付けるだけでOK。
Step2
HTMLを貼り付ける
次に、記事内でボックスを表示するためのHTMLを記述します。貼り付ける場所はエディタによって異なります。
- ブロックエディタ → 「カスタムHTMLブロック」に貼り付け
- クラシックエディタ → 「テキストモード」で貼り付け
よく使うHTMLは「パターン」に登録しておくと便利です。パターンの使い方
Step3
プレビューで確認する

最後にプレビュー画面で仕上がりを確認しましょう。枠線や背景色など、思った通りに表示されているかチェックします。

気になる点があれば、CSSの色や余白を微調整すればすぐに修正できます。

デザインのカスタマイズ｜よく使うCSSプロパティ一覧

以下は、よく使う基本プロパティとサンプルです。

プロパティ	例	説明
外側余白	margin: 3em auto;	上下・左右の余白
内側余白	padding: 1em 1.5em;	上下・左右の余白
枠線	border: 2px solid #333;	太さ・種類・カラーコード
色	color: #333; background-color: #f4f4f4;	文字色・背景色
角の丸み	border-radius: 5px;	角の丸みを調整

CSSの記述場所と方法

WordPressではCSSを追加する方法が3つあります。用途に応じて選びましょう。

方法	概要	おすすめ度
子テーマのstyle.css	サイト全体に反映される	本格カスタマイズ向け
外観 → カスタマイズ → 追加CSS	お手軽に反映できる	手軽に試したい方向け
投稿ページ下部のカスタムCSS欄	特定ページのみ適用	一部ページ限定に便利

カラーコードの調べ方（おすすめサイト・書籍）

色を決めるときは、以下のサイトや書籍が参考になります。

＼愛用しているのがこちら／

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 (見てわかる、迷わず決まるシリーズ)

インプレス

¥1,980 （2025/12/24 13:17時点 | Amazon調べ）

口コミを見る

Amazon

楽天市場

Yahoo!

メルカリ

ポチップ

ボックスデザイン｜シンプル系

ここまでの基礎を押さえたら、実際のボックスデザイン例も参考にしてください。シンプル系からおしゃれ系まで、豊富なサンプルを紹介しています。

シンプルな実線枠

See the Pen ボックスデザイン｜シンプルな実線枠 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-solid">
  <p>シンプルな実線枠</p>
</div>

/* 枠付きボックス */
.cstm-box-solid {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 2px solid #333; /* 実線 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-solid p { margin: 0;}

ダブルラインで強調

See the Pen ボックスデザイン｜ダブルラインで強調 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-double">
  <p> 二重線でモダンな印象</p>
</div>

/* 二重線 */
.cstm-box-double {
  margin: 2em auto; /* 外側余白 */
  padding: 1em 2em; /* 内側余白 */
  border:5px double #CCCFD6; /* 線の種類・太さ・色 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落（余白なし） */
.cstm-box-solid p { margin: 0;}

軽やかな破線枠

See the Pen ボックスデザイン｜ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-dashed">
  <p>破線で軽い印象</p>
</div>

/* 破線 */
.cstm-box-dashed {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: dashed 2px #b3ada4; /* 線の種類・太さ・色 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-dashed p {
  margin: 0;
}

ドット柄の点線

See the Pen ボックスデザイン｜ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-dotted">
  <p>ドット状の点線で遊び心を</p>
</div>

/* 点線（ドット） */
.cstm-box-dotted {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 2px dotted #CCA99D; /* 点線 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-dotted p {
  margin: 0;
}

背景色で目立つ

See the Pen ボックスデザイン｜背景色 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-bg">
  <p>単色背景でシンプルに強調</p>
</div>

/* 背景色 */
.cstm-box-bg {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background-color: #E5F2F1; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-bg p {
  margin: 0;
}

紙風デザイン

See the Pen ボックスデザイン｜ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-paper">
  <p>角がめくれたような紙風デザイン</p>
</div>

/* 紙風 */
.cstm-box-paper {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background-color: #f2f3f4; /* 背景色（薄いグレー） */
  position: relative; /* 相対位置指定 */
  max-width: 800px; /* 最大幅 */
}

.cstm-box-paper::after {
  position: absolute; /* 絶対位置指定 */
  content: ''; /* 擬似要素 */
  right: 0; /* 右端 */
  top: 0; /* 上端 */
  border-width: 0 25px 25px 0; /* 折れ形状 */
  border-style: solid; /* 線の種類 */
  border-color: #ccc #fff #ccc; /* 色 */
  box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影 */
}

/* ボックス内の段落 */
.cstm-box-paper p {
  margin: 0;
}

ボックスデザイン｜オシャレ系

モダンなストライプ

See the Pen ボックスデザイン｜モダンなストライプ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-stripe">
  <p>斜めストライプ背景で洗練された印象</p>
</div>

/* ストライプ */
.cstm-box-stripe {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background-image: repeating-linear-gradient(
    -45deg, /* ストライプの角度 */
    #f2f3f7 0, /* ストライプの色（薄いグレー） */
    #f2f3f7 3px, /* ストライプの太さ（3pxの間隔） */
    transparent 3px, /* 透明部分 */
    transparent 6px /* 透明部分（3pxから6pxまで） */
  );
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stripe p {
  margin: 0;
}

カジュアルなふせん

See the Pen ボックスデザイン｜ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-sticky">
  <p>付箋のような柔らかいデザイン</p>
</div>

/* ふせん風 */
.cstm-box-sticky {
  margin: 2em auto; /* 外側余白 */
  padding: 1.5em; /* 内側余白 */
  border-left: solid 4px #9dace1; /* 左側の線 */
  background-color: #f5f7ff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-sticky p {
  margin: 0;
}

上部に太線アクセント

See the Pen ボックスデザイン｜上部に太線アクセント by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-topline">
  <p>上部に太い線で強調</p>
</div>

/* 上にだけ太線 */
.cstm-box-topline {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   border-top:3px solid #F7C16E; /* 上辺に太い線 */
   background-color: #FDFBF6;   /* 背景色 */
   box-shadow: 3px 1px 4px rgb(0 0 0 / .2); /* 影の効果: 右3px、下1px、ぼかし4px */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-topline p { margin:0; }

上下の太線でバランス

See the Pen ボックスデザイン｜上下の太線 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-topbottom">
  <p>上下に太い線で安定感</p>
</div>

/* 上下に太線 */
.cstm-box-topbottom {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-top: 3px solid #8FAAAD;  /* 上辺に太い線 */
   border-bottom: 3px solid #8FAAAD; /* 下辺に太い線 */
   background-color: #FBFBFB;   /* 背景色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-topbottom p { margin:0; }

ずらした重ねデザイン

See the Pen ボックスデザイン｜ずらし＆重ね by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-offset">
  <p>少しずらしたボックスデザイン</p>
</div>

/* ずらし＆重ねボックス */
.cstm-box-offset {
  margin: 2em auto;  /* 外側余白 */
  padding: 2em;  /* 内側余白 */
  background: none;  /* 元のボックス背景色なし */
  border: 1px solid #ccc;  /* 枠線 */
  position: relative;  /* 配置の基準 */
  max-width: 800px;  /* 最大幅 */
}

.cstm-box-offset::after {
  background-color: #eee;  /* ずらした背景色 */
  border: none;  /* 枠線なし */
  content: '';  /* 擬似要素 */
  position: absolute;  /* 位置指定 */
  top: 7px;  /* 上にずらす */
  left: 7px;  /* 左にずらす */
  width: 100%;  /* 幅100% */
  height: 100%;  /* 高さ100% */
  z-index: -1;  /* 背面表示 */
}

/* ボックス内の段落 */
.cstm-box-offset p {
  margin: 0;
}

アクセントカラー

See the Pen ボックスデザイン｜アクセントカラーの線 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-corner-accent">
  <p>線の一部に色を追加</p>
</div>

/* アクセントカラー */
.cstm-box-corner-accent {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 3px solid #eee; /* ベース枠線 */
  position: relative; /* 配置の基準 */
  z-index: 0; /* 重なり順 */
  max-width: 800px; /* 最大幅 */
}

.cstm-box-corner-accent::before {
  border-top: 3px solid #8293AA; /* 上辺アクセント */
  border-left: 3px solid #8293AA; /* 左辺アクセント */
  content: ''; /* 擬似要素 */
  display: block; /* ブロック表示 */
  position: absolute; /* 位置指定 */
  top: -3px; /* 上にずらす */
  left: -3px; /* 左にずらす */
  width: 20px; /* 幅 */
  height: 20px; /* 高さ */
  z-index: 1; /* 前面表示 */
}

/* ボックス内の段落 */
.cstm-box-corner-accent p {
  margin: 0;
}

レトロな方眼紙

See the Pen ボックスデザイン｜方眼紙 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-grid">
  <p>グリッド背景でレトロ感</p>
</div>

/* 方眼紙風 */
.cstm-box-grid {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background-image: 
   linear-gradient(0deg, transparent 19px, #d3d3d3 20px), /* 横のグラデーション */
   linear-gradient(90deg, transparent 19px, #d3d3d3 20px); /* 縦のグラデーション */
   background-size: 20px 20px; /* 方眼のサイズ */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-grid p { margin:0; }

SWELLの目次風

See the Pen ボックスデザイン｜SWELL風の目次 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-swell">
  <p>有料テーマSWELLテーマの目次風デザイン</p>
</div>

/* SWELL目次風ボックス */
.cstm-box-swell {
  --border-color-1: #f8f8f8; /* ストライプ背景の色 */
  --border-color-2: #ddd; /* 上下枠線の色 */
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background: linear-gradient(
    -45deg,
    transparent 25%,
    var(--border-color-1) 25%,
    var(--border-color-1) 50%,
    transparent 50%,
    transparent 75%,
    var(--border-color-1) 75%,
    var(--border-color-1)
  ); /* ストライプ模様 */
  background-size: 4px 4px;   /* ストライプのサイズ */
  border-top: 4px double var(--border-color-2); /* 上枠線 */
  border-bottom: 4px double var(--border-color-2); /* 下枠線 */
  background-clip: padding-box; /* 背景をパディング領域まで表示 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落：余白なし */
.cstm-box-swell p { margin: 0;}

ボックスデザイン｜可愛い系

角丸・背景色

See the Pen ボックスデザイン｜ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-rounded-bg">
  <p>丸角と背景色で柔らかく</p>
</div>

/* 背景色をつけて角を丸くする */
.cstm-box-rounded-bg {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-radius:20px; /*丸みを調整 */
   background-color:#f9e8e2;
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-rounded-bg p { margin:0; }

ふわふわな枠線

See the Pen ボックスデザイン｜ふわふわな枠線 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-fluffy">
  <p>雲のような柔らかい枠</p>
</div>

/* ふわふわな枠線 */
.cstm-box-fluffy {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   background-color:#fff; /* 背景色 */
   box-shadow: 0 0 6px 1px #c2d0e0, 0 0 6px 1px #c2d0e0 inset; /*ふわりとした影*/
   border-radius: 20px;
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-fluffy p { margin:0; }

茶色のステッチ

See the Pen ボックスデザイン｜茶色のステッチ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-stitch-brown">
  <p>茶色の縫い目風デザイン</p>
</div>

/* 茶ステッチ */
.cstm-box-stitch-brown {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background-color: #f4f3f1; /* 薄いベージュ */
  outline: 1px dashed #A7A297; /* 点線アウトライン */
  outline-offset: -5px; /* 内側に5pxずらす */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stitch-white p { margin: 0;}

白ステッチ

See the Pen ボックスデザイン｜白いステッチ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-stitch-white">
  <p>白い縫い目で清潔感</p>
</div>

/* 白ステッチ */
.cstm-box-stitch-white {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background-color: #d6e0ea; /* 淡いブルーグレー */
  outline: 1px dashed #fff; /* 点線アウトライン */
  outline-offset: -5px; /* 内側に5pxずらす */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stitch-white p { margin: 0;}

ラフな手書き風

See the Pen ボックスデザイン｜ラフな手書き風 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-handdrawn">
  <p>手書きラインで親しみやすく</p>
</div>

/* 手書き風 */
.cstm-box-handdrawn {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-radius: 30px 60px / 60px 30px;  /* 角をランダムに丸めて手書き風に */
   border: solid 5px #e9e5de;   /* 太めの枠線（8px、色: #ccc7be） */
    max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-handdrawn p { margin:0; }

ワンポイント装飾

See the Pen ボックスデザイン｜ワンポイント装飾 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-pin">
  <p>ワンポイント装飾付き</p>
</div>

/* ワンポイント付きボックス */
.cstm-box-pin {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  position: relative; /* 擬似要素配置の基準 */
  border: 8px solid #eee; /* 枠線（太さ・種類・色） */
  z-index: 0; /* 重なり順 */
  max-width: 800px; /* 最大幅 */
}

.cstm-box-pin::before {
  content: ''; /* 擬似要素にコンテンツなし */
  display: block; /* ブロック要素として表示 */
  position: absolute; /* 絶対位置指定 */
  top: -8px; /* 上に配置 */
  left: -8px; /* 左に配置 */
  width: 8px; /* サイズ（幅） */
  height: 8px; /* サイズ（高さ） */
  background-color: #d18279; /* ワンポイントの色 */
  z-index: 1; /* 前面に表示 */
}

/* 段落の余白リセット */
.cstm-box-pin p {
  margin: 0;
}

ポップなチェック柄

See the Pen ボックスデザイン｜ポップなチェック柄 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-checkered">
  <p>チェック柄背景で可愛く</p>
</div>

/* 背景チェック */
.cstm-box-checkered {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  max-width: 800px; /* 最大幅 */
  background-image: 
    linear-gradient(90deg, rgba(204, 204, 204, 0.1) 50%, transparent 50%), 
    linear-gradient(rgba(204, 204, 204, 0.2) 50%, transparent 50%);
  background-size: 15px 15px; /* チェックのサイズ */
}

/* ボックス内の段落 */
.cstm-box-checkered p {
  margin: 0;
}

幅広ストライプ

See the Pen ボックスデザイン｜幅広ストライプ by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-stripe-wide">
  <p>太めのストライプで華やかに</p>
</div>

/* 背景ストライプ */
.cstm-box-stripe-wide {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background: repeating-linear-gradient(
    -45deg, /* ストライプの角度 */
    #f8f8f8 0 6px, /* 薄いグレー、幅6px */
    #fff 6px 12px /* 白（#fff）、幅6px */
  );
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stripe-wide p {
  margin: 0;
}

ノート風

See the Pen ボックスデザイン｜手書きノート風 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-notebook">
  <p>ノートのようなカジュアルデザイン</p>
</div>

/* ノート風ボックス */
.cstm-box-notebook {
  margin: 2em auto; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #f4f3f2; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線 */
.cstm-box-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #fff; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/* 内側テキスト */
.cstm-box-notebook p {
  margin: 0; /* 余白リセット */
}

ボックスデザイン｜括弧（カッコ）

かぎ括弧で囲む

See the Pen ボックスデザイン｜かぎ括弧で囲む by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-bracket">
  <p>「」で囲んだシンプルなデザイン</p>
</div>

/* かぎ括弧風ボックス */
.cstm-box-bracket {
  margin: 2em auto; /* 外側余白 */
  padding: 1.5em; /* 内側余白 */
  position: relative; /* 配置基準 */
  max-width: 800px; /* 最大幅 */
  color: #111; /* 文字色（＝装飾色の基準） */
}

.cstm-box-bracket::before,
.cstm-box-bracket::after {
  content: ''; /* 擬似要素 */
  width: 20px; /* カッコ幅 */
  height: 30px; /* カッコ高さ */
  position: absolute; /* 位置指定 */
}

.cstm-box-bracket::before {
  top: 0;
  left: 0;
  border-left: 2px solid currentColor; /* 左線 */
  border-top: 2px solid currentColor; /* 上線 */
}

.cstm-box-bracket::after {
  bottom: 0;
  right: 0;
  border-right: 2px solid currentColor; /* 右線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

/* ボックス内の段落 */
.cstm-box-bracket p {
  margin: 0;
}

角括弧で囲む

See the Pen ボックスデザイン｜角括弧で囲む by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-angle-bracket">
  <p>[]で囲んだモダンなデザイン</p>
</div>

/* 角括弧風ボックス */
.cstm-box-angle-bracket {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  position: relative; /* 配置基準 */
  max-width: 800px; /* 最大幅 */
  color: #111; /* 文字色（＝装飾色の基準） */
}

.cstm-box-angle-bracket::before,
.cstm-box-angle-bracket::after {
  content: ""; /* 擬似要素 */
  height: 100%; /* ボックス高 */
  width: 0.75em; /* カッコ幅 */
  position: absolute; /* 位置指定 */
  bottom: 0; /* 下端揃え */
  border-top: 2px solid currentColor; /* 上線 */
  border-bottom: 2px solid currentColor; /* 下線 */
}

.cstm-box-angle-bracket::before {
  left: 0; /* 左配置 */
  border-left: 2px solid currentColor; /* 左カッコ */
}

.cstm-box-angle-bracket::after {
  right: 0; /* 右配置 */
  border-right: 2px solid currentColor; /* 右カッコ */
}

/* ボックス内の段落 */
.cstm-box-angle-bracket p {
  margin: 0;
}

ボックスデザイン｜タイトル付き

タイトル付きボックスは、タイトルが長すぎるとレイアウトが崩れるので、短めに設定しましょう。

見出し付きボックス

See the Pen ボックスデザイン｜見出し付きボックス by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-titled">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>上部にタイトルを配置</p>
  </div>
</div>

/* 見出し付きボックス */
.cstm-box-titled {
   --box-color: #55b2b0; /* 基本色 */
   margin: 2em auto; /* 外側余白（上下・中央寄せ） */
   border: 1px solid var(--box-color); /* 枠線 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-titled .box-title {
   background-color: var(--box-color); /* 見出し背景色 */
   color: #fff; /* タイトル文字色 */
   padding: 0.6em 1em; /* 内側余白 */
   text-align: center; /* 中央揃え */
   font-weight: bold; /* 太字 */
}

.cstm-box-titled .box-content {
   padding: 2em; /* コンテンツの内側余白 */
}

/* 段落の余白リセット */
.cstm-box-titled p { margin:0; }

Cocoonテーマでは「見出しボックス」を利用できます

ラベル風タイトル

See the Pen ボックスデザイン｜ラベル風タイトル by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-label">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>ラベル風のタイトルデザイン</p>
  </div>
</div>

/* タイトル付きボックス（ラベル） */
.cstm-box-label {
  position: relative;
  margin: 2em auto;
  max-width: 800px;
  color: #d18279; /* 枠・ラベルの基準色 */
  border: 2px solid currentColor;
  border-radius:4px;
}

.cstm-box-label .box-title {
  position: absolute;
  top: -0.6em;
  left: 1em;
  background: #fff;
  color: currentColor; /* 枠と同色 */
  padding: 0 .5em;
  font-weight: bold;
}

.cstm-box-label .box-content {
  padding: 2em;
  color: #111; /* 中身だけ別色 */
}

/* 段落余白リセット */
.cstm-box-label p {
  margin: 0;
}

Cocoonテーマでは「ラベルボックス」を利用できます

左上背景タイトル

See the Pen ボックスデザイン｜左上背景タイトル by Turicco (@Turicco) on CodePen.

コードを見る

<div class="box-title-left">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>左上に背景色付きタイトル</p>
  </div>
</div>

.box-title-left {
  --box-color: #6fabb5; /* 基本カラー */
  position: relative; /* 配置の基準 */
  margin: 2em auto; /* 外側余白 */
  border: 1px solid var(--box-color); /* 枠線表示 */
  max-width: 800px; /* 最大横幅 */
  box-sizing: border-box; /* サイズ安定 */
}

.box-title-left .box-title {
  background-color: var(--box-color); /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 0.1em 1em; /* 内側余白 */
  position: absolute; /* ボックス内固定 */
  top: 0; /* 上位置 */
  left: 0; /* 左位置 */
  display: inline-block; /* 内容幅 */
  font-size: 0.9em; /* 文字サイズ */
  font-weight: bold; /* 太字 */
  line-height: 1.4; /* 行高安定 */
  width: auto; /* 自動幅 */
  max-width: calc(100% - 2em); /* はみ出し防止 */
  white-space: nowrap; /* 改行禁止 */
  overflow: hidden; /* 非表示 */
  text-overflow: ellipsis; /* 省略 */
}

.box-title-left .box-content {
  padding: 2.5em 2em 1.5em; /* タイトル分余白 */
}

.box-title-left p { margin: 0;}

Cocoonテーマでは「タブ見出しボックス」をカスタマイズして作れます

枠に重ねたタイトル

See the Pen ボックスデザイン｜ずらした背景タイトル by Turicco (@Turicco) on CodePen.

コードを見る

<div class="box-title-topleft">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>左上に背景色付きタイトル</p>
  </div>
</div>

/* 左上タイトル付きボックス */
.box-title-topleft {
  --box-color: #CCA99D; /* 基本色 */
  margin: 2em auto; /* 外側余白 */
  position: relative; /* タイトル基準 */
  border: 1px solid var(--box-color); /* 枠線 */
  border-radius: 3px; /* 角丸 */
  max-width: 800px; /* 最大幅 */
}

.box-title-topleft .box-title {
  background: var(--box-color); /* 背景 */
  color: #fff; /* 文字色 */
  padding: 0.2em 1em; /* 内側余白 */
  position: absolute; /* 左上固定 */
  top: -0.7em;
  left: 0.7em; /* 位置 */
  display: inline-block; /* 内容幅 */
  font-size: 0.9em; /* サイズ */
  font-weight:bold; /* 太字 */
  border-radius: 3px; /* 角丸 */
  max-width: calc(100% - 2em); /* 幅調整 */
  white-space: nowrap; /* 折返しなし */
  overflow: hidden; text-overflow: ellipsis; /* 省略 */
}

.box-title-topleft .box-content {
  padding: 2.5em 2em 2em; /* タイトル分の余白 */
}

/* 段落の余白なし */
.box-title-topleft p { margin: 0; }

マスキングテープ風

See the Pen ボックスデザイン｜マスキングテープ風 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-masking">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>テープで貼ったようなタイトル</p>
  </div>
</div>

/* マスキングテープ風ボックス */
.cstm-box-masking {
  position: relative; /* タイトル配置の基準 */
  margin: 2em auto; /* 外側余白 */
  background-color: #F6EEEC; /* ボックス背景色 */
  max-width: 800px; /* 最大幅 */
}

/* タイトル（テープ風） */
.cstm-box-masking .box-title {
  background-image: repeating-linear-gradient(
    -45deg,
    #F6EEEC 0,
    #F6EEEC 3px,
    #fafafa 3px,
    #fafafa 6px
  ); /* ストライプ模様 */
  transform: rotate(-2deg); /* テープの傾き */
  box-shadow: 0 1px 2px rgb(0 0 0 / .1); /* テープの影 */
  padding: .5em 1em; /* 内側余白 */
  line-height: 1; /* 行の高さ */
  position: absolute; /* 親の左上に固定 */
  top: -1em; /* 上位置 */
  left: 1em; /* 左位置 */
  display: inline-block; /* 内容幅に合わせる */
  font-size: 0.9em; /* フォントサイズ */
  width: auto; /* 幅自動調整 */
  max-width: calc(100% - 2em); /* 最大幅調整 */
  white-space: nowrap; /* 折り返さない */
  overflow: hidden; /* はみ出し非表示 */
  text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツ部分の余白 */
.cstm-box-masking .box-content {
  padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-masking p {
  margin: 0;
}

セロテープ風

See the Pen ボックスデザイン｜セロテープ風 by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-tape">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>透明テープ風のタイトル</p>
  </div>
</div>

/* セロテープ風ボックス */
.cstm-box-tape {
  position: relative; /* タイトル配置の基準 */
  margin: 2em auto; /* 外側余白 */
  background-color: #E6ECF2; /* ボックス背景色 */
  max-width: 800px; /* 最大幅 */
}

/* タイトル（セロテープ風） */
.cstm-box-tape .box-title {
  background-color: rgb(255 255 255 / .1); /* 透過背景色 */
  border-left: 2px dotted rgb(0 0 0 / .1); /* 左端のギザギザ */
  border-right: 2px dotted rgb(0 0 0 / .1); /* 右端のギザギザ */
  box-shadow: 0 0 5px rgb(0 0 0 / .12); /* 影 */
  transform: rotate(-2deg); /* 傾き */
  color: #666; /* 文字色 */
  padding: 10px 20px; /* 内側余白 */
  line-height: 1; /* 行の高さ */
  position: absolute; /* 親の左上に固定 */
  top: -1em; /* 上位置 */
  left: 1em; /* 左位置 */
  display: inline-block; /* 内容幅に合わせる */
  font-size: 0.9em; /* フォントサイズ */
  width: auto; /* 幅自動調整 */
  max-width: calc(100% - 2em); /* 最大幅調整 */
  white-space: nowrap; /* 折り返さない */
  overflow: hidden; /* はみ出し非表示 */
  text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツの余白 */
.cstm-box-tape .box-content {
  padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-tape p {
  margin: 0;
}

ボックスデザイン｜アイコン使用（Font Awesome）

アイコンは【Font Awesome 5】を使用

Cocoonテーマにはあらかじめ「Font Awesome」が内蔵されているため、プラグインなしで手軽にアイコン付きボックスが作成できます。

導入前の確認ステップ

以下の設定を確認してください。
Cocoon設定 > 全般 > フォントアイコン > 「Font Awesome 5」を選択して保存

デザインの種類（4パターン）

アイコン種類	特徴	主な用途
ペン（MEMO）	カジュアルで親しみやすい	補足説明・メモ書き
びっくりマーク（！）	目につきやすく注意を促す	注意事項・警告・重要項目
はてなマーク（？）	疑問を投げかけるデザイン	Q&A・よくある質問
チェックマーク（✓）	完了や肯定のイメージ	まとめ・ポイント・解決策

このデザインはCocoon「ラベルボックス」をカスタマイズしても作れます。

ペン（MEMO）

See the Pen ボックスデザイン｜メモアイコン付き by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-memo">
<div class="box-title">MEMO</div>
   <p>メモ風アイコンでカジュアルに</p>
</div>

/* -------------------------------------------
 * ボックスデザイン：ペン（MEMO）
 * ------------------------------------------- */
.cstm-box-memo {
  margin: 2em auto;
  padding: 1.2em 1.5em;
  background-color: #f0f4ff; /* 背景色 */
  border-radius: 7px;
  max-width: 800px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cstm-box-memo .box-title {
  display: flex;
  align-items: center;
  color: #839de5; /* 文字色 */
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cstm-box-memo .box-title::before {
  font-family: "Font Awesome 5 Free";
  content: "\f304"; /* ペンアイコン */
  font-weight: 900;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ボックス内の本文 */
.cstm-box-memo p { margin: 0; }

びっくりマーク（！）

See the Pen ボックスデザイン｜びっくりマーク by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-alert">
<div class="box-title">タイトルを入力</div>
   <p>びっくりマーク！で強調</p>
</div>

/* -------------------------------------------
 * ボックスデザイン：注意（ALERT）
 * ------------------------------------------- */
.cstm-box-alert {
  margin: 2em auto;
  padding: 1.2em 1.5em;
  background-color: #f7ebe6; /* ボックスの背景色 */
  border-radius: 7px;
  max-width: 800px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cstm-box-alert .box-title {
  display: flex;
  align-items: center;
  color: #bd7b68; /* アイコン・タイトルの色 */
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cstm-box-alert .box-title::before {
  font-family: "Font Awesome 5 Free";
  content: "\f06a"; /* びっくりマーク */
  font-weight: 900;
  margin-right: 8px;
  display: flex; /* 垂直中央配置 */
  align-items: center;
  justify-content: center;
}

/* ボックス内の本文 */
.cstm-box-alert p { margin: 0; }

はてなマーク（？）

See the Pen Untitled by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-question">
<div class="box-title">タイトルを入力</div>
   <p>はてなマーク？で疑問を表現</p>
</div>

/* -------------------------------------------
 * ボックスデザイン：疑問（QUESTION）
 * ------------------------------------------- */
.cstm-box-question {
  margin: 2em auto;
  padding: 1.2em 1.5em;
  background-color: #def3f5; /* ボックスの背景色 */
  border-radius: 7px;
  max-width: 800px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cstm-box-question .box-title {
  display: flex;
  align-items: center;
  color: #4d8d8d; /* アイコン・タイトルの色 */
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cstm-box-question .box-title::before {
  font-family: "Font Awesome 5 Free";
  content: "\f059"; /* はてなマーク */
  font-weight: 900;
  margin-right: 8px;
  display: flex; /* 垂直中央配置 */
  align-items: center;
  justify-content: center;
}

/* ボックス内の本文 */
.cstm-box-question p { margin: 0; }

チェックマーク（✓）

See the Pen ボックスデザイン｜チェックマーク by Turicco (@Turicco) on CodePen.

コードを見る

<div class="cstm-box-check">
<div class="box-title">Check</div>
   <p>チェックマーク✓で完了や確認を表現</p>
</div>

/* -------------------------------------------
 * ボックスデザイン：チェック（CHECK）
 * ------------------------------------------- */
.cstm-box-check {
  margin: 2em auto;
  padding: 1.2em 1.5em;
  background-color: #fff5cf; /* ボックスの背景色 */
  border-radius: 7px;
  max-width: 800px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* タイトル部分 */
.cstm-box-check .box-title {
  display: flex;
  align-items: center;
  color: #eba500; /* アイコン・タイトルの色 */
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* アイコン（疑似要素） */
.cstm-box-check .box-title::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /* チェックマーク */
  font-weight: 900;
  margin-right: 8px;
  display: flex; /* 垂直中央配置 */
  align-items: center;
  justify-content: center;
}

/* ボックス内の本文 */
.cstm-box-check p { margin: 0; }

まとめ

実用性が高いと思うものを中心に厳選して紹介しました。

この記事で紹介したCSSコードをコピペして、ぜひあなたのブログに取り入れてみてください。読者にとって見やすく、魅力的なブログ記事を作成しましょう。

こちらでは見出しデザインのサンプルもいくつか公開していますのでご覧ください。

CSSコピペOK！見出しをカスタマイズ｜おしゃれデザインサンプル集【Cocoon対応】

参考サイト

Comment 記事の感想を書き込んでいただけると幸いです

　コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

お問い合わせにあたり

カスタマイズに関するお問い合わせは、必ず対象のサイトURLをご入力ください【必須】
- サイトURLが記載されていない場合は検証ができないため、ご対応いたしかねます。
- 公開記事の内容以外（ソースコードの応用や反映されない原因の調査など）には対応できませんので、あらかじめご了承ください。

返信には数日～1週間ほどお時間をいただく場合があります。

コメント ※

名前 ※

メール ※

サイト

添付ファイルアップロードファイルの最大サイズ: 5 MB。画像, 音声, 動画, 文書, スプレッドシート, 対話型, テキスト, アーカイブ, コード, その他をアップロードできます。 Youtube、Facebook、Twitter および他サービスへのリンクは自動的にコメント内に埋め込まれます。ここにファイルをドロップ

日本語が含まれない内容は投稿できません。