コピペでできるボックスデザインサンプル13とビジュアルエディタへのボタン追加方法（CSS）

ブログの記事内で使えるボックスデザイン（囲み枠）の作り方と、記事投稿画面のビジュアルエディタにプルダウンメニューを追加してボックスを使えるようにする方法を紹介します。

以前FontAwesomeを使って記事を装飾する方法を説明したので、今回はFontAwesomeを使ったボックスデザインも紹介します。

【Simplicity】FontAwesomeを使って記事を装飾する方法

FontAwesomeを使って記事を装飾する方法と、Simplicityで使われているFontAwesomeのアイコンを変更する方法について説明します。

ボックスとは

ボックスとは、囲み枠のことです。

このように、文字を色の付いた枠で囲んだもの全般を、ボックス（囲み枠）と言います。

ブログ記事内で、適度にボックスデザインを取り入れると、文章に見た目の変化をつけることができるので、読みやすくなります。

ボックスの作り方

ボックスはCSS（スタイルシート）を利用して、簡単に作ることができます。

例えば、シンプルなグレーのボックスは

(CSS)
.grey-box{
 background-color: #f6f6f6;
 padding:20px;
 margin-bottom:1em;
}

(HTML) 
<div class="grey-box">
グレーボックス
シンプルなグレーボックスの表示例です。
</div>

これだけで作ることができます。

グレーボックス
シンプルなグレーボックスの表示例です。

HTMLは記事の投稿画面のテキストエディタで入力、CSSはスタイルシートに記述します。

ボックスデザイン例

１．枠線付きのボックス

枠線付きのボックス
背景色の他に枠線もつけました。

.box-style1{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border:1px solid lightgrey;
 }

２．枠線のみのボックス

枠線のみのボックス
背景色はなしで、枠線のみのボックスです。

.box-style2{
 padding: 20px; 
 margin-bottom: 1em;
 border:1px solid lightgrey;
 }

３．枠線太めのボックス

枠線がすこし太めのボックス
背景色はなしで、枠線のみのボックスです。

.box-border-bold{
 padding: 20px;
 margin-bottom: 1em;
 border: 7px solid #f6f6f6;
 }

４．角を丸めたボックス

角を丸めたボックス
四隅の角を丸くしました。

.box-style3{ 
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-radius:5px;
 }

５．二重枠線のボックス

二重枠線のボックス
枠線を二重線にしました。

.box-style4{ 
 padding: 20px;
 margin-bottom: 1em;
 border:3px double lightgrey;
 }

６．上だけ太線

上だけ太線
上にだけ太めの線をつけました。

.box-style5{
 padding: 20px;
 margin-bottom: 1em;
 background-color:#f6f6f6;
 border-top:5px solid lightgrey;
 }

７．上下ストライプ

上下ストライプのボックス

.box-style6{
position:relative;
}
.box-style6:before,
.box-style6:after{
content: "";
position: absolute;
left: 0;
top:0;
width:100%;
height: 4px;
background: repeating-linear-gradient(-45deg, #fff, #fff 1px, #b4b4b4 1px, #b4b4b4 2px);
}
.box-style6:after{
top:auto !important;
bottom:0;
}

８．上下線

上下線のボックスのタイトル

上下線ボックスの内容。タイトル付きのボックスです。

.box-style7{
border-top:1px solid #353C42;
border-bottom:1px solid #353C42;
width:95%;
margin-left:auto;
margin-right:auto;
padding:1.2em;
}
.box-style7-label{
text-align:center;
margin-bottom:1.5em;
font-size:.9em;
}

FontAwesomeを使ったボックスデザイン例

SimplicityとCocoonの補足情報ボックス

このブログではSimplicityというテーマを使っているのですが、Simplicityには、FontAwesomeを使ったボックスデザインが、デフォルトで3つ用意されています。

→現在はSimplicityの後継であるCocoonを利用しています。

「補足情報（i）,（?）,（!）」の3つです。

補足情報（i）

補足情報（?）

補足情報（!）

これらは、ビジュアルエディタの[スタイル]から選択することで、簡単に使うことができます。

今回は、このSimplicityの「補足情報ボックス」を参考にして作った、FontAwesomeを使ったボックスデザインを紹介します。

子テーマのCSS（スタイルシート）に記述し、記事内でクラス指定をすれば使えるようになります。
色やサイズを、自分のブログに合うように調節して使って下さい。

９．チェックボックス

.check-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.check-box::before{
 font-family: "FontAwesome";
 content: '\f058';
 font-size: 40px;
 position: absolute;
 top: 20px;
 left: 8px;
 color:#d9d9d9;
}

１０．シェプロンボックス

シェプロンボックス

.chevron-box{
background-color:#cfddd9;
color:#366c73;
padding: 20px 20px 20px 50px;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.chevron-box::before{
font-family: "FontAwesome";
content: '\f138'' ';
color:#285750;
font-size: 40px;
position: absolute;
top: 20px;
left: 8px;
}

１１．矢印ボックス

矢印ボックス

.arrow-right{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.arrow-right::before{
 font-family: "FontAwesome";
 content: '\f0a9';
 font-size: 40px;
 position: absolute;
 top: 0px;
 left: 8px;
 color:#d9d9d9;
}

１２．フラッグボックス

フラッグボックス

.flag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.flag-box::before{
 font-family: "FontAwesome";
 content: '\f024';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}

１３．タグボックス

タグボックス

 .tag-box{
background-color:#F2F2F2;
padding: 20px 20px 20px 50px;
position: relative;
margin-top: 1em;
margin-bottom: 1em;
display:block;
}
.tag-box::before{
 font-family: "FontAwesome";
 content: '\f02b';
 font-size: 30px;
 position: absolute;
 top: 0px;
 left: 10px;
 color:#d9d9d9;
}