BLOG

コピペで簡単!WordPressで使えるラベル付き囲み枠・ボックス10選

『他ブログで見かける、ラベル付き囲み枠を作りたい!』
 
『でも、作り方がわからない!』
 
今回の記事ではコピペで簡単に作れる方法をご紹介します。個人的にいいなと思える囲み枠を10つ紹介しますので、いいなと思ったデザインを是非使ってみてください。
 

ラベル付き囲み枠・ボックス10選

 

今回はラベル付き囲み枠に絞って10種類紹介したいと思います。それでは1つ1つ見ていきましょう!

 
サンプル1

ここに文章

 

サンプル2

ここに文章

 
 
サンプル3
ここに文章
 
サンプル4

ここに文章

 
サンプル5

ここに文章

 
サンプル6

ここに文章

 
サンプル7

ここに文章

 
サンプル8

ここに文章

 
サンプル9

ここに文章

 
サンプル10

ここに文章

 

囲み枠の作り方

 
 
今回ご紹介した囲み枠の作り方について説明します。HTMLのテキストだけ変更すればいいものと、HTMLに加えてCSSの変更が必要なものがありますので、それぞれ説明していきます。
 

CSSの変更不要!HTML変更のみで作れる囲み枠

 
サンプル1

ここに文章

HTML

<div style="background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;">
<strong>サンプル</strong>
</div>

<div style="background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;">
<p>ここに文章</p>
</div>

 

 

サンプル2

ここに文章

HTML

<div style="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;">
<strong>サンプル</strong>
</div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">
<p>ここに文章</p>
</div>

 
 
 
サンプル3
ここに文章
 
HTML

<div style="height: 0px;">
<span style="background: #ffa500; padding: 6px 10px; color: #ffffff; font-weight: bold;">サンプル</span>
</div>

<div style="padding: 30px 15px 10px; border: 2px solid #ffa500;">ここに文章</div>

 

CSS+HTML変更で作れる囲み枠

 
これから紹介する囲み枠はCSS+HTML変更が必要になります。
CSS変更は、[ダッシュボード]→[外観]→[テーマエディター]→右側のバーの[style.css]で変更できます。
 
サンプル4

ここに文章

CSS

.box1 {
position: relative;
margin: 2em auto;
width:100%;
padding: 25px 10px 7px;
border: 2px solid #00419e;
}
.box1 .box-title {
position: absolute;
display: inline-block;
top: -2px; left: -2px; font-size:14px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
background: #00419e;
color: #ffffff; font-weight: bold;
}
.box1 p {
padding: 1px 5px;
margin: 0;
}

HTML

<div class="box1">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 
 
 
サンプル5

ここに文章

CSS

.box2 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box2 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box2 p {
margin: 0;
padding: 0;
}

HTML

<div class="box2">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 
 

 

サンプル6

ここに文章

CSS

.box3 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box3 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box3 p {
margin: 0;
padding: 0;
}

HTML

<div class="box3">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 
 

 

サンプル7

ここに文章

CSS

.box4 {
position: relative;
margin: 2em auto;
padding: 1.2em;
width: 100%;
color: #555555;
background-color: #fff;
border: 2px solid #8FBC8F;
box-shadow: 2px 2px 1px #ccc;
}
.box4 .box-title{
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #8FBC8F;
}
.box4 p {
padding: 0px 2px;
margin: 0;
}

HTML

<div class="box4">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 
 
サンプル8

ここに文章

CSS

.box5 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 100%;
color: #686868;
background-color: #fff;
border: 4px double #ef8b00;
box-shadow: 2px 2px 2px #ccc;
}
.box5 .box-title {
position: absolute;
padding: 0 1em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #ef8b00;
}
.box5 p {
padding: 1px 5px;
margin: 0;
}

HTML

<div class="box5">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 

 

サンプル9

ここに文章

CSS

.box6 {
margin: 2em 0;
background: #dcefff;
}
.box6 .box-title {
font-size: 1.2em;
background: #5fb3f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box6 p {
padding: 15px 20px;
margin: 0;
}

HTML

<div class="box6">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 

 

サンプル10

ここに文章

CSS

.box7 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box7 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box7 p {
padding: 15px 20px;
margin: 0;
}

HTML

<div class="box7">
<span class="box-title">サンプル</span>
<p>ここに文章</p>
</div>

 

最後に

 

『他ブログで見かける、ラベル付き囲み枠を作りたい!』
 
『でも、作り方がわからない!』
 
そんな方に向けて、今回の記事では個人的にいいなと思える囲み枠を10つ紹介しました。気に入ったものはありましたでしょうか?是非ご自身のブログに活用頂ければと思います。最後までお読み頂きありがとうございました。

Follow me!

-BLOG

PAGE TOP