CSS だけで作れるおしゃれなボックス（枠線・囲み枠）のデザインサンプルを紹介します。
ブログ記事は文章がメインですが、ボックスを使うと重要なポイントがわかりやすくなり、記事の読みやすさにもつながります。
コピペだけで使えるので、ぜひ試してみてください。
コピペで使える CSS ボックスサンプル
基本形は、class をつけた <div> のみ。
<div class="sample-box-1">div 要素に囲まれた部分がボックスになります</div>以下、コピペだけで使える CSS コードを 13 パターン紹介していきますので、ブログのデザインに合わせて調整していただければと思います。
class は sample-box-n の数字だけ変更した形になっています。
01. 背景色のみのシンプルなデザイン
まずは背景色がついただけのシンプルなボックス。余白が少ないと読みづらいため、padding を多めにするとよいですね（ 1 ～ 2 文字分ほど）。
.sample-box-1 {
background-color: #eee;
margin: 2em 0;
padding: 2em;
}02. 背景と文字を同系色にしたデザイン
背景と文字を同系色にするとおしゃれ感が増します。
同系色を調べるのは 0 to 255 というオンラインツールがおすすめ。コントラスト比が低いと見づらくなるので注意しましょう。
.sample-box-2 {
background-color: #e7efff;
color: #1c66fe;
margin: 2em 0;
padding: 2em;
}03. 枠線をつけたデザイン
続いて、枠線をつけたオーソドックスなボックス。
border の種類を solid から double などに変えるだけでも雰囲気が変わりますよ。
.sample-box-3 {
border: 4px double #ddd;
margin: 2em 0;
padding: 2em;
}04. 背景色＋枠線のデザイン
背景色をつけて border を左側だけにつけるデザインもよく見られます。これも同系色にするとおしゃれ感が増します。
強調ではなく、見出しや引用で使うケースが多いかもしれません。
.sample-box-4 {
background-color: #fbeefc;
border-left: 8px solid #c92ad2;
color: #c92ad2;
margin: 2em 0;
padding: 2em;
}05. 枠線をボックスから少し離したデザイン
背景色をつけたボックスと枠線の間を少し空けたいときは、box-shadow を使います。
白い部分は border で、外側の枠線を box-shadow で表現している形。
.sample-box-5 {
background-color: #cafbce;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #cafbce;
color: #0a8915;
margin: 2em 0;
padding: 2em;
}06. 可愛さを演出するステッチ風デザイン
ステッチ風デザインも、border と box-shadow の組み合わせで作れます。さらに border-radius で角を丸くするのがおすすめ。
ハンドメイド関連のブログにマッチしそうなパターンですね。
.sample-box-6 {
background-color: #8d1e47;
border: 2px dashed #fff;
border-radius: 8px;
box-shadow: 0 0 0 4px #8d1e47;
color: #fff;
margin: 2em 0;
padding: 2em;
}07. 紙の端を折り返したようなドッグイヤー風デザイン
疑似要素 ::after を使うと、表現の幅が広がります。以下はドッグイヤー風のサンプル。
右下の折返し部分は、背景色より濃くした同系色を使うのがおすすめ。
.sample-box-7 {
background-color: #c85d05;
color: #fff;
margin: 2em 0;
padding: 2em;
position: relative;
}
.sample-box-7::after {
content: "";
border-color: #853e04 #fff #fff #853e04;
border-style: solid;
border-width: 0 0 24px 24px;
bottom: 0;
position: absolute;
right: 0;
}08. 立体感のあるデザイン
box-shadow を複数指定すると、立体感のあるボックスを作れます。強調用ではなく、ボタンに使うのがよいかもしれません。
.sample-box-8 {
background-color: #190b56;
border: 1px solid #210e75;
box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset,
0 0 4px rgba(0, 0, 0, .8) inset,
2px 2px 2px rgba(0, 0, 0, .4);
color: #fff;
margin: 2em 0;
padding: 2em;
}09. グラデーションをかけたビジネスサイト風デザイン
グラデーションをかけると、ビジネスサイトでよく見るようなかっこいい雰囲気のボックスに。
グラデーションの調整は、Ultimate CSS Gradient Generator などのオンラインツールを使うと簡単です。
.sample-box-9 {
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-top: 4px solid #1c66fe;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
margin: 2em 0;
padding: 2em;
}10. 斜めストライプデザイン
linear-gradient を駆使すると、CSS だけで斜めストライプのボックスが作れます。
.sample-box-10 {
background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
color: #4a1086;
margin: 2em 0;
padding: 2em;
}11. 背景を少しずらした透明感のあるデザイン
上にガラスプレートを乗せたような透明感のあるデザインは、疑似要素 ::before と ::after を使って表現できます。
.sample-box-11 {
background-color: #fff;
margin: 2em 0;
padding: 2em;
position: relative;
z-index: 1;
}
.sample-box-11::before,
.sample-box-11::after {
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.sample-box-11::before {
background-color: rgba(255, 255, 255, .5);
left: 0;
top: 0;
z-index: -1;
}
.sample-box-11::after {
background-color: #a4f5c8;
top: 5px;
left: 5px;
z-index: -2;
}12. 手書き風デザイン
border-radius の指定だけで、角丸だけではなく手書き風デザインに早変わり。フォントを明朝体や筆文字書体にするとマッチしそうですね。
.sample-box-12 {
border: 4px solid #82636b;
border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
margin: 2em 0;
padding: 2em;
}13. ボックスのタイトルをプラスしたデザイン
「POINT」や「PICK UP」など、ボックスのタイトルをつけたデザインも CSS のみで表現可能。
content の値を自由に変更して使ってみてください。
.sample-box-13 {
border: 2px solid #da4033;
border-radius: 4px;
margin: 2em 0;
padding: 2em;
position: relative;
}
.sample-box-13::before {
background-color: #fff;
color: #da4033;
content: "POINT";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}WordPress はブロックエディターがおすすめ
WordPress は、ブロックエディターを使うと CSS を覚えなくても多彩な表現ができます。
ボックスのほかにタイムラインや FAQ など様々なタイプの装飾ができるので、もしクラシックエディターを使っているならぜひ試してみてください。
今後クラシックエディター向けのテーマ・プラグインは減り、サイト全体のデザインもブロックで作成するのが主流になるかもしれません。今のうちに慣れておくとよいですね。
※ これからブログを始めるなら、わざわざクラシックエディターを使う必要はないと思います
まとめ
CSS を覚えると、オリジナリティあふれるデザインにできます。
せっかく自分の「城」をもったのですから、自由に設計してブログを楽しみましょう！
あまりに奇抜なデザインにすると読みづらくなるので、最低限の読みやすさを確保するのは忘れないように。主役は、あくまで記事を読む読者です。