「文書を囲む枠線」をSimple CSSに

以前から記事内に「文書を囲む枠線」があった方が見栄えがするかな?と思って「style.css」へ書き加えるつもりでいたけど、Simple CSSと言うプラグインを見つけたので、文書用とサイドバー用の枠線のCSSをこのプラグインに任せることにした。とにかくこのプラグインはCSSを順序立てて書き込み保存ボタンを押すだけでOK!と超簡単だから嬉しいね。

1)シンプルな囲み枠: 未使用

.box1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #000000;
}
.box1 p {
margin: 0;
padding: 0;
}

【サイドバーで使用した枠線】
.xxxxx {
display: inline-block;
width: 240px;
height: 200px;
border: solid 1px #cdcdcd;
}

2)角丸ボックス: 文書内で使用

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3; ➡文字色
background: #FFF;
border: solid 3px #6091d3; ➡線
border-radius: 10px; ➡角の丸み
}
.box2 p {
margin: 0;
padding: 0;
}

3)破線ボックス: 未使用

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0; ➡点線
}
.box3 p {
margin: 0;
padding: 0;
}

4)bottomに影:メインページの「最近の記事」で使用

.box4 {
padding: 0.5em 1em;
margin: 2em 0;
color: #FFF;
background: #6eb7ff;
border-bottom: solid 6px #3f87ce;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;
}
.box4 p {
margin: 0;
padding: 0;
}

*上記の1)~4)を<div class=”box?”><P>~文書~</p></div>とすればOK! まだまだ多くの文書枠があるけど、上記の1)~4)があれば良いかな?と思う。

PS:最近になって多くのサイトで利用してる「crayon-syntax-highlighter」プラグインを使おうか迷ったけど、ちょっとした文書(CSS等にも)を囲む程度に大袈裟かな?、取り合えず、試したが当ブログに似合わないと思い止めた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)