記事を読みやすくするために見出し・文などに囲み枠をつける方法
せっかくだから読みやすい・見やすい記事が書きたい！
でも…よく見かける表示の仕方もどうしていいのかわからない...。
何とか調べたりしてやっては見たが、すぐ忘れてしまう…(=∀=) のでなるべく使いやすく・シンプルなものを書き留めておいた。
CSSにコードを入力して使う方法
テンプレートのCSSにコードを入力しておき、記事（文章）にHTMLコードをつけて入力して表示する。 いろいろできるが、シンプルのものにした。
色の実線で囲む
＊＊＊＊＊＊＊＊＊＊
CSS
.aiirobox {
padding: 1em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #165e83;
}
.aiirobox p {
margin: 0;
padding: 0;
}HTML
<div class="aiirobox">＊＊＊＊＊＊＊＊＊＊</div>
色の実線で囲む（色違い）
＊＊＊＊＊＊＊＊＊＊
CSS
.graybox {
padding: 1em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #e8ecef;
}
.graybox p {
margin: 0;
padding: 0;
}HTML
<div class="graybox">＊＊＊＊＊＊＊＊＊＊</div>
丸い角の実線・実線と同じ色の文字
＊＊＊＊＊＊＊＊＊＊
CSS
.aibox2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #507ea4;/*文字色*/
background: #FFF;
border: solid 3px #507ea4;/*線*/
border-radius: 10px;/*角の丸み*/
}
.aibox2 p {
margin: 0;
padding: 0;
}HTML
<div class="aibox2">＊＊＊＊＊＊＊＊＊＊</div>
上にラインのあるデザイン
＊＊＊＊＊＊＊＊＊＊
CSS
.bordertop{
padding: 1em 1em;
margin: 2em 0;
color: #5d627b;
background: white;
border-top: solid 5px #5d627b;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.bordertop p {
margin: 0;
padding: 0;
}HTML
<div class="bordertop">＊＊＊＊＊＊＊＊＊＊</div>
横縦ライン・バック色付き・文字同色
＊＊＊＊＊＊＊＊＊＊
CSS
.sidebox {
background-color: #eaf4fc;
border-left: 8px solid #165e83;
color: #165e83;
margin: 1em 0;
padding: 1em;
}HTML
<div class="sidebox"＊＊＊＊＊＊＊＊＊＊</div>
薄いグレーの二重線
＊＊＊＊＊＊＊＊＊＊
CSS
.doublebox {
padding: 1em 1em;
margin: 2em 0;
border: double 5px #ddd;
}
.doublebox p {
margin: 0;
padding: 0;
}HTML
<div class="doublebox">＊＊＊＊＊＊＊＊＊＊</div>
背景のみグレーの枠
＊＊＊＊＊＊＊＊＊＊
CSS
.shadowwaku {
padding: 1em 1em;
margin: 2em 0;
color: #222222;
background: #e8ecef;/*背景色*/
}
.shadowwaku p {
margin: 0;
padding: 0;
}HTML
<div class="shadowwaku">＊＊＊＊＊</div>
ブルーの見出し付き枠
+++++
＊＊＊＊＊＊＊＊＊＊
CSS
.point {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 3px #507ea4;
border-radius: 8px;
}
.point .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #507ea4;
font-weight: bold;
}
.point p {
margin: 0;
padding: 0;
}HTML
<div class="point"><span class="box-title">+++++</span><p>＊＊＊＊＊</p></div>
グレーの見出し付き枠
+++++
＊＊＊＊＊
CSS
.point2 {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 3px #ddd;
border-radius: 8px;
}
.point2 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #ddd;
font-weight: bold;
}
.point2 p {
margin: 0;
padding: 0;
}HTML
<div class="point2"><span class="box-title">+++++</span><p>＊＊＊＊＊</p></div>
シンプルな見出し付き枠
+++++
＊＊＊＊＊＊＊＊＊＊
CSS
.point3 {
position: relative;
margin: 2em 0;
padding: 1em 1em;
border: solid 2px #696969;
border-radius: 4px;
}
.point3 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 15px;
background: #FFF;
color: #696969;
font-weight: bold;
}
.point3 p {
margin: 0;
padding: 0;
}HTML
<div class="point3"><span class="box-title">+++++</span><p>＊＊＊＊＊</p></div>
枠の名前は自分が覚えやすそうなのを付け、作ってみたが、色・線の太さなど、変更可能。 まだほかにも表示の仕方はある・・・