Wordpress

【コピペOK】タイトル付きの囲み枠(BOX)のCSSを5個紹介!

Rito
Rito

こんにちは!
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を好きなものに変えてくださいね!

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

ラベルにタイトル


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/”]

COMMENT

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