無料イラストをダウンロード【イラストAC】会員登録はこちら

ボックスデザイン(囲み枠)CSSコピペOK!ブログを見やすく装飾

アイキャッチ/ボックスデザイン テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

記事を読みやすくするために効果的なのがボックス(囲み枠)。この記事では、ボックスデザインのカスタマイズ方法と、コピペで使えるコードを紹介します。

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

CSSを使ったカスタマイズの基本的な手順についても解説しています!

  1. ボックス(囲み枠)の使い方
    1. CSSを記述するところ
  2. ボックス(囲み枠)のカスタマイズについて(CSS)
    1. ボックス(囲み枠)でよく使うCSSプロパティ
    2. カラーコードを調べるのに便利なサイトと書籍
  3. ボックスデザイン/シンプル系
    1. box1-1/実線で囲む
    2. box1-2/二重線で囲む
    3. box1-3/点線(破線)で囲む
    4. box1-4/点線(ドット)で囲む
    5. box1-5/背景色をつける
    6. box1-6/めくれた紙風
  4. ボックスデザイン/オシャレ系
    1. box2-1/背景色(ストライプ)をつける
    2. box2-2/ふせん風ボックス
    3. box2-3/上にだけ太線
    4. box2-4/上下に太線
    5. box2-5/左右に二重線
    6. box2-6/少しずらして重ねてみる
    7. box2-7/線の一部だけ色を変える
    8. box2-8/方眼紙風
    9. box2-9/SWELL目次風
    10. box2-10/左右に三角形をつける
  5. ボックスデザイン/可愛い系
    1. box3-1/背景色をつけて角を丸くする
    2. box3-2/ふわふわとした囲み枠
    3. box3-3/茶系のステッチ風
    4. box3-4/白ステッチ風
    5. box3-5/手書き風
    6. box3-6/ワンポイント
    7. box3-7/背景チェック
    8. box3-8/背景ストライプ(幅広)
    9. box3-9/手書きノート風
  6. ボックスデザイン/括弧(カッコ)
    1. box4-1/かぎ括弧
    2. box4-2/角括弧
  7. ボックスデザイン/タイトル付き
    1. box5-1/上部にタイトル(見出しボックス)
    2. box5-2/上部にタイトル(ラベルボックス)
    3. box5-3/左上に背景色ありタイトル
    4. box5-4/左上にずらした背景色ありタイトル
    5. box5-5/マスキングテープ風タイトル
    6. box5-6/セロテープ風タイトル
  8. ボックスデザイン/アイコン使用(Font Awesome)
    1. box6-1/メモのアイコン
    2. box6-2/びっくりマークのアイコン
    3. box6-3/はてなマークのアイコン
    4. box6-4/チェックマークのアイコン
  9. ボックスの中にリストを入れる
    1. 箇条書き(リスト)の作り方について
  10. まとめ
  11. 参考サイト
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計250件(月間約20件)購入いただいています
はっちゃん
です
プロフィール

ボックス(囲み枠)の使い方

ボックス(囲み枠)を作るために必要なのはHTMLCSSの2つです。

ボックスを作る手順
  • Step1
    CSSを貼り付ける

    CSSはスタイル(装飾)を整えます。

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

  • Step2
    HTMLを貼り付ける

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

    投稿編集画面でボックスを入れたいところにHTMLを記述します。

    • ワードプレス/ブロックエディタ:「カスタムHTML
    • ワードプレス/クラシックエディタ:「テキスト

    ワードプレスではよく使うHTMLを「パターン(旧:再利用ブロック)」に登録しておくと、次回以降簡単に呼び出せて便利です。(編集できるように非同期で使用します)

    ※「管理メニュー」→「パターン一覧」から開きます。

  • Step3
    完成

    プレビューで確認。これだけ。

HTMLCSS のセットで作れてしまうので実はすごく簡単。

CSSを記述するところ

ワードプレスの場合、CSSの編集は基本的に子テーマのスタイルシートを使います。HTMLとCSSは共通なので他のテーマやブログサービスでも応用できます。

スポンサーリンク

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

イメージ画像/pc/css

囲み枠はCSSを使うことでスタイルを自由に変更できます。

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

ボックス(囲み枠)でよく使うCSSプロパティ

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

  • 外側余白
    • margin:3em auto; /*上下・左右(px、em、rem等で指定する)*/
  • 内側余白
    • padding:1em 1.5em 1em 2em; /*上・右・下・左(px、em、rem等で指定する)*/
  • 枠線
    • border:2px(太さ) solid(種類) #333(カラーコード);
  • 色の設定
    • color:#333; /*文字色*/
      • background-color:#f4f4f4; /*背景色*/
      • border-color:#333; /*枠線の色*/
  • 角の丸み
    • border:2px(太さ) solid(種類) #333(カラーコード);

よく使うプロパティをこちらに記載しているのでご覧ください。

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

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

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

\私もこの本を愛用しています/
スポンサーリンク

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

box1-1/実線で囲む

シンプルな実線で囲んだボックス。Cocoonでは「白抜きボックス」で作成できます。
<div class="box1-1">
シンプルな実線で囲んだボックス。Cocoonでは「白抜きボックス」で作成できます。
</div>
/*実線*/
.box1-1 {
	padding:2em;/*内側余白*/
	border:solid 2px #333;/*線の種類・太さ・色*/
}

box1-2/二重線で囲む

二重線で囲んだボックスです。色はお好みで変更してください。
<div class="box1-2">
 二重線で囲んだボックスです。色はお好みで変更してください。
</div>
/*二重線*/
.box1-2 {
	padding:2em;/*内側余白*/
	border:double 7px #CCCFD6;/*線の種類・太さ・色*/
}

box1-3/点線(破線)で囲む

破線で囲んだボックスです。色はお好みで変更してください。
<div class="box1-3">
破線で囲んだボックスです。色はお好みで変更してください。
</div>
/*破線*/
.box1-3 {
	padding:2em;/*内側余白*/
	border:dashed 2px #b3ada4;/*線の種類・太さ・色*/
}

box1-4/点線(ドット)で囲む

点線(丸いドット)で囲むと少し可愛い雰囲気に。
<div class="box1-4">
点線(丸いドット)で囲むと少し可愛い雰囲気に。
</div>
/*斜線(ドット)*/
.box1-4 {
	padding:2em;/*内側余白*/
	border:dotted 5px #CCA99D;/*線の種類・太さ・色*/
}

box1-5/背景色をつける

シンプルに背景色をつけたボックスです。色はお好みで変更してください。
<div class="box1-5">
シンプルに背景色をつけたボックスです。色はお好みで変更してください。
</div>
/*背景色をつける*/
.box1-5 {
	padding:2em;/*内側余白*/
	background-color:#E5F2F1;/*背景の色*/
}

box1-6/めくれた紙風

めくれた紙風のボックスです。色はお好みで変更してください。
<div class="box1-6">
めくれた紙風のボックスです。色はお好みで変更してください。
</div>
/*めくれた紙風*/
.box1-6 {
	padding:2em;/*内側余白*/
	background-color:#f2f3f4;/*背景色*/
	position:relative;
}

.box1-6:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 25px 25px 0;
	border-style: solid;
	border-color: #ccc #fff  #ccc;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
スポンサーリンク

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

box2-1/背景色(ストライプ)をつける

背景色(ボーダー)をつけたボックスです。
<div class="box2-1">
背景色(ストライプ)をつけたボックスです。
</div>
/*背景色(ストライプ)をつける*/
.box2-1 {
	padding:2em;/*内側余白*/
	background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
}

box2-2/ふせん風ボックス

ふせん風のボックスに影をつけています。
<div class="box2-2">
ふせん風のボックスに影をつけています。
</div>
/*ふせん風*/
.box2-2 {
	padding:2em;/*内側余白*/
	border-left:solid 5px #e9b3a3;/*線の種類・太さ・色*/
	background-color:#F9F8F8;/*背景色*/
	box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
}

box2-3/上にだけ太線

上にだけ太線をひいて影をつけています。
<div class="box2-3">
 上にだけ太線をひいて影をつけています。
</div>
/*上にだけ太線*/
.box2-3 {
	padding:2em;/*内側余白*/
	border-top:solid 5px #F7C16E;/*線の種類・太さ・色*/
	background-color:#FDFBF6;/*背景色*/
	box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);/*ボックス影*/
}

box2-4/上下に太線

上下に太線をひいています。
<div class="box2-4">
上下に太線をひいています。
</div>
/*上下に太線*/
.box2-4 {
	padding:2em;
	border-top:solid 5px #8FAAAD;
	border-bottom:solid 5px #8FAAAD;
	background-color:#FBFBFB;/*背景色*/
}

box2-5/左右に二重線

左右に二重線をひいて影をつけています。
<div class="box2-5">
左右に二重線をひいています。
</div>
/*左右に二重線*/
.box2-5 {
	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);/*ボックス影*/
}

box2-6/少しずらして重ねてみる

ボックスの上に少しずらしたボックスを配置しています。
<div class="box2-6">
ボックスの上に少しずらしたボックスを配置しています。
</div>
/*少しずらしたボックス*/
.box2-6{
	padding:2em;/*内側の余白*/
	background: none;/*元のボックス背景色なし*/
	border:1px solid #ccc ;/*線の太さ・種類・色*/
	position: relative;/*配置(基準)*/
}
.box2-6:after{
	background-color:#eee;/*ずらしたボックスの背景色*/
	border:none;
	content: '';
	position: absolute;/*配置(ここを動かす)*/
	top: 7px;/*上から7pxずらす*/
	left: 7px;/*左から7pxずらす*/
	width: 100%;
	height: 100%;
	z-index: -1;
}

box2-7/線の一部だけ色を変える

線の色を一部だけ変えたボックスです。
<div class="box2-7">
線の色を一部だけ変えたボックスです。</div>
/*一部だけ線の色を変える*/
.box2-7 {
	padding:2em;/*内側の余白*/
	border: 3px solid #eee;	
	position: relative;
	z-index: 0;
}
.box2-7: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;
}

box2-8/方眼紙風

方眼紙をイメージしたボックスです。オシャレな雰囲気。
 <div class="box2-8">
方眼紙をイメージしたボックスです。オシャレな雰囲気。
</div>
/*方眼紙風*/
.box2-8{
	padding:2em;/*内側余白*/
	background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg,  transparent 19px, #ccc 20px);
	background-size: 20px 20px;
}

box2-9/SWELL目次風

人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。
<div class="box2-9">
人気のワードプレス有料テーマ「SWELL」の目次をイメージしました。
</div>
/*SWELL目次風*/
.box2-9{
	--border-color-1:#fafafa; /*背景ストライプの色*/
	--border-color-2:#ddd; /*上下枠線の色*/
	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-bottom: 4px double var(--border-color-2);
	border-top: 4px double var(--border-color-2);
	background-clip: padding-box;
}

box2-10/左右に三角形をつける

左上と右下にアクセントとして三角形をつけたボックスです。
<div class="box2-10">
左上と右下にアクセントとして三角形をつけたボックスです。
</div>
/*左右に三角形をつける*/
.box2-10{
	padding:2em;/*内側余白*/
	position: relative;
}

.box2-10:before{
	border-bottom:30px solid transparent;
	border-left:30px solid #c6d4c6;
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
}

.box2-10:after{
	border-left:30px solid transparent;
	border-bottom:30px solid #c6d4c6;
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
スポンサーリンク

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

box3-1/背景色をつけて角を丸くする

背景色をつけて角を丸くするだけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。
<div class="box3-1">
背景色をつけて角を丸くするだけでも可愛い雰囲気になります。border-radiusの値で丸みを調整します。
</div>
/*背景色をつけて角を丸くする*/
.box3-1 {
	padding:2em;/*内側余白*/
	border-radius:30px;/*丸みを調整*/
	background-color:#f9e8e2;
}

box3-2/ふわふわとした囲み枠

ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。
<div class="box3-2">
ふわふわと優しい雰囲気の囲み枠です。色はお好みで変更してください。
</div>
/*ふわふわした囲み枠*/
.box3-2 {
	padding:2em;/*内側余白*/
	background-color:#fff;/*背景色*/
	box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;/*ふわりとした影*/
	border-radius: 30px;
}

box3-3/茶系のステッチ風

茶系の糸で縫ったようなデザインです。柔らかい雰囲気に。
<div class="box3-3">
茶系の糸で縫ったようなデザインです。柔らかい雰囲気に。
</div>
/* 茶ステッチをつける---------------------------------------------- */
.box3-3{
	padding:2em;/*内側余白*/
	position: relative;
	z-index: 0;
	background-color:#f4f3f1;/*背景色*/
}

.box3-3: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;
}

box3-4/白ステッチ風

白ステッチにしても可愛いらしいデザインになります。
<div class="box3-4">
白ステッチにしても可愛いらしいデザインになります。
</div>
/* 白ステッチをつける---------------------------------------------- */
.box3-4{
	padding:2em;/*内側余白*/
	position: relative;
	z-index: 0;
	background-color:#d6e0ea;/*背景色*/
}

.box3-4: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;
}

box3-5/手書き風

手書き風の囲み枠です。色はお好みで変更してください。
<div class="box3-5">
手書き風の囲み枠です。色はお好みで変更してください。
</div>
/*手書き風*/
.box3-5 {
	padding:2em;/*内側余白*/
	border-radius: 30px 60px/60px 30px;
	border: solid 8px #ccc7be;
}

box3-6/ワンポイント

ワンポイントに色をつけた可愛いらしいデザインになります。
<div class="box3-6">
ワンポイントに色をつけた可愛いらしいデザインになります。
</div>
/*ワンポイント*/
.box3-6 {
	padding:2em;/*内側余白*/
	position: relative;
	border: 8px solid #eee;/* 線の太さ・種類・色 */
	z-index: 0;
}
.box3-6:before {
	background-color:#cca497;/* ワインポイントの色 */
	content: '';
	display: block;
	position: absolute;
	top: -8px;
	left: -8px;
	width: 8px;
	height: 8px;
	z-index: 1;
}

box3-7/背景チェック

背景をチェックにして可愛い雰囲気に。薄い色がよいですね。
<div class="box3-7">
背景をチェックしてもかわいい雰囲気に。薄い色がよいですね。
</div>
/*背景チェック*/
.box3-7 {
	padding:2em;/*内側余白*/
	background-image: linear-gradient(90deg, rgba(204, 204, 204, .1) 50%, transparent 50%), linear-gradient(rgba(204, 204, 204,.2) 50%, transparent 50%);/* チェック色 */
	background-size: 15px 15px;	/* チェックのサイズ */
}

box3-8/背景ストライプ(幅広)

背景を幅広のストライプにしても可愛い雰囲気になります。
<div class="box3-8">
背景を幅広のストライプにしても可愛い雰囲気になります。
</div>
/*背景ストライプ(ピンク)*/
.box3-8{
	padding:2em;/*内側余白*/
	background: repeating-linear-gradient(-45deg, #f2f3f4 0 6px, #fff 6px 12px);
}

box3-9/手書きノート風

Cocoonのスキン「手書きノート」で使われているデザインです。
<div class="box3-9">
Cocoonのスキン「手書きノート」で使われているデザインです。
</div>
/*手書きノート風*/
.box3-9{
	position: relative;
	background: #eee; /*背景色*/
	padding: 3em 1em 2em; /*内側余白(上・左右・下)*/
}

.box3-9::before {
	position: absolute;
	content: "";
	width: 95%;
	height: 10px;
	top: 0.5em;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	border-top: dotted 10px #fff; /*ドットの形・大きさ・色*/
}

ボックスデザイン/括弧(カッコ)

box4-1/かぎ括弧

よく見かけるかぎ括弧です。
<div class="box4-1">
よく見かけるかぎ括弧です。
</div>
/*かぎ括弧*/
.box4-1{
	--border-color:black;/*カッコの色*/
	padding:2em;/*内側余白*/
	position: relative;
}

.box4-1::before,
.box4-1::after {
	content: '';
	width: 20px;
	height: 30px;
	position: absolute;
}

.box4-1::before {
	border-left: solid 1px var(--border-color);
	border-top: solid 1px var(--border-color);
	top: 0;
	left: 0;
}
.box4-1::after {
	border-right: solid 1px var(--border-color);
	border-bottom: solid 1px var(--border-color);
	bottom: 0;
	right: 0;
}

box4-2/角括弧

左右につけた角括弧です。
<div class="box4-2">
左右につけた角括弧です。
</div>
/*角括弧*/
.box4-2{
	--border-color:black;/*カッコの色*/
	padding:2em;/*内側余白*/
	position: relative;
}

.box4-2::after,
.box4-2::before {
	content: "";
	height: 100%;
	width: 0.75em;
	position: absolute;
	bottom: 0;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.box4-2::before {
	border-left: 1px solid var(--border-color);
	left: 0;
}
.box4-2::after {
    border-right: 1px solid var(--border-color);
	right: 0;
}

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

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

box5-1/上部にタイトル(見出しボックス)

ここにタイトルを入力
Cocoonの「見出しボックス」のようなタイトル付きのボックスです。
<div class="box5-1">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「見出しボックス」のようなタイトル付きのボックスです。
</div>
/*タイトル付き(見出しボックス)*/
/*タイトル付き(見出しボックス)*/
.box5-1{
	background-color: #fff; /* ボックス背景色 */
	padding: 5em 2em 2em; /* ボックス内側余白 */
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
	position:relative; /*配置(ここを基準に)*/
}
.box5-1 .box-title {
	background-color: #8b9b9d; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff; /* タイトル文字色 */
	padding:10px;/*タイトル余白*/
	text-align: center;/* タイトル中央寄せ */
	width:100%;/*最大幅 */
	position:absolute;/* 配置(ここを動かす) */
	top:0;	/*上からの距離 */
	left:0; /*左からの距離 */
}

box5-2/上部にタイトル(ラベルボックス)

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

box5-3/左上に背景色ありタイトル

ここにタイトルを入力
Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。
<div class="box5-3">
<div class="box-title">ここにタイトルを入力</div>
Cocoonの「タブ見出しボックス」のようなタイトル付きのボックスです。
</div>
/*左上に背景色ありタイトル*/
.box5-3{
	padding:3em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 1px solid #757575; /* ボックスの線 (太さ・種類・色)*/
	background-color:#F8F8F8; /* ボックス背景色*/
}
.box5-3 .box-title {
	background-color:#757575; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 7px 12px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/* 配置(ここを動かす) */
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
}

box5-4/左上にずらした背景色ありタイトル

ここにタイトルを入力
左上にずらした背景色ありタイトルのボックスです。
<div class="box5-4">
<div class="box-title">ここにタイトルを入力</div>
左上にずらした背景色ありタイトルのボックスです。
</div>
/*左上にずらした背景色ありタイトル*/
.box5-4{
	padding:3em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 1px solid #CCA99D;/* ボックスの線 (太さ・種類・色)*/
}
.box5-4 .box-title {
	background-color:#CCA99D; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 7px 12px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/* 配置(ここを動かす) */
	top: -10px; /*上からの距離*/
	left: 20px; /*左からの距離*/
}

box5-5/マスキングテープ風タイトル

ここにタイトルを入力
マスキングテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
<div class="box5-5">
<div class="box-title">ここにタイトルを入力</div>
マスキングテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
</div>
/*マスキングテープ風*/
.box5-5{
	background-color: #F6EEEC;/*ボックス背景色*/
	padding:2.5em 2em 2em;/*ボックス内側余白*/
	position:relative;/*配置(ここを基準に)*/
}
.box5-5 .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; /*上からの距離*/
	left: 20px; /*左からの距離*/
}

box5-6/セロテープ風タイトル

ここにタイトルを入力
セロテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
<div class="box5-6">
<div class="box-title">ここにタイトルを入力</div>
セロテープを貼り付けたようなデザインのボックスです。ここにコンテンツを入力します。
</div>
/*セロテープ風*/
.box5-6{
	background-color: #E6ECF2; /* ボックス背景色 */
	padding:2.5em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
}
.box5-6 .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; /*上からの距離*/
	left: 20px; /*左からの距離*/
}

ボックスデザイン/アイコン使用(Font Awesome)

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

box6-1/メモのアイコン

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

.box6-1 .box-title {
	color: #b4bbce ; /* タイトル文字色 */
	font-size: 18px;
	font-weight: bold;
}

.box6-1 .box-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f304";
	font-size: 18px;
	margin: 0 3px 0 0;
	font-weight: bold;
}

box6-2/びっくりマークのアイコン

タイトルを入力
びっくりマークのボックスです。ここにコンテンツを入力します。
<div class="box6-2">
<div class="box-title">タイトルを入力</div>
びっくりマークのボックスです。ここにコンテンツを入力します。
</div>
/*ビックリマークのアイコンをつけた囲み枠 */
.box6-2 {
	padding:1em 2em 1.5em;
	background-color: #EFE3DF; /* 背景色 */
	border-radius:1px;/*ボックス角の丸み*/
}

.box6-2 .box-title {
	color:#AA8276; /* タイトル文字色 */
	font-size: 18px;
	font-weight: bold;
}

.box6-2 .box-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f06a";
	font-size: 18px;
	margin: 0 3px 0 0;
	font-weight: bold;
}

box6-3/はてなマークのアイコン

タイトルを入力
はてなマークのボックスです。ここにコンテンツを入力します。
<div class="box6-3">
<div class="box-title">タイトルを入力</div>
はてなマークのボックスです。ここにコンテンツを入力します。
</div>
/*はてなマークのアイコンをつけた囲み枠 */
.box6-3 {
	padding:1em 2em 1.5em;
	background-color: #e7f1f2; /* 背景色 */
	border-radius:1px;/*ボックス角の丸み*/
}

.box6-3 .box-title {
	color: #96a3a3 ; /* タイトル文字色 */
	font-size: 18px;/*タイトル文字の大きさ*/
	font-weight: bold;
}

.box6-3 .box-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f059";
	font-size: 18px;/*アイコンの大きさ*/
	margin: 0 3px 0 0;
	font-weight: bold;
}

box6-4/チェックマークのアイコン

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

.box6-4 .box-title {
	color: #FFBD59; /* タイトル文字色 */
	font-size: 18px;/*タイトル文字の大きさ*/
	font-weight: bold;
}

.box6-4 .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>
  <li>項目の数は自由に増減できます</li>
 </ul>
</div>
/*ボックスにリストを入れる*/
.box91 {
	padding:2em;/*内側余白*/
	border:solid 2px #ccc;/*線の種類・太さ・色*/
}

.box91 ul {
	margin:0;
}

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

箇条書き(リスト)の作り方について

<ul>
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
  <li>項目の数は自由に増減できます</li>
 </ul>

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

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

まとめ

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

ボックスデザイン(囲み枠)を使うことで、ブログのデザインを簡単に向上させることができます。シンプルなものから、カラフルで目立つものまで、用途に応じて使い分けることが大切です。

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

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

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

参考サイト

一部、下記サイトを参考にさせていただきました。こちらの紹介でお礼とさせていただきます。

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

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