WordPress記事投稿画面にオリジナル領域を入れるボタンを追加する

次にデザインとなるCSSを書きます。
デザインとしてFontAwesomeを使っています。(FontAwesomeのページに飛ぶ)

style.css

/* 補足情報 */
.point {
position: relative;
margin: 40px 0 30px;
padding: 25px 20px 20px;
border-radius: 5px;
background-color: #cfedb7;
font-size: 12px;
clear: both;
}
.point:before {
position: absolute;
left: 15px;
top: -15px;
content: “\f0eb”;
z-index: 2;
width: 32px;
height: 32px;
padding-top: 3px;
border-radius: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #5ab80e;
color: #fff;
font-family: ‘FontAwesome’;
font-size: 24px;
line-height: 1;
text-align: center;
}
.point:after {
position: absolute;
left: 32px;
top: -8px;
z-index: 1;
content: “POINT”;
padding: 3px 10px 3px 20px;
border-radius: 3px;
background-color: #5ab80e;
color: #fff;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1;
}
.point > p:last-child {
margin: 0;
}
/* 注意書き */
.attention {
position: relative;
margin: 40px 0 30px;
padding: 20px;
border-radius: 5px;
border: dotted 2px #f00;
background-color: #ffefef;
font-size: 12px;
clear: both;
}
.attention:before {
position: absolute;
left: 20px;
top: -15px;
z-index: 2;
content: “\f071”;
background-color: #fff;
color: #f00;
font-family: ‘FontAwesome’;
font-size: 24px;
line-height: 1;
}
.attention:after {
position: absolute;
left: 32px;
top: -9px;
z-index: 1;
content: “ATTENTION”;
padding: 3px 3px 3px 20px;
background-color: #fff;
color: #f00;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1;
}
.attention > p:last-child {
margin: 0;
}
/* DOWATAcode */
.DOWATAcode {
position: relative;
margin: 40px 0 30px;
padding: 25px 20px 20px;
border-radius: 5px;
background-color: #76e5FF;
font-size: 12px;
clear: both;
}
.DOWATAcode:before {
position: absolute;
left: 15px;
top: -15px;
content: “\f121”;
z-index: 2;
width: 32px;
height: 32px;
padding-top: 3px;
border-radius: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #1B58B8;
color: #fff;
font-family: ‘FontAwesome’;
font-size: 24px;
line-height: 1;
text-align: center;
}
.DOWATAcode:after {
position: absolute;
left: 32px;
top: -8px;
z-index: 1;
content: “CODE”;
padding: 3px 10px 3px 20px;
border-radius: 3px;
background-color: #1B58B8;
color: #fff;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1;
}
.DOWATAcode > p:last-child {
margin: 0;
}

コメントを残す

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