前々から、「ブログ記事を囲み枠で修飾したいなぁ」と思ってました。そこで今回は、僕（たかぴろ☆）がよく使う、囲み枠をまとめてみます。
備忘録
これは僕、たかぴろ☆の囲み枠のサンプル、および備忘録です。
（参考になるなら、ご自由に使ってください）
－PR－
囲み枠の参考記事
囲み枠について、ネット検索していたら、便利でわかりやすい記事を見つけました。それがこちらです。
参考記事
→ 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
ブログ界では有名な「サルワカ」さんの記事です。たいへん参考になりました。ありがとうございます。 m(_ _)m
使い方
CSSのコードをCSSに追記し、ブログ記事でHTMLのタグを使用すれば、囲み枠の使用が可能です。
（もしこれでわからなければ、webやcssでググって勉強してください）
（なお、知っていると思いますがchildのcssに追記してください。）
囲み枠のサンプル
以下が、僕がよく使う囲み枠のサンプルです。
（コピペで使えるので、気に入れば使ってね）
その1／ 「合わせて読みたい」用のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<span class=”box-title”>合わせて読みたい</span>
<p>ここに文章</p>
</div>
＜CSS＞
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #ff7f50;
}
.box01 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #ff7f50;
color: #fffaf0;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box01 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
記事下の「合わせて読みたい」をアピールするときによいかな
その2／ 「関連記事」用のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<span class=”box-title”>関連記事</span>
<p>ここに文章</p>
</div>
＜CSS＞
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #62c1ce;
}
.box02 .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;
}
.box02 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
記事中の「関連記事」でリンクを強調したいときによいかな
その3／ 「コード記述」用のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<p>ここに文章</p>
</div>
＜CSS＞
padding: 0.5em 1em;
margin: 1em 0;
background: #f4f4f4;
border-left: solid 6px #5bb7ae;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box03 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
たまにコードをサンプルとして記事に記述するときよいかな
その4／ 「ポイント」用のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<span class=”box-title”>ポイント</span>
<p>ここに文章</p>
</div>
＜CSS＞
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 1px #95ccff;
border-radius: 8px;
}
.box04 .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;
}
.box04 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
記事中でポイントを強調したいときによいかな
その5／ 破線のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<p>ここに文章</p>
</div>
＜CSS＞
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 1px #5b8bd0;/*点線*/
}
.box05 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
記事中に文章を目立たせたいときによいかな
その6／ 実線［黒］のボックス（囲み枠）
更新日： 19/04/29
コード例）
＜HTML＞
<p>ここに文章</p>
</div>
＜CSS＞
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 0.5px #000000;
}
.box06 p {
margin: 0;
padding: 0;
}
イメージ例）
囲み枠のイメージはこんな感じです。
シンプルに囲み枠を使って文章を強調したいときによいかな
自分がよく使う囲み枠をまとめてみた
まあ、自分がよく使う、囲み枠をまとめてみました。今後のブログ作業がしやすくするためにね。
まとめ
これは単なる僕、たかぴろ☆の囲み枠の備忘録記事です。PC上よりネット上にアップしたほうが利便性がよいと思い、囲み枠のまとめ記事をアップしました。
●最後まで読んでいただきありがとうございました。
おしまい
