お買い物マラソン開催中！9/24 01:59まで楽天市場
カスタマイズ
共通カスタマイズ

ボックスデザイン（囲み枠）CSSコピペOK！／ブログを見やすく装飾

アイキャッチ／ボックスデザインカスタマイズ
2022年08月24日
スポンサーリンク

Webサイトを見ているとボックスなどで装飾されていて｢見やすいな｣｢オシャレだな｣と感じたことはないでしょうか。

  • 見やすく記事をまとめたい
  • テーマに依存しない自由なデザインの囲み枠を使ってみたい
  • 無料ブログサービスでも囲み枠を使いたい

そんな方のお役に立てるように、この記事ではシンプルで使いやすい囲み枠デザインを厳選してご紹介いたします。

この記事の内容
  1. ボックスの使い方
  2. 簡単なカスタマイズ方法（背景色を変更するなど）
  3. サンプルごとのHTML・CSS（コピペOK）
ここを解説
女性
目次から見たいところへジャンプできます
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで２サイトを運営しています
はっちゃん
です
プロフィール
  1. ボックス（囲み枠）の使い方
    1. CSSを貼り付ける
    2. HTMLを貼り付ける
    3. 完成
  2. HTML・CSSを編集する方法
  3. ボックス（囲み枠）のカスタマイズについて（CSS）
    1. ボックスでよく使うCSSプロパティの例
  4. カラーコードを調べるのに便利なサイトと書籍
  5. ボックスサンプル／シンプル系
    1. 実線で囲む
    2. 二重線で囲む
    3. 点線（破線）で囲む
    4. 点線（ドット）で囲む
    5. 背景色をつける
    6. めくれた紙風
  6. ボックスサンプル／オシャレ系
    1. 背景色（ストライプ）をつける
    2. ふせん風ボックス
    3. 上にだけ太線
    4. 上下に太線
    5. 左右に二重線
    6. 少しずらして重ねてみる
    7. 線の一部だけ色を変える
    8. 方眼紙風
    9. SWELL目次風
    10. 左右に三角形をつける
  7. ボックスサンプル／可愛い系
    1. 背景色をつけて角を丸くする
    2. ふわふわとした囲み枠
    3. 茶系のステッチ風
    4. 白ステッチ風
    5. 手書き風
    6. ワンポイント
    7. 背景チェック
    8. 背景ストライプ（ピンク）
  8. ボックスサンプル／括弧（カッコ）
    1. かぎ括弧
    2. 角括弧
  9. ボックスサンプル／タイトル付き
    1. 上部にタイトル（見出しボックス）
    2. 上部にタイトル（ラベルボックス）
    3. 左上に背景色ありタイトル
    4. 左上にずらした背景色ありタイトル
    5. マスキングテープ風タイトル
    6. セロテープ風タイトル
  10. ボックスサンプル／アイコン使用（Font Awesome）
    1. メモのアイコン
    2. びっくりマークのアイコン
    3. はてなマークのアイコン
    4. チェックマークのアイコン
  11. ボックスの中にリストを入れる
    1. 箇条書き（リスト）の作り方について
  12. まとめ

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

CSSを貼り付ける

CSSはスタイル（装飾）を整えます。

使いたいボックスのCSSコードをコピペ。そのまま使うのはもちろん、ここで色の変更などができます。

CSSは、一度スタイルシートに保存しておけば何度でも同じデザインを使うことができます。

HTMLを貼り付ける

HTMLはボックスの骨組みとなる部分。

投稿編集画面、ボックスを入れたいところにコードをコピペして、表示させる内容を編集します。

HTMLを「パターン（再利用ブロック）」に登録しておくと次回簡単に呼び出せて便利です。

完成

プレビューで確認。これだけの手順です。

Cocoonや有料テーマではあらかじめ準備されているボックスが数多くありますが、テーマ独自のブロック以外で囲み枠を作成する場合コードは必須となります。

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

とはいえ、HTML と CSS のセットで作れてしまうので実はすごく簡単。

コピペ対応なので大丈夫ですよ～

目次に戻る

HTML・CSSを編集する方法

まずコードを貼り付ける場所についてはこちらをご覧ください。

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法
ブロガーHTML？CSS？どこに書いたらいいの？戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。この...
turicco.com
2023年01月18日

操作方法はCocoonの管理画面で進めていきますが、HTMLとCSSは共通なので他のテーマやブログサービスでも応用できます。

目次に戻る

ボックス（囲み枠）のカスタマイズについて（CSS）

囲み枠はCSSを使うことで背景色や文字の色を自由に変更できます。

サンプルをそのまま使うのはもちろん、自分のサイトの雰囲気や配色に合わせてお気に入りのボックスを作ってみてくださいね。

ボックスでよく使うCSSプロパティの例

CSSのプロパティと呼ばれる部分でスタイルを指定します。

背景色を設定background-color:#ここに6桁のカラーコード;
文字色を設定color:#ここに6桁のカラーコード;
枠線を引くborder:2px（太さ） solid（種類） #カラーコード;
角の丸みを設定border-radius:30px;/*pxや%で指定する*/
目次に戻る

カラーコードを調べるのに便利なサイトと書籍

カラーコードを調べるときはこちらのサイトが参考になります。

また配色を考えるときにとても重宝する書籍をご紹介します。ボックスだけなく迷いがちなサイトカラーもオシャレに整ってしまう一冊なのでお手元にあると便利。

＼３色だけでオシャレ実現／
迷わず決まる配色アイデア 3色だけでセンスのいい色
¥1,980 （2023/09/19 15:27時点 | Amazon調べ）
口コミを見る
Amazon
＼ポイント最大11倍！／
楽天市場
Yahoo!ショッピング
＼part２も出版されています／
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 見てわかる、迷わず決まるシリーズ
著:ingectar-e
¥990 （2023/08/10 23:39時点 | Amazon調べ）
口コミを見る
Amazon
＼ポイント最大11倍！／
楽天市場
Yahoo!ショッピング

それではここから囲み枠のデザインを紹介します。

目次に戻る

ボックスサンプル／シンプル系

ボックスデザイン／サンプル

実線で囲む

シンプルな実線で囲んだボックス。Cocoonでは「白抜きボックス」で作成できます。
<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:2em;/*内側余白*/
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:#fafafa;/*背景色*/
}

左右に二重線

左右に二重線をひいて影をつけています。
<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目次風

人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。
<div class="box30">
人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。
</div>
/*SWELL目次風*/
.box30{
margin: 2em auto;
padding:2em;/*内側余白*/
background:linear-gradient(-45deg,transparent 25%,#fafafa 25%,#fafafa 50%,transparent 50%,transparent 75%,#fafafa 75%,#fafafa);
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;
}

.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;
}
目次に戻る

ボックスサンプル／可愛い系

背景色をつけて角を丸くする

背景色をつけて角を丸くするだけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。
<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: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(111, 111, 111, .1) 50%, transparent 50%), linear-gradient(rgba(111, 111, 111,.1) 50%, transparent 50%);/* チェック色 */
background-size: 15px 15px;	/* チェックのサイズ */
}

背景ストライプ（ピンク）

背景をピンクのストライプにするとより可愛い雰囲気になります。
<div class="box58">
背景をピンクのストライプにするとより可愛い雰囲気になります。
</div>
/*背景ストライプ(ピンク)*/
.box58{
margin: 2em auto;
padding:2em;/*内側余白*/
background: repeating-linear-gradient(-45deg, #faf5f3, #faf5f3 5px, #fff 0, #fff 10px);
}
目次に戻る

ボックスサンプル／括弧（カッコ）

かぎ括弧

よく見かけるかぎ括弧です。
<div class="box61">
よく見かけるかぎ括弧です。
</div>
/*かぎ括弧*/
.box61{
margin: 2em auto;

padding:2em;/*内側余白*/
position: relative;
}

.box61::before,
.box61::after {
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.box61::before {
    border-left: solid 1px #333;
    border-top: solid 1px #333;
    top: 0;
    left: 0;
}
.box61::after {
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    bottom: 0;
    right: 0;
}

角括弧

左右につけた角括弧です。
<div class="box62">
左右につけた角括弧です。
</div>
/*角括弧*/
.box62{
    padding:2em;/*内側余白*/
    position: relative;
}

.box62::after,
.box62::before {
    content: "";
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 0.75em;
}

.box62::before {
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-top: 1px solid;
    bottom: 0;
    left: 0;
}
.box62::after {
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    bottom: 0;
    right: 0;
}
目次に戻る

ボックスサンプル／タイトル付き

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

上部にタイトル（見出しボックス）

ここにタイトルを入力
Cocoonの「見出しボックス」のようなタイトル付きのボックスです。

<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%;/*横幅最大幅 */
}

上部にタイトル（ラベルボックス）

ここにタイトルを入力
Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。
 <div class="box72">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「ラベルボックス」のようなタイトル付きのボックスです。
</div>
/*タイトル付き（ラベルボックス）*/
.box72{
margin: 2em auto; /* ボックスの余白 */
background-color:#fff; /* ボックス背景色 */
padding:2em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に) */
border: 2px solid #666;	/* ボックスの線 (太さ　種類　色)*/
}
.box72 .box-title {
background-color:#fff; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
font-weight:800;
color: #666; /* タイトル文字色 */
padding: 0 5px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/* 配置(ここを動かす) */
top: -5px; /*上から（-5px）移動*/
left: 20px; /*左から(20px)移動*/
}

左上に背景色ありタイトル

ここにタイトルを入力
Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。
<div class="box73">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。
</div>
/*左上に背景色ありタイトル*/
.box73{
margin: 2em auto; /* ボックスの余白 */
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)移動*/
}
目次に戻る

ボックスサンプル／アイコン使用（Font Awesome）

アイコンは【Font Awesome 5】を使用します。（Cocoonには標準装備されています）

メモのアイコン

MEMO
メモボックスです。ここにコンテンツを入力します。
<div class="box81">
<div class="box-title">MEMO</div>
メモボックスです。ここにコンテンツを入力します。
</div>
/*メモアイコンをつけた囲み枠*/
.box81 {
margin: 2em auto;
padding:1em 2em 2em;
background-color: #E8EAF0; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
}

.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;/*ボックス角の丸み*/
}

.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;/*ボックス角の丸み*/
}

.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;
}

チェックマークのアイコン

Check
チェックマークのボックスです。ここにコンテンツを入力します。
<div class="box84">
<div class="box-title">Check</div>
チェックマークのボックスです。ここにコンテンツを入力します。
</div>
/*チェックマークのアイコンをつけた囲み枠 */
.box84 {
margin: 2em auto;
padding:1em 2em 2em;
background-color:#F6F4D4; /* 背景色 */
border-radius:1px;/*ボックス角の丸み*/
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);/*ボックス影*/
}

.box84 .box-title {
color: #8B847E; /* タイトル文字色 */
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;
}
目次に戻る

ボックスの中にリストを入れる

囲み枠の中にリスト（箇条書き）を入れることもできます。

  • リスト１
  • リスト２
  • リスト３
  • 項目の数は自由に増減できます
<div class="box91">
 <ul>
  <li>リスト１</li>
  <li>リスト２</li>
  <li>リスト３</li>
  <li>項目の数は自由に増減できます</li>
 </ul>
</div>
/*ボックスにリストを入れる*/
.box91 {
margin: 2em auto;
padding:2em;/*内側余白*/
border:solid 2px #ccc;/*線の種類・太さ・色*/
}
.box91 ul {
margin:0;
}

Cocoonではブロックエディタを利用して、白抜きボックスの中にリスト（箇条書き）を入れることで簡単に作れますよ～。

箇条書き（リスト）の作り方について

<ul>
   <li>リスト１</li>
   <li>リスト２</li>
   <li>リスト３</li>
　 <li>項目の数は自由に増減できます</li>
 </ul>

この箇条書きをボックスの中に入れることで応用できます。

同様に番号付きの箇条書き<ol>を入れたり、リストについては色を変えることもできますので詳しいカスタマイズはこちらの記事をご覧ください。

ワードプレスのリストブロック（箇条書き）／点の色を変える方法３つ（CSS使用）
記事を書くときに使われる箇条書きのリスト。要点を見やすく、伝えやすくするためにどんなサイトでも使われていますね。今回はリストのデザインを少し変えてみる（点の色を変える）カスタマイズについて。３つの方法をご紹介します。箇条書きリストBefor...
turicco.com
2022年04月04日
目次に戻る

まとめ

ボックスデザイン

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

テーマ独自の囲み枠を使っても良いですが、自分でカスタマイズすることでデザインの幅は大きく広がります。

いろいろなデザインを使えるのは楽しくなりますね。

コードに詳しくなくてもコピペで使えたよ！！

ブログの装飾する際にボックスデザインを活用してみてください♪

目次に戻る

Comment

タイトルとURLをコピーしました