
こんにちは!
Rito(Rito)です!
見やすいブログって、枠線(BOX)が要所要所にありますよね。
今現在使っているwordpressテーマ「JIN」でもBOXのデザインは豊富にあります。
でも、ショートコードなんですよね。
ショートコードって便利なんですが、どうなんだろう?と思うところもありまして。
あわせて読みたい
ショートコード使いまくってたら、テーマ変更できなくない?
ショートコードじゃないタイトル付きの囲み枠を自作したい!
ということで、調べながら作ってみました。
注意素人が作ったものです。コピペは自己責任でお願いします。「デザインが崩れた」などの質問は受け付けておりません。
スポンサーリンク
枠の上にタイトル
POINTこんな感じのBOXですよ。
HTML
<div class="titlebox1">
<span class="box-title">タイトル</span>
<p>ここに文章</p>
</div>
CSS
.titlebox1 {
position: relative;
margin: 0.5em auto;
width: 90%;
padding: .5em 1em;
border: solid 3px #3F9877;
border-radius: 5px;
}
.titlebox1 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #3F9877;
font-weight: bold;
}
.titlebox1 p {
margin: 0;
padding: 0;
}
ラベルにタイトル
ご注意ください注意喚起に使おうかな。
色を変えたい場合はCSSの#ffcc11を好きなものに変えてくださいね!
色を変えたい場合はCSSの#ffcc11を好きなものに変えてくださいね!
HTML
<div class="titlebox2">
<span class="box-title">タイトル</span>
<p>ここに文章</p>
</div>
CSS
.titlebox2 {
position: relative;
margin: 2em auto 2em;
width: 95%;
padding: 1.5em 1.2em;
border: solid 3px #ffcc11;
}
.titlebox2 .box-title {
position: absolute;
display: inline-block;
top: -35px;
left: -3px;
padding: 15px 15px;
height: 35px;
line-height: 5px;
vertical-align: middle;
font-size: 17px;
background: #fc1;
color: #fff;
font-weight: 700;
border-radius: 3px 3px 0 0;
}
.titlebox2 p {
margin: 0;
padding: 0;
}
上にタイトル
要点のまとめ
- にんじん
- じゃがいも
- たまねぎ
こんな感じで使おうかな。
HTML
<div class="titlebox3">
<div class="box-title">タイトル</div>
<p>ここに文章</p>
</div>
CSS
.titlebox3 {
margin: 0.5em auto 2em;
width: 90%;
border: solid #89C2F4;
border-radius: 5px 5px 0 0;
}
.titlebox3 .box-title {
font-size: 1.2em;
background: #89c2F4;
padding: 15px 5px;
text-align: center;
color: #fff;
font-weight: 700;
letter-spacing: .05em;
}
.titlebox3 p {
padding: 15px 20px;
margin: 0;
}
ラベルにタイトル
あわせて読みたい・知られざる謎生物「Ritoの正体」の正体を追った!!
HTML
<div class="titlebox4">
<span class="box-title">タイトル</span>
<p>ここに文章</p>
</div>
CSS
.titlebox4 {
position: relative;
margin: 0.5em auto 2em;
width: 90%;
padding: 1.5em 1.2em 1em;
background: #EBF6F7;
}
.titlebox4 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 20px;
padding: 15px 15px;
height: 25px;
line-height: 0px;
vertical-align: middle;
font-size: 17px;
background: #57B3BA;
color: #fff;
font-weight: 700;
border-radius: 3px 3px;
}
.titlebox4 p {
margin: 0;
padding: 0;
}
黒板風
テストに出るポイント
- 710年…納豆ネバネバ!!
- 794年…うぐいす鳴く!!
- 894年…遣唐使終了!!
HTML
<div class="titlebox5">
<div class="box-title">タイトル</div>
<p>ここに文章</p>
</div>
CSS
.titlebox5 {
position: relative;
margin: 0.5em auto 2em;
width: 90%;
padding: 1.5em 0.2em 2em;
background: #369377;
color: #ffffff;
border: solid #E3B66A 10px;
}
.titlebox5 .box-title {
font-size: 1.2em;
padding: 5px 5px;
text-align: center;
color: #fff;
font-weight: 700;
letter-spacing: .05em;
}
.titlebox5 p {
margin: 0;
padding: 0;
}
コチラの記事もどうぞ。
今回はタイトル付きの囲み枠(BOX)デザインをご紹介しました。
過去にはシンプルな囲み枠(BOX)デザインをご紹介しています。
[nlink url=”https://rito105.com/wordpress-box-css-simple/”]
スポンサーリンク