【簡単コピペ】ＣＳＳで情報整理に便利なボックスを作るカスタマイズ【Addquicktag利用可】

2018.10.29 2018.10.24

ブログを書く時にあると便利なボックスを今回は作っていきます。

何か画像を途中で入る記事であればいいですが、文章だけの記事になってしまうことって個人的には意識しないと結構あります。
そんな時に役に立つのが今回作成する「ボックス」です！

これを使えば、情報をまとめることもでき、かつ、派手目な色にすれば差し色にもなるので、記事を見やすくすることも簡単にできますよ！
コピペでできるので、是非ともお試しあれ！

なお本カスタマイズを利用する場合はプラグインの「AddQuicktag」を使うことで効率よくブログを記事を作成することができます。
ちなみにAddQuicktagは重くならないですし（個人的な感想です）、もし気になるのであれば、記事を書かないときには無効化することもできるので、お気軽にお試しください。

【簡単クイックタグ作成】AddQuicktagが便利なので使い方をご紹介！

ブログを書く上で非常に便利なプラグインがあります。それは「AddQuicktag」です！名称のとおり、クイックタグを追加するというもので、毎回入力するようなコードをワンクリックで済ませることができるプラグインです。そんな...

完成図
1. 実物
導入方法
1. style.cssにコードを追記する！
2. class名で囲む・実用
実用するにはプラグインAddQuicktagがおすすめ
追記（タイトル自由ボックス）
1. class名

完成図

今回のカスタマイズでこのような3種類のボックスを使えるようになります。

注意点box

ポイントbox

参考box

実物

以下に表示されているものが実物です。
場合によっては上記画像と異なることがありますので、ご了承ください。

注意点Box

注意
注意
注意

ポイントBox

ポイント
ポイント
ポイント

参考Box

参考
参考
参考

導入方法

上記のカスタマイズを導入する方法はこのようになります。
CSSをコピペ　→　ボックスで囲みたい個所をboxのclassで囲む
です！

まずはCSSコードを追記しましょう。

style.cssにコードを追記する！

まずは下記のコードをstyle.cssにコピペします。

.iconbox{
	position:relative;
	width:98%;
	border:1px solid #aaa;
	border-radius:5px;
	padding:30px 20px 20px 20px;
	margin-top:50px;
	margin-bottom:30px
}
.iconbox ol{
	position:relative;
	counter-reset:number;
	list-style:none;
	padding-left:0;
}
.iconbox ol li:before{
	position:absolute;
	left:10px;
	display:block;
	counter-increment:number;
	content:counter(number);
	font-size:15px;
	height:20px;
	width:20px;
	line-height:20px;
	text-align:center;
	border-radius:50px;
}
.iconbox ol li{
	padding-left:40px;
	margin-bottom:20px;
	line-height:20px;
}
.iconbox1{/*注意点Box*/
	border-color:#FF8C00;
}
.iconbox1 ol li:before{
	background-color:#FF8C00;
	color:#fff;
}
.iconbox1 ul li:before{
	background-color:#FF8C00;
}
.iconbox1:before{
	content:"注意点";
	position:absolute;
	top:-22px;
	left:20px;
	background:#fff;
	color:#FF8C00;
	font-weight:bold;
	font-size:25px;
	padding:0 5px 0 60px;
}
.iconbox1:after{
	font-family:FontAwesome;
	content:"\f071";
	position:absolute;
	top:-25px;
	left:20px;
	background:#FF8C00;
	color:#fff;
	padding:2px 11px;
	border-radius:50px;
	font-size:25px;
	margin-left:5px;
}
.iconbox2{/*ポイントBox*/
	border-color:#FF00FF;
}
.iconbox2 ol li:before{
	background-color:#FF00FF;
	color:#fff;
}
.iconbox2 ul li:before{
	background-color:#FF00FF;
}
.iconbox2:before{
	content:"ポイント";
	position:absolute;
	top:-22px;
	left:20px;
	background:#fff;
	color:#FF00FF;
	font-weight:bold;
	font-size:25px;
	padding:0 5px 0 60px;
}
.iconbox2:after{
	font-family:FontAwesome;
	content:"\f00c";
	position:absolute;
	top:-25px;
	left:20px;
	background:#FF00FF;
	color:#fff;
	padding:2px 11px;
	border-radius:50px;
	font-size:25px;
	margin-left:5px;
}
.iconbox3{/*参考Box*/
	border-color:#0066CC;
}
.iconbox3 ol li:before{
	background-color:#0066CC;
	color:#fff;
}
.iconbox3 ul li:before{
	background-color:#0066CC;
}
.iconbox3:before{
	content:"参考";
	position:absolute;
	top:-22px;
	left:20px;
	background:#fff;
	color:#0066CC;
	font-weight:bold;
	font-size:25px;
	padding:0 5px 0 60px;
}
.iconbox3:after{
	font-family:FontAwesome;
	content:"\f02d";
	position:absolute;
	top:-25px;
	left:20px;
	background:#0066CC;
	color:#fff;
	padding:2px 11px;
	border-radius:50px;
	font-size:25px;
	margin-left:5px;
}

なお上記コード内にコメントで記載していますが、クラス名は以下の通り対応しています。
クラス名iconbox1→注意点box
クラス名iconbox2→ポイントbox
クラス名iconbox3→参考box
色などを変更したい場合は上記を参考にしてください。

class名で囲む・実用

cssコードのコピペができたらもう使用することができます。

実際に使ってみましょう。
注意点ボックスの場合は以下のように入力します。

<div class="iconbox iconbox1">ここに囲みたい文章やリストを入力</div>

このように表示されます。

ここに囲みたい文章やリストを入力

各ボックスのclass名は以下のようになります。

<div class="iconbox iconbox1">ここに囲みたい文章やリストを入力</div>

↑注意点Box

<div class="iconbox iconbox2">ここに囲みたい文章やリストを入力</div>

↑ポイントbox

<div class="iconbox iconbox3">ここに囲みたい文章やリストを入力</div>

↑参考ボックス

実用するにはプラグインAddQuicktagがおすすめ

いちいち上記で紹介したクラス名を入力するのは実用的ではありません。
効率よく使うにはAddQuicktagを使うことをおすすめします！

【簡単クイックタグ作成】AddQuicktagが便利なので使い方をご紹介！

こちらの記事ではAddQuicktagで簡単に導入できるカスタマイズ記事をまとめていますのでぜひご覧ください！

AddQuicktagで設定したいおすすめクイックタグまとめ

記事の内容を見栄え良くすることが出来るさまざまな装飾があります。よく使用するリストや表等をいちいち最初から入力するのは、入力する文字数も多くなりがちで非常に大変です。そんな悩みを解決するのがクイックタグです。クイックタグを一...

追記（タイトル自由ボックス）

こちらの記事でも紹介しましたが、タイトルを自由に設定できるボックスも作りましたので、こちらでも公開します。
なお、本記事のコードを既にコピペしている場合は、以下のコードをstyle.cssにコピペしてください。

.freenbox{
	position:relative;
	border-color:#FF3270 !important;

}
.freenbox .freenbox-title{
	position:absolute;
	top:-20px;
	background:#fff;
	padding:0 10px;
	color:#FF3270;
	font-size:22px;
	font-weight:bold;
}
.freenbox ol li:before{
	background-color:#FF3270;
	color:#fff;
}

class名

タイトルを自由に設定できるボックスを使う場合は、以下のクラス名で囲ってください。

<div class="iconbox freenbox">
<span class="freenbox-title">ここに題名を入れて下さい</span>ここはボックスの中
</div>

こんな感じで表示されます。

ここに題名を入れて下さいここはボックスの中

<ol>のリストも設定しているので<ol>のリストを使用した場合は、このようになります。

ここに題名を入れて下さい

ご自由にどうぞ

コードはこんな感じになっています。

<div class="iconbox freenbox">
<span class="freenbox-title">ここに題名を入れて下さい</span>
<li>ご自由にどうぞ</li>
<li>ご自由にどうぞ</li>
<li>ご自由にどうぞ</li>
</div>