只今、PHPを学習しております

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

どうも、トッド(Todd)です。

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

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

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

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

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

 

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

物凄くシンプルです。

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

 

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

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

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

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;
}

完成イメージ

おまけ

「注意書き」「補足情報」のBOXを作ろうとfunction.phpを眺めていました。

その中で、function.phpをマジマジと見たことがない人は一度もこの機能に気づかないんじゃないか?と思う部分があったので載せておきます。

色々なマーク

 

  • はてなマーク(hatenamark)

  • 注意マーク(attentionmark)

  • 人物マーク(usermark)

  • チェックマーク(checkmark)

  • メモマーク(memomark)

使い方は、はてなマークの場合<p class=”hatenamark”>○○○</p>と、投稿編集画面のテキストの方で打ち込み○○○の中に好きな文字を記入すると文章の先頭にアイコンが付く仕様になっています。

 

最後まで読んでいただき有難うございました。

コメントを残す

メールアドレスが公開されることはありません。