Webサイトを見ているとボックスなどで装飾されていて「見やすいな」「オシャレだな」と感じたことはありませんか?
- 見やすく記事をまとめたい
- テーマに依存しない自由なデザインの囲み枠を使ってみたい
- テーマを移行したときリライトの負担を少なくしたい
- 無料ブログサービスでも囲み枠を使いたい
そんな方のお役に立てるように、今回は当ブログでも実際に採用しているものを含めて使いやすくてオシャレな囲み枠デザインを厳選してご紹介いたします!
- デザインを適用させる際のHTMLとCSSコード
- 簡単なカスタマイズ(背景色を変更するなど)
- 自由なボックスデザインの使い方

囲み枠の使い方
- Step1CSSを貼り付ける
使いたいボックスのCSSコードをコピペ。そのまま使うのはもちろん、ここで色の変更などをすることができます。
- Step2HTMLを貼り付ける
ボックスを入れたいところにコードをコピペして、表示させる内容を編集します
- Step3完成!
プレビューで確認します
テーマ独自のブロック以外のデザインで囲み枠を作成する場合、HTMLとCSSのコードは必須となります。

コードをいじるのは難しそう…

すべてコピペ対応なので大丈夫!お好みで色を変えることもできるよ。
HTML・CSSを編集する方法
まずコードを貼り付ける場所についてはこちらをご覧ください。
色の変更の仕方について(CSS)
囲み枠はCSSを使うと背景色や文字の色を自由に変更することができます。
デザインはシンプルな色にしているので、色を変更してお気に入りのボックスを作ってください。
カラーコードを調べるときに便利なサイト
カラーコードを調べるときに参考になるサイトはこちら。
また配色を考えるときにとても重宝する一冊をご紹介します。おすすめ


それではここから囲み枠のデザインを紹介します。いってみよう、やってみよう~♪
デザインサンプル/シンプル系
実線で囲む
<div class="box1">
シンプルな実線で囲んだボックス。Cocoonでは「白抜きボックス」で作成できます。
</div>
/*実線*/
.box1 {
margin:2em auto;
padding:2em;/*内側余白*/
border:solid 2px #A5A19A;/*線の種類・太さ・色*/
}
二重線で囲む
<div class="box2">
二重線で囲んだボックスです。色はお好みで変更してください。
</div>
/*二重線*/
.box2 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:double 5px #CCCFD6;/*線の種類・太さ・色*/
background-color:#EAEBEE;
}
点線(破線)で囲む
<div class="box3">
破線で囲んだボックスです。色はお好みで変更してください。
</div>
/*破線*/
.box3 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:dashed 2px #b3ada4;/*線の種類・太さ・色*/
}
点線(ドット)で囲む
<div class="box4">
点線(丸いドット)で囲むと少し可愛い雰囲気に。
</div>
/*斜線(ドット)*/
.box4 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:dotted 3px #e2c2b3;/*線の種類・太さ・色*/
}
背景色をつける
<div class="box5">
シンプルに背景色をつけたボックスです。色はお好みで変更してください。
</div>
/*背景色をつける*/
.box5 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#E5F2F1;/*背景の色*/
}
めくれた紙風
<div class="box6">
めくれたテープ風のボックスです。色はお好みで変更してください。
</div>
/*めくれたテープ風*/
.box6 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#f4f4f4;/*背景色*/
position:relative;
}
.box6:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
オシャレ系
背景色(ストライプ)をつける
<div class="box21">
背景色(ストライプ)をつけたボックスです。
</div>
/*背景色(ストライプ)をつける*/
.box21 {
margin: 2em auto;
padding:var(--box-padding);
background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
}
ふせん風ボックス
<div class="box23">
ふせん風のボックスに影をつけています。
</div>
/*ふせん風*/
.box23 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-left:solid 5px #e9b3a3;/*線の種類・太さ・色*/
background-color:#f5f5f5;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
}
上にだけ太線
<div class="box24">
上にだけ太線をひいて影をつけています。
</div>
/*上にだけ太線*/
.box24 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-top:solid 5px #e4cc8f;/*線の種類・太さ・色*/
background-color:#F9F4E8;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);/*ボックス影*/
}
上下に太線
<div class="box25">
上下に太線をひいています。
</div>
/*上下に太線*/
.box25 {
margin: 2em auto;
padding:2em;
border-top:solid 5px #8B968D;
border-bottom:solid 5px #8B968D;
background-color:#F3F4F3;/*背景色*/
}
左右に二重線
<div class="box26">
左右に二重線をひいています。
</div>
/*左右に二重線*/
.box26 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-left:double 5px #999fad;/*左の線の種類・太さ・色*/
border-right:double 5px #999fad;/*右の線の種類・太さ・色*/
background-color:#f1f3f4;/*背景色*/
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);/*ボックス影*/
}
少しずらして重ねてみる
<div class="box27">
ボックスの上に少しずらしたボックスを配置しています。
</div>
/*少しずらしたボックス*/
.box27{
margin: 2em auto;
padding:2em;/*内側の余白*/
background: none;/*元のボックス背景色なし*/
border:1px solid #ccc ;/*線の太さ・種類・色*/
position: relative;/*配置(基準)*/
}
.box27:after{
background-color:#eee;/*ずらしたボックスの背景色*/
border:none;
content: '';
position: absolute;/*配置(ここを動かす)*/
top: 7px;/*上から7pxずらす*/
left: 7px;/*左から7pxずらす*/
width: 100%;
height: 100%;
z-index: -1;
}
線の一部だけ色を変える
<div class="box28">
線の色を一部だけ変えたボックスです。
/*一部だけ線の色を変える*/
.box28 {
margin: 2em auto;
padding:2em;/*内側余白*/
border: 2px solid #eee;
position: relative;
z-index: 0;
}
.box28:before {
border-top:2px solid #c6d4c6;
border-left:2px solid #c6d4c6;
content: '';
display: block;
position: absolute;
top: -2px;
left: -2px;
width: 20px;
height: 20px;
z-index: 1;
}
方眼紙風
<div class="box29">
方眼紙をイメージしたボックスです。オシャレな雰囲気。
</div>
/*方眼紙風*/
.box29{
margin: 2em auto;
padding:2em;
background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg, transparent 19px, #ccc 20px);
background-size: 20px 20px;
}
SWELL目次風
<div class="box30">
人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。
</div>
/*SWELL目次風*/
.box30{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#eee 25%,#eee 50%,transparent 50%,transparent 75%,#eee 75%,#eee);
background-size: 4px 4px;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
}
左右に三角形をつける
<div class="box31">
左上と右下にアクセントとして三角形をつけたボックスです。
</div>
/*左右に三角形をつける*/
.box31{
margin: 2em auto;
padding:2em;
position: relative;
border:1px solid #c6d4c6;
}
.box31:before{
border-bottom:30px solid transparent;
border-left:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.box31:after{
border-left:30px solid transparent;
border-bottom:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}
可愛い系
実線の囲み枠を丸くする
<div class="box51">
背景に丸みをつけただけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。
</div>
/*背景色をつけて丸くする*/
.box51 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-radius:30px;/*丸みを調整*/
background-color:#f7e9e8;
}
ふわふわとした囲み枠
<div class="box52">
ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。
</div>
/*ふわふわした囲み枠*/
.box52 {
margin: 2em auto;
padding: 1em 2em;
background-color:#fff;/*背景色*/
box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;/*ふわりとした影*/
border-radius: 30px;
}
茶系のステッチ風
<div class="box53">
茶系の糸で縫ったようなデザインです。柔らかい雰囲気に。
</div>
/* 茶ステッチをつける---------------------------------------------- */
.box53{
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#efede9;/*背景色*/
}
.box53:before{
position: absolute;
border: 2px dashed #A7A297;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:10px;
}
白ステッチ風
<div class="box54">
白ステッチにしても可愛いらしいデザインになります。
</div>
/* 白ステッチをつける---------------------------------------------- */
.box54{
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#d6e0ea;/*背景色*/
}
.box54:before{
position: absolute;
border: 2px dashed #fff;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:3px;
}
手書き風
<div class="box55">
手書き風の囲み枠です。色はお好みで変更してください。
</div>
/*手書き風*/
.box55 {
margin: 2em auto;
padding:2em;/*内側余白*/
border-radius: 30px 60px/60px 30px;
border: solid 8px #ccc7be;
}
ワンポイント
<div class="box56">
ワンポイントに色をつけた可愛いらしいデザインになります。
</div>
/*ワンポイント*/
.box56 {
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
border: 8px solid #eee;/* 線の太さ・種類・色 */
z-index: 0;
}
.box56:before {
background-color:#cca497;/* ワインポイントの色 */
content: '';
display: block;
position: absolute;
top: -8px;
left: -8px;
width: 8px;
height: 8px;
z-index: 1;
}
背景チェック
<div class="box57">
背景をチェックしてもかわいい雰囲気に。薄い色がよいですね。
</div>
/*背景チェック*/
.box57 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-image: linear-gradient(90deg, rgba(249,232,228.5) 50%, transparent 50%), linear-gradient(rgba(251,238,234,.5) 50%, transparent 50%); /* チェック色 */
background-size: 15px 15px; /* チェックのサイズ */
}
背景ストライプ(ピンク)
<div class="box58">
背景をピンクのストライプにするとより可愛い雰囲気に。女性向けのサイトにおすすめです。
</div>
/*背景ストライプ(ピンク)*/
.box58{
margin: 2em auto;
padding:2em;/*内側余白*/
}
.box58:before{
background-color: rgba(255,255,255,0.8); /*文字部分背景色・透過度 */
border-radius: 5px;
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 10px;
z-index: -1;
}
.box58:after{
background: repeating-linear-gradient(-45deg, #EEDED6, #EEDED6 5px, #FDFBFA 0, #FDFBFA 10px); /* ストライプの色 */
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
}
タイトル付きボックス

ここからのタイトル付きボックスは、タイトルが長すぎるとレイアウトが崩れるので短めにしよう!
上部にタイトル(見出しボックス)
<div class="box71">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「見出しボックス」のようなタイトル付きのボックスです。
</div>
/*タイトル付き(見出しボックス)*/
.box71{
margin: 2em auto; /* ボックスの余白 */
background-color: #fff; /* ボックス背景色 */
padding: 5em 2em 2em; /* ボックス内側余白 */
position:relative; /*配置(ここを基準に)*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
}
.box71 .box-title {
background-color: #A7B4AF; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff; /* タイトル文字色 */
padding:10px;/*タイトル余白*/
text-align: center; /* タイトル中央寄せ */
position:absolute; /* 配置(ここを動かす) */
top:0; /*上から(0px)に配置 */
left:0; /*左から(0px)に配置 */
width:100%;/*横幅最大幅 */
}
上部にタイトル(ラベルボックス)
<div class="box72">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。
</div>
/*タイトル付き(ラベルボックス)*/
.box72{
margin: 2em auto; /* ボックスの余白 */
background-color:#fff; /* ボックス背景色 */
padding:2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
border: 2px solid #adc0ce; /* ボックスの線 (太さ 種類 色)*/
}
.box72 .box-title {
background-color:#fff; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
font-weight:800;
color: #adc0ce; /* タイトル文字色 */
padding: 0 5px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute; /* 配置(ここを動かす) */
top: -5px; /*上から(-5px)移動*/
left: 20px; /*左から(20px)移動*/
}
左上に背景色ありタイトル
<div class="box73">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。
</div>
/*左上に背景色ありタイトル*/
.box73{
margin: 2em auto; /* ボックスの余白 */
background-color: #ebebeb; /* ボックス背景色 */
padding:3em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #909792; /* ボックスの線 (太さ 種類 色)*/
}
.box73 .box-title {
background-color:#909792; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute; /* 配置(ここを動かす) */
top: 0; /*上から(0px)移動*/
left: 0; /*左から(0px)移動*/
}
左上にずらした背景色ありタイトル
<div class="box74">
<div class="box-title">ここにタイトルを入力</div>
左上にずらした背景色ありタイトルのボックスです。
</div>
/*左上にずらした背景色ありタイトル*/
.box74{
margin: 2em auto; /* ボックスの余白 */
background-color: #fafafa; /* ボックス背景色 */
padding:3em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #5a728b; /* ボックスの線 (太さ 種類 色)*/
}
.box74 .box-title {
background-color:#5a728b; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute; /* 配置(ここを動かす) */
top: -10px; /*上から(0px)移動*/
left: 20px; /*左から(0px)移動*/
}
マスキングテープ風タイトル
<div class="box75">
<div class="box-title">ここにタイトルを入力</div>
マスキングテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
</div>
/*マスキングテープ風*/
.box75{
margin: 2em auto;
background-color: #F6EEEC;/*ボックス背景色*/
padding:2.5em 2em 2em;/*ボックス内側余白*/
position:relative;/*配置(ここを基準に)*/
}
.box75 .box-title {
background-image: repeating-linear-gradient(-45deg,#F6EEEC 0, #F6EEEC 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute; /*配置(ここを動かす)*/
top: -15px; /*上から(-10px)移動*/
left: 20px; /*左から(20px)移動*/
}
セロテープ風タイトル
<div class="box76">
<div class="box-title">ここにタイトルを入力</div>
セロテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
</div>
/*セロテープ風*/
.box76{
margin: 2em auto; /* ボックスの余白 */
background-color: #E6ECF2; /* ボックス背景色 */
padding:2.5em 2em 2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
}
.box76 .box-title {
background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
box-shadow: 0 0 5px rgba(0,0,0,0.2); /*テープ影*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
color: #666; /*タイトル文字色 */
padding: 10px 20px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -15px; /*上から(-10px)移動*/
left: 20px; /*左から(20px)移動*/
}
アイコンを使ったボックス
メモのアイコン
<div class="box81">
<div class="box-title">MEMO</div>
メモボックスです。ここにコンテンツを入力します。
</div>
/*メモアイコンをつけた囲み枠*/
.box81 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #E8EAF0; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
}
.box81 .box-title {
color: #b4bbce ; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}
.box81 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f304";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}
びっくりマークのアイコン
<div class="box82">
<div class="box-title">タイトルを入力</div>
びっくりマークのボックスです。ここにコンテンツを入力します。
</div>
/*ビックリマークのアイコンをつけた囲み枠 */
.box82 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #EFE3DF; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
}
.box82 .box-title {
color: #cca497; /* タイトル文字色 */
font-size: 18px;
font-weight: bold;
}
.box82 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f06a";
font-size: 18px;
margin: 0 3px 0 0;
font-weight: bold;
}
はてなマークのアイコン
<div class="box83">
<div class="box-title">タイトルを入力</div>
はてなマークのボックスです。ここにコンテンツを入力します。
</div>
/*はてなマークのアイコンをつけた囲み枠 */
.box83 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #e7f1f2; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
}
.box83 .box-title {
color: #96a3a3 ; /* タイトル文字色 */
font-size: 18px;/*タイトル文字の大きさ*/
font-weight: bold;
}
.box83 .box-title:before {
font-family: "Font Awesome 5 Free";
content: "\f059";
font-size: 18px;/*アイコンの大きさ*/
margin: 0 3px 0 0;
font-weight: bold;
}
チェックマークのアイコン
<div class="box84">
<div class="box-title">Check</div>
チェックマークのボックスです。ここにコンテンツを入力します。
</div>
/*チェックマークのアイコンをつけた囲み枠 */
.box84 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #eee; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
}
.box84 .box-title {
color: #555; /* タイトル文字色 */
font-size: 18px;/*タイトル文字の大きさ*/
font-weight: bold;
}
.box84 .box-title:before {
font-family: "Font Awesome 5 Free";
content: '\f00c';
font-size: 18px;/*アイコンの大きさ*/
margin: 0 3px 0 0;
font-weight: bold;
}
ボックスの中にリストを入れる
囲み枠の中にリスト(箇条書き)を入れることもできます。
- リスト1
- リスト2
- リスト3
<div class="box91">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</div>
/*ボックスにリストを入れる*/
.box91 {
margin: 2em auto;
padding:2em;
border:solid 2px #ccc;/*線の種類・太さ・色*/
}
.box91 ul {
margin:0;
}
箇条書き(リスト)の作り方について
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
この箇条書きをボックスの中に入れることで応用することができます。
同様に番号付きの箇条書き<ol>を入れたり、リストについては色を変えることもできますので詳しいカスタマイズはこちらの記事をご覧ください。
ひとこと
実用性が高いと思うものを中心に厳選して紹介しました。
テーマ独自の囲み枠を使っても良いですが、自分でカスタマイズすることでデザインの幅は大きく広がります。

いろいろなデザインを使えるのは楽しいね!

そうだね、CSSひとつで自分好みの色にできるのも嬉しい。
ブログの装飾する際にボックスデザインを活用してみてください♪
Comment