【STINGER8】YellowBoxとRedBoxを使って補足情報と注意書きを作成してみた

この記事を読むのに必要な時間は約 8 分です。

どうも、トッド（Todd）です。

今回は、stinger8の中にある「YellowBox」「RedBox」「GrayBox」のカスタマイズを行い記事内で「補足情報」や「注意書き」を記入することが出来るBOXに変えていきたいと思います。

どうして、「YellowBox」「RedBox」「GrayBox」を編集するのかというとコレは僕の都合です。本来ならば、新しくdiv calassを作成して目的に合う名前にしもいいんですが、

過去に1度だけfunction.phpを無知な僕が触っていたら「ＥＲＲＯＲ」という文字だけが書かれた画面になってしまい、戻すのに苦労した思い出があります。

だからこそ、あまり使わないこの3つのＢＯＸを使って作ることにしました。

ＣＳＳを変更するだけで作ることが出来るので真っ白になる心配なし。

ということでデフォルトの状態で使ってみるとこんな感じになりました。↓

物凄くシンプルです。

この状態だと、記事を書く際に使おうとは僕自身思えませんでした。

という事でこんな感じに変更してみました。↓

デザインの云々は置いといてですね、こんな風に加工してあげると用途別のBoxが出来上がりました。

以下のコードを子テーマのＣＳＳにコピペすると上記デザインになります。ここから色を変えたり、アイコンの種類を変えたりしてみてください。↓

YellowBox
RedBox
GrayBox

おまけ
- 色々なマーク

YellowBox

.yellowbox{
	position: relative;
	margin: 40px 0px 30px;
	padding: 25px 20px 20px;
	border-radius: 10px;
	border: dotted 2px #ff882e;
	background-color: #ffd99c;
	font-size: 14px;
	clear: both;
}

.yellowbox:before{
	position: absolute;
	font-family: 'FontAwesome';
	content: '\f0eb';
	z-index: 2;
	padding-top: 3px;
	width: 32px;
	height: 32px;
	-moz-box-sizing: border-box;
	-webkid-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 16px;
	text-align: center;
	left: 16px;
	top: -16px;
	background-color: #ff882e;
	color: #ffd43c;
	font-size: 26px;
	line-height: 1;
}

.yellowbox:after {
	position: absolute;
	left: 32px;
	top: -10px;
	z-index: 1;
	content: 'POINT';
	padding: 3px 10px 3px 20px;
	border-radius: 5px;
	background-color: #ff882e;
	color: #fff;
	font-weight: bold;
	line-height: 1;	
}

完成イメージ

RedBox

.redbox {
	position: relative;
	margin: 40px 0 30px;
	padding: 20px;
	border-radius: 10px;
	border: solid 2px #ff0000;
	background-color: #ffefef;
	font-size: 14px;
	clear: both;
}

.redbox:before {
	position: absolute;
	left: 20px;
	top: -15px;
	content: '\f071';
	background-color: #ffffff;
	color: #ff0000;
	font-family: 'FontAwesome';
	font-size: 26px;
	line-height: 1;
}

完成イメージ

GrayBox

.graybox {
	position: relative;
	margin: 40px 0 30px;
	padding: 25px 20px 20px;
	font-size: 14px;
	background-color: #fff;
	border: solid 2px #757575;
	clear: both;
}

.graybox:before {
	position: absolute;
	font-family: 'FontAwesome';
	content: '\f046';
	padding-top: 3px;
	padding-left: 2px;
	padding-bottom: 3px;
	text-align: center;
	left: 15px;
	top: -15px;
	background-color: #f2f2f2;
	color: #000;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	font-size: 26px;
	-moz-box-sizing: border-box;
	-webkid-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1;
}

完成イメージ