WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

ブログの始め方

WordPress の囲み枠デザイン 30 選|TCD「Be」と「MAG」はコピペで OK

この記事は約 23 分で読めます。

ユウキです。

今回は、TCD テーマ「Be」と「MAG」の囲み枠装飾サンプルを 30 種類まとめて紹介します。

すべての CSS と HTML コードはコピペですぐに設定して使えるように確認済みなので、気に入ったものがあればお試しください。

この記事が役に立つ読者
  • TCD「Be」の囲み枠をカスタマイズしたい方
  • TCD「MAG」の囲み枠をカスタマイズしたい方
  • その他、WordPress の囲み枠をカスタマイズしたい方

装飾と CSS コードは、サルワカさんのコンテンツを参考にさせていただきました。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30|サルワカ

囲み枠装飾(CSS)を追加する前に確認

チェック

この記事で紹介する囲み枠は、ボタンをクリックすると HTML と CSS コードのサンプルが表示されます。

TCD「Be」と「MAG」については表示を確認済みなのでコピペですぐに使えますが、CSS をカスタマイズしてもらえばデザインを自由に変更できるので、好みで修正されてください。

一部、FontAwesome アイコンを利用したデザインがあるので、使いたい場合は専用の CSS を読み込んでください。

方法は 2 つで、外部サーバーから読み込む方法と、ダウンロードファイルを契約したサーバーにアップロードする方法がありますが、前者の方が手軽に利用できるのでおすすめです。

やり方は次のコードをコピーして、


<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">

TCD テーマオプション機能のカスタムスクリプトに追加するか、

TCD テーマオプションのカスタムスクリプトにコードを追加する

もしくは【外観】→【テーマエディター】→【header.php】へ進み、</head> の直前に張り付ければ設定完了です。

header.php の </head> 直前に コードを追加する

FontAwesome を使う場合、若干、サイトの表示速度が遅くなるので、その点はご注意ください。

囲み枠装飾のサンプルと CSS コード

シンプルな囲み枠

実線で囲むだけ

少し太めの線で囲んだだけの囲み枠デザイン。サイト全体がシンプルなモノクロのデザインであればいいかもしれませんが、華やかさな見た目にしたい場合は物足りないですね。

HTML
<div class="box01">
<p>ここにテキスト</p>
</div>
CSS
.box01 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: solid 3px #000000; /* 線の種類 太さ 色*/
}
.box01 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	font-weight: bold; /* 文字太さ */
}

角丸

色を変えて角を丸くしたデザイン。文字色や線色、角の丸み具合など、好みで変更できます。

HTML
<div class="box02">
<p>ここにテキスト</p>
</div>
CSS
.box02 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: solid 3px #6091d3; /* 線の種類 太さ 色*/
	border-radius: 10px; /* 角の丸み */
}
.box02 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #6091d3; /* 文字色 */
	font-weight: bold; /* 文字太さ */
}

背景塗りつぶし

線は使わずに背景を塗りつぶしただけのデザイン。

HTML
<div class="box03">
<p>ここにテキスト</p>
</div>
CSS
.box03 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #cde4ff; /* 背景色 */
}
.box03 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #2c2c2f; /* 文字色 */
}

上下だけ実線

背景の塗りつぶしに加えて、上下に太めの線を足したデザイン。線と背景には同系色など相性のいい色を選ぶとまとまります。

HTML
<div class="box04">
<p>ここにテキスト</p>
</div>
CSS
.box04 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #cde4ff; /* 背景色 */
	border-top: solid 5px #5989cf; /* 上 線の種類 太さ 色 */
	border-bottom: solid 5px #5989cf; /* 下 線の種類 太さ 色 */
}
.box04 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #2c2c2f; /* 文字色 */
}

二重線の枠

二重線の囲み枠デザイン。border プロパティで double を指定すると線の種類が選べます。

HTML
<div class="box05">
<p>ここにテキスト</p>
</div>
CSS
.box05 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	border: double 5px #4ec4d3; /* 線の種類 太さ 色 */
}
.box05 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

破線のボックス

破線の囲み枠デザイン。border プロパティの 2px の値を調整すると線の太さが調整できます。

HTML
<div class="box06">
<p>ここにテキスト</p>
</div>
CSS
.box06 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #f0f7ff; /* 背景色 */
	border: dashed 2px #5b8bd0; /* 線の種類 太さ 色 */
}
.box06 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

左右だけ二重線

左右だけ二重線のデザイン。

HTML
<div class="box07">
<p>ここにテキスト</p>
</div>
CSS
.box07 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: whitesmoke; /* 背景色 */
	border-left: double 7px #4ec4d3; /* 左 線の種類 太さ 色 */
	border-right: double 7px #4ec4d3; /* 右 線の種類 太さ 色 */
}
.box07 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #474747; /* 文字色 */
}

左だけ太線

付箋風の囲み枠デザイン。記事内の大事なポイントや補足事項を書く際に使ってみてください。

HTML
<div class="box08">
<p>ここにテキスト</p>
</div>
CSS
.box08 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #fff8e8; /* 背景色 */
	border-left: solid 10px #ffc06e; /* 左 線の種類 太さ 色 */
}
.box08 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #232323; /* 文字色 */
}

上だけ太線

上だけ線をつけたデザイン。背景と線と文字の色を同系統色でまとめるのがポイント。

HTML
<div class="box09">
<p>ここにテキスト</p>
</div>
CSS
.box09 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #ffebe9; /* 背景色 */
	border-top: solid 10px #ff7d6e; /* 上 線の種類 太さ 色 */
}
.box09 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #ff7d6e; /* 文字色 */
}

影をつけたデザイン

影をつけて少し浮いたように見せているデザイン。ミント風の配色にしていますが、背景は白やグレーでも合います。

HTML
<div class="box10">
<p>ここにテキスト</p>
</div>
CSS
.box10 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #e4fcff; /* 背景色 */
	border-top: solid 6px #1dc1d6; /* 上 線の種類 太さ 色 */
	box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.32); /* 水平 垂直 ぼかし 広がり 色 */
}
.box10 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #00BCD4; /* 文字色 */
}

スマートなデザイン

枠線でなく影で境目が分かるようになっています。上の線を左に配置したい場合は、border-top を border-left に入れ替える。

HTML
<div class="box11">
<p>ここにテキスト</p>
</div>
CSS
.box11 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: white; /* 背景色 */
	border-top: solid 5px #5d627b; /* 上 線の種類 太さ 色 */
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); /* 水平 垂直 ぼかし 広がり 色 */
}
.box11 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #5d627b; /* 文字色 */
}

分厚いボード風

背景より少し暗めの下線をつけることで厚みを表現したデザイン。

HTML
<div class="box12">
<p>ここにテキスト</p>
</div>
CSS
.box12 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #c6e4ff; /* 背景色 */
	border-bottom: solid 6px #aac5de; /* 下 線の種類 太さ 色 */
	border-radius: 9px; /* 角丸 */
}
.box12 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #5989cf; /* 文字色 */
}

更に影をつけた場合

影をつけてさらに立体感を出したデザイン。やや派手なので、本当に目立たせたい部分に使うといいかもしれません。

HTML
<div class="box13">
<p>ここにテキスト</p>
</div>
CSS
.box13 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #6eb7ff; /* 背景色 */
	border-bottom: solid 6px #3f87ce; /* 下 線の種類 太さ 色 */
	border-radius: 9px; /* 角丸 */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* 水平 垂直 ぼかし 広がり 色 */
}
.box13 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #fff; /* 文字色 */
}

かわいいボックスデザイン

布風

破線により布・テープのような風合いを表現したデザイン。

HTML
<div class="box14">
<p>ここにテキスト</p>
</div>
CSS
.box14 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #d6ebff; /* 背景色 */
	border: dashed 2px white; /* 線の種類 太さ 色 */
	box-shadow: 0px 0px 0px 10px #d6ebff; /* 水平 垂直 ぼかし 広がり 色 */
}
.box14 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

ピンク+角丸

背景と線の色をピンクにして、角に大きめの丸みをつけると、よりガーリーな印象のデザインになります。

HTML
<div class="box15">
<p>ここにテキスト</p>
</div>
CSS
.box15 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: #ffeaea; /* 背景色 */
	border: dashed 2px #ffc3c3; /* 線の種類 太さ 色 */
	box-shadow: 0px 0px 0px 10px #ffeaea; /* 水平 垂直 ぼかし 広がり 色 */
	border-radius: 8px; /* 角丸 */
}
.box15 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
	color: #565656; /* 文字色 */
}

ストライプ

背景を控えめな斜めストライプで塗りつぶしたデザイン。文字色を同系色にしてもマッチするはず。

HTML
<div class="box16">
<p>ここにテキスト</p>
</div>
CSS
.box16 { /* 囲み枠を指定 */
	margin: 0 0 2em; /* 枠の外側余白 */
	padding: 1em 0 0; /* 枠の内側余白 */
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); /* ストライプの角度, 色1始点, 色1終点, 色2始点, 色2終点, 繰返し */
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); /* Google Chrome、Safari向け */
}

.box16 p { /* 段落を指定 */
	margin: 0; /* 行の外側余白 */
	padding: 0 1em 1em; /* 行の内側余白 */
}

おしゃれなデザイン

交差線

縦と横の線が交差するデザイン。好みで線の色をカラフルに変えても OK 。

HTML
<div class="box17">
<p>ここにテキスト</p>
</div>
CSS
.box17 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}
.box17:before, .box17:after{
	content: '';
	position: absolute;
	top: -10px;
	width: 2px;
	height: -webkit-calc(100% + 20px);
	height: calc(100% + 20px);
	background-color: black;
}
.box17:before { left: 10px; }
.box17:after { right: 10px; }
.box17 p {
	margin: 0;
	padding: 0 2em 1em;
}

角をくるん

囲み枠の角でくるんと回転したような囲み枠デザイン。文字をカラフルな色にしても相性はよさそう。

HTML
<div class="box18">
<p>ここにテキスト</p>
</div>
CSS
.box18 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	border: solid 2px #ffcb8a;
	border-radius: 3px 0 3px 0;
}
.box18:before, .box18:after{
	content: '';
	position: absolute;
	width:10px;
	height: 10px;
	border: solid 2px #ffcb8a;
	border-radius: 50%;
}
.box18:before {
	bottom:-12px;
	right:-12px;
}
.box18:after {
	top:-12px;
	left:-12px;
}
.box18 p {
	margin: 0;
	padding: 0 1em 1em;
}

カギ括弧

大きめのカギ括弧。インタビューの名言など、引用を強調するのにいいかもしれません。

HTML
<div class="box19">
<p>ここにテキスト</p>
</div>
CSS
.box19 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
}
.box19:before, .box19:after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 20px;
	height: 30px;
}
.box19:before {
	border-left: solid 1px #5767bf;
	border-top: solid 1px #5767bf;
	top: 0;
	left: 0;
}
.box19:after {
	border-right: solid 1px #5767bf;
	border-bottom: solid 1px #5767bf;
	bottom:0;
	right: 0;
}
.box19 p {
	margin: 0;
	padding: 0 1em 1em;
}

点線の大括弧

点線の大括弧ではさんだデザイン。

HTML
<div class="box20">
<p>ここにテキスト</p>
</div>
CSS
.box20 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
}
.box20:before, .box20:after{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	width: 10px;
	height: 100%;
	box-sizing: border-box;
}
.box20:before {
	border-left: dotted 2px #15adc1;
	border-top: dotted 2px #15adc1;
	border-bottom: dotted 2px #15adc1;
	left: 0;
}
.box20:after {
	border-top: dotted 2px #15adc1;
	border-right: dotted 2px #15adc1;
	border-bottom: dotted 2px #15adc1;
	right: 0;
}
.box20 p {
	margin: 0;
	padding: 0 1em 1em;
}

グラデーション

橙から赤へのグラデーション。かなり派手なので使いどころは限られそうです。

HTML
<div class="box21">
<p>ここにテキスト</p>
</div>
CSS
.box21 {
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: linear-gradient(to right, #ffb03c, #ff708d);
	background: -webkit-linear-gradient(#ffb03c, #ff708d);
}
.box21 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #fff;
}

紙風

画面上に紙が置かれているようなデザイン。見出しっぽいデザインなので使う際は注意が必要です。

HTML
<div class="box22">
<p>ここにテキスト</p>
</div>
CSS
.box22 {
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #f4f4f4;
	border-left: solid 6px #5bb7ae;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.33);
}
.box22 p {
	margin: 0;
	padding: 0 1em 1em;
}

考えごと風(FontAwesome)

ぼんやりと考えごとをしているような吹き出しのデザイン。記事の内容を補足をしたいときに使うと効果的。

チェック

FontAwesome を外部読み込みで使う場合、次のコードをカスタムスクリプト、もしくは header.php の 手前に追加します。(2020年5月26日時点の最新バージョン)

PHP
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">
HTML
<div class="box23">
<p>ここにテキスト</p>
</div>
CSS
.box23 {
	position: relative;
	margin: 0 0 2em 40px;
	padding: 1em 0 0;
	background: #fff0c6;
	border-radius: 30px;
}
.box23:before{
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 15px;
	left: -40px;
	bottom: 0;
	color: #fff0c6;
}
.box23:after{
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	position: absolute;
	font-size: 23px;
	left: -23px;
	bottom: 0;
	color: #fff0c6;
}
.box23 p {
	margin: 0;
	padding: 0 1em 1em;
}

吹き出し

シンプルな吹き出しの囲み枠。見出しとして使ってもいいですね。

HTML
<div class="box24">
<p>ここにテキスト</p>
</div>
CSS
.box24 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #e6f4ff;
}
.box24:after{
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #e6f4ff;
	width: 0;
	height: 0;
}
.box24 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #5c98d4;
	font-weight: bold;
}

めくれたテープ風

角がはがれかけたテープのようなデザイン。柔らかい雰囲気のサイトで使うのがおすすめ。

HTML
<div class="box25">
<p>ここにテキスト</p>
</div>
CSS
.box25 {
	position: relative;
	margin: 0 0 2em;
	padding: 1em 0 0;
	background: #fff0cd;
	box-shadow: 0px 0px 0px 5px #fff0cd;
	border: dashed 2px white;
}
.box25:after{
	position: absolute;
	content: '';
	right: -7px;
	top: -7px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #ffdb88 #fff #ffdb88;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
	margin: 0;
	padding: 0 1em 1em;
	color: #454545;
}

タイトル付き

枠の途中にタイトル

POINT

ボックスの左上にタイトルを入れることができるデザイン。タイトル部分は改行されるとデザインが崩れてしまうので注意が必要。

HTML
<div class="box26">
<div><span class="box-title">ここにタイトル</span></div>
<p>ここにテキスト</p>
</div>
CSS
.box26 {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #95ccff;
	border-radius: 8px;
}
.box26 .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 18px;
	background: #FFF;
	color: #95ccff;
	font-weight: bold;
}
.box26 p {
	margin: 0;
	padding: 0 1em 1em;
}

ラベルをつけたデザイン

POINT

タイトルラベルが囲み枠からはみ出たデザイン。重要ポイントなどを強調したいときに使うのがおすすめ。

HTML
<div class="box27">
<div><span class="box-title">ここにタイトル</span></div>
<p>ここにテキスト</p>
</div>
CSS
.box27 {
	position: relative;
	margin: 2em 0;
	padding: 1em 0 0;
	border: solid 3px #62c1ce;
}
.box27 .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #62c1ce;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}
.box27 p {
	margin: 0;
	padding: 0 1em 1em;
}

ボックス内にラベル

POINT

ラベルをボックス内の角に入れたデザイン。CSS の left を right に書き換えれば、ラベルを右上に配置することが可能。

HTML
<div class="box28">
<div><span class="box-title">ここにタイトル</span></div>
<p>ここにテキスト</p>
</div>
CSS
.box28 {
	position: relative;
	margin: 0 0 2em;
	padding: 1.5em 0 0;
	border: solid 2px #FFC107;
}
.box28 .box-title {
	position: absolute;
	display: inline-block;
	top: -2px;
	left: -2px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #FFC107;
	color: #ffffff;
	font-weight: bold;
}
.box28 p {
	margin: 0;
	padding: 0 1em 1em;
}

タイトルを横いっぱいに広げたデザイン

POINT

タイトルの行を囲み枠の横いっぱいに広げると、目立って見やすくなります。

HTML
<div class="box29">
<div class="box-title">ここにタイトル</div>
<p>ここにテキスト</p>
</div>
CSS
.box29 {
	margin: 0 0 2em;
	background: #dcefff;
}
.box29 .box-title {
	font-size: 18px;
	background: #5fb3f5;
	padding: 8px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.box29 p {
	margin: 0;
	padding: .5em 1em;
}

更に影をつけた場合(FontAwesome)

POINT

配色を変えて影を追加したデザイン。POINT の左のチェックマークは FontAwesome のアイコンフォントで表示。

チェック

FontAwesome を外部読み込みで使う場合、次のコードをカスタムスクリプト、もしくは header.php の 手前に追加します。(2020年5月26日時点の最新バージョン)

PHP
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet">

アイコンを HTML で表示したい場合、CSS を外部読み込みした後、FontAwesome のギャラリーから任意のアイコンを選んで指定されたコードを追加します。ここでは次のコードで を追加しています。

HTML
<i class="fa fa-check"></i>
HTML
<div class="box30">
<div class="box-title"><i class="fa fa-check"></i> ここにタイトル</div>
<p>ここにテキスト</p>
</div>
CSS
.box30 {
	margin: 0 0 2em;
	background: #f1f1f1;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
	font-size: 18px;
	background: #5fc2f5;
	padding: 8px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.box30 p {
	margin: 0;
	padding: .5em 1em;
}

まとめ

好みの囲み枠のデザインは見つかりましたか?

CSS の各要素が何を指定していて、どんな風に変わるのかが分かってくると、自分なりにカスタマイズもできるので、いろいろ試しながらお気に入りのデザインを探してみてください。

追加した装飾をクイックタグで使いやすくカスタマイズする際はこちらの記事を参考にどうぞ。

見出しデザインのサンプルもまとめているので、よかったら参考にしてみてください。

それでは、今回はこの辺で。

ありがとうございました!

この記事のタイトルとURLをコピーする

関連記事

  1. エックスサーバーの契約手順|キャッシュバックの受け取り方も併せて解説

    ブログの始め方

    エックスサーバーの契約手順|キャッシュバックの受け取り方も併せて解説

    ユウキです。今回はエックスサーバーの契約手順をドメイン設定から W…

  2. TCD テーマ「Be」のテーマオプション設定を徹底解説

    ブログの始め方

    TCD「Be」のテーマオプション設定を徹底解説

    ユウキです。今回は WordPress テーマの中でも、デザイン性…

  3. 初心者向け | WordPressにおすすめのレンタルサーバーはふたつだけ

    ブログの始め方

    WordPressでおすすめのレンタルサーバーは2つ

    ユウキです。ブログをこれから始めようと思った際に、まずやることはレ…

  4. WordPress の設定と TCD テーマのカスタマイズ

    ブログの始め方

    WordPress の設定と TCD テーマのカスタマイズ

    ユウキです。今回は WordPress の初期設定について、TCD…

  5. All in One SEO Pack の設定方法と初期のSEO対策

    ブログの始め方

    All in One SEO Pack の設定方法と初期の SEO 対策

    ユウキです。今回はブログ開設初期に誤りがちな All in One…

  6. WordPress の見出しデザイン 64 選|TCD「Be」と「MAG」はコピペで OK

    ブログの始め方

    WordPress の見出しデザイン 64 選|TCD「Be」と「MAG」はコピペで OK

    ユウキです。今回は TCD テーマ「Be」と「MAG」の見出し装飾…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP