ブログ記事や解説記事を書くとき、文章だけでは情報の整理や視覚的な強調が難しいことがあります。
そんなときに便利なのが 囲み枠（ボックススタイル） です。 囲み枠を使うことで、読者の目線を誘導したり、重要ポイントや注意点を強調できます。また、色や線の種類を工夫することで、記事全体のデザインに統一感を持たせることも可能です。
BloggerではWordPressのようにテーマ側で簡単に囲み枠が用意されていないため、HTMLとCSSで自作する必要があります。 この記事では、Bloggerでも簡単に使える 青系を中心とした囲み枠のサンプルとコード を紹介します。
背景塗りつぶし
See the Pen Untitled by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-solid">
<p>ここに本文</p>
</div>
<style>
.blogger-box-solid {
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #cde4ff; /* 背景色 */
}
.blogger-box-solid p {
margin: 0;
padding: 0;
}
</style>
実線
See the Pen waku02 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-border">
<p>ここに文章</p>
</div>
<style>
.blogger-box-border {
padding: 0.5em 1em;
margin: 2em 0;
border: solid 3px #000000; /* 枠線 */
}
.blogger-box-border p {
margin: 0;
padding: 0;
}
</style>
上下ライン
See the Pen waku03 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-topbottom">
<p>ここに文章</p>
</div>
<style>
.blogger-box-topbottom {
border-top: 3px solid #aaa;
border-bottom: 3px solid #aaa;
background-color: #eee;
padding: 2em;
}
.blogger-box-topbottom p {
margin: 0;
padding: 0;
}
</style>
括弧
See the Pen waku04 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-corner">
<p>ここに文章</p>
</div>
<style>
.blogger-box-corner {
padding: 30px;
position: relative;
}
.blogger-box-corner::before,
.blogger-box-corner::after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.blogger-box-corner::before {
border-left: solid 2px #000000;
border-top: solid 2px #000000;
top: 0;
left: 0;
}
.blogger-box-corner::after {
border-right: solid 2px #000000;
border-bottom: solid 2px #000000;
bottom: 0;
right: 0;
}
.blogger-box-corner p {
margin: 0;
padding: 0;
}
</style>
吹き出し
See the Pen waku05 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-bubble">
<p>ここに文章</p>
</div>
<style>
.blogger-box-bubble {
position: relative;
padding: 1em;
color: #fff;
background: #27acd9;
}
.blogger-box-bubble::after {
position: absolute;
content: '';
top: 100%;
left: 50px;
border: 15px solid transparent;
border-top: 15px solid #27acd9;
width: 0;
height: 0;
}
.blogger-box-bubble p {
margin: 0;
padding: 0;
}
</style>
枠+塗りつぶし
See the Pen waku06 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-soft-blue">
<p>ここに本文</p>
</div>
<style>
.blogger-box-soft-blue {
padding: 0.7em;
border: solid 2px #7bb0ff; /* ボーダーは少し濃いめの青 */
border-radius: 7px;
background: #e6f0ff; /* 背景は淡いブルー */
color: #2c6bcc; /* 文字色は濃い青で読みやすく */
margin: 2em 0;
font-weight: bold;
}
.blogger-box-soft-blue p {
margin: 0;
padding: 0;
}
</style>
本文下に破線
See the Pen waku07 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-gradient-blue">
<p>ここに文章</p>
</div>
<style>
.blogger-box-gradient-blue {
background-color: #fff;
background-image:
linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0) 50%, #fff 0%, #fff 100%),
linear-gradient(180deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0) 95%, #3b82f6 100%);
background-size: 8px 100%, 100% 2em;
border: 2px solid #3b82f6;
padding: 2em 1em 1.98em 1em;
color: #3b82f6;
font-weight: bold;
line-height: 2;
margin: 2em 0;
}
.blogger-box-gradient-blue p { margin:0; padding:0; }
</style>
ステッチ
See the Pen waku08 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-dashed">
ここに文章を入れてください
</div>
<style>
.blogger-box-dashed {
color: #fff;
background: #3b82f6; /* 青系 */
padding: 20px;
border: 2px dashed rgba(255,255,255,0.5);
box-shadow: 0 0 0 5px #3b82f6, 0 2px 3px 5px rgba(0,0,0,0.5);
}
</style>
枠に影あり
See the Pen Untitled by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-shadow">
ここに文章を入れてください
</div>
<style>
.blogger-box-shadow {
border: solid 1px #3b82f6; /* 青系 */
box-shadow: 2px 5px 5px #eeeeee;
padding: 1em;
}
</style>
WordPressテーマ「Cocoon」アイコンボックス風
See the Pen waku10 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-alert">
ここに本文
</div>
<style>
.blogger-box-alert {
background-color: #f0f8ff; /* 白ベースにほんのり青み */
position: relative;
margin-top: 20px;
padding: 20px 20px 20px 70px; /* 左側はアイコン分のスペース */
border-radius: 5px;
line-height: 1.5;
}
/* 丸アイコン（縦中央に調整） */
.blogger-box-alert::before {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%); /* 縦中央 */
font-size: 2rem;
font-weight: 700;
color: #ffffff; /* アイコン文字は白 */
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: "!";
background: #fb8a8a; /* アイコン色は赤系 */
}
/* 区切り線 */
.blogger-box-alert::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 55px;
width: 1px;
height: 30px;
background: rgba(0, 0, 0, 0.2); /* 薄いグレー */
}
</style>
タイトル+吹き出し
See the Pen waku11 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-title">
ボックスの内容をここに書きます
</div>
<style>
.blogger-box-title{
border: 1px solid #3b82f6; /* 線の色を青系に */
border-radius: 5px;
padding: 45px 10px 10px 10px;
position: relative;
z-index: 0;
background-color: #f0f8ff; /* 背景は薄い青で浮かないように */
}
/* タイトル部分 */
.blogger-box-title:before{
background-color: #3b82f6; /* タイトル背景色 */
border-radius: 5px 5px 0 0;
color: #fff; /* タイトル文字色は白 */
content: 'TITLE'; /* ここを自由に変更可能 */
height: 25px;
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
/* 吹き出し三角 */
.blogger-box-title:after {
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #3b82f6 transparent transparent transparent; /* 青系に変更 */
content: "";
position: absolute;
top: 35px;
left: 10px;
width: 0;
height: 0;
z-index: 1;
}
</style>
タイトル+吹き出し
See the Pen waku012 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-label">
<div>LABEL</div>
<p>ここに本文を書きます。</p>
</div>
<style>
.blogger-box-label {
position: relative;
margin-top: 1em;
padding: 1.8em 1.5em 1em 1.5em;
border: 2px solid #2589d0;
border-radius: 5px; /* 角丸追加で少し柔らかく */
}
/* 上部ラベル */
.blogger-box-label > div {
position: absolute;
top: -1.15em;
left: -.5em;
padding: .4em 1.4em;
border-radius: 25px;
background-color: #2589d0;
color: #fff;
font-size: .9em;
}
/* ラベル下の三角 */
.blogger-box-label > div::before {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 8px;
background-color: #2589d0;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}
.blogger-box-label p {
margin: 0;
}
</style>
WordPress風 タイトル+枠線
See the Pen waku013 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-label">
<div class="box-title">LABEL</div>
<div class="box-content">
ここに本文を書きます。
</div>
</div>
<style>
/* タイトル付きボックス（ラベル） */
.blogger-box-label {
position: relative;
margin: 2em auto;
max-width: 800px;
color: #1e3a8a; /* 枠・ラベルの基準色：暗めの青 */
border: 2px solid currentColor;
border-radius: 4px;
}
/* ラベル部分 */
.blogger-box-label .box-title {
position: absolute;
top: -0.6em;
left: 1em;
background: #fff;
color: currentColor; /* 枠と同色 */
padding: 0 .5em;
font-weight: bold;
}
/* 本文部分 */
.blogger-box-label .box-content {
padding: 2em;
color: #111; /* 中身は黒で読みやすく */
}
/* 段落余白リセット */
.blogger-box-label p {
margin: 0;
}
</style>
枠外にタイトルラベル
See the Pen waku15 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-title-top">
<div class="bgbox-title">TITLE</div>
<p>ここに本文。</p>
</div>
<style>
/* タイトル上付きボックス（青系統） */
.blogger-box-title-top {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #1e3a8a; /* 暗め青に統一 */
border-radius: 4px; /* optional: 少し角丸で柔らかく */
}
/* タイトル部分（ボックス上部） */
.blogger-box-title-top .bgbox-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #1e3a8a; /* 暗め青 */
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
/* 段落余白リセット */
.blogger-box-title-top p {
margin: 0;
padding: 0;
}
</style>
枠内左上にタイトル
See the Pen waku014 by matsusan0717 (@matsusan0717) on CodePen.
<div class="blogger-box-title-left">
<div class="bgbox-title">TITLE</div>
<div class="bgbox-content">
ここに本文を書きます。2行目もOK。
</div>
</div>
<style>
/* タイトル左寄せボックス（青系統） */
.blogger-box-title-left {
--box-color: #1e3a8a; /* 暗めの青 */
position: relative;
margin: 2em auto;
border: 1px solid var(--box-color);
max-width: 800px;
box-sizing: border-box;
}
/* タイトル部分 */
.blogger-box-title-left .bgbox-title {
background-color: var(--box-color);
color: #fff;
padding: 0.1em 1em;
position: absolute;
top: 0;
left: 0;
display: inline-block;
font-size: 0.9em;
font-weight: bold;
line-height: 1.4;
width: auto;
max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 本文部分 */
.blogger-box-title-left .bgbox-content {
padding: 2.5em 2em 1.5em; /* タイトル分余白 */
}
/* 段落余白リセット */
.blogger-box-title-left p {
margin: 0;
}
</style>
0 件のコメント:
コメントを投稿