コードを記事に貼るだけの飾り枠

2020年9月27日

これって少し手間だけど、何かと便利に使えそう
CSSもプラグインも使わず記事にソースコードを直接貼るだけの飾り枠です

簡単、シンプルが一番ですよね♪( ^-^)/★,｡･

早速試してみました
背景色や線の色を好きに変えるだけでOK

・四角　背景のみ枠線なし

<div style="background: #F7F7F7; padding: 10px; ">ここに文章を入力します</div>

・四角　背景のみ枠線あり

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; padding: 10px; ">ここに文章を入力します</div>

・四角　枠二重線

<div style="background: #F7F7F7; border: 7px double #A1A1A1; padding: 10px;">ここに文章を入力します</div>

・四角　シャドー付き

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに文章を入力します</div>

・四角　浮き出し

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに文章を入力します</div>

・四角　内側二重枠線

<div style="background: #E0EFFF; border: 4px double #6495ED; box-shadow: 0 0 0 10px #E0EFFF; padding: 10px;">ここに文章を入力します</div>

・ステッチ風　四角

<div style="background: #FFF9FF; border: 2px dashed #F5B1AA; box-shadow: 0 0 0 10px #FFF9FF; padding: 10px;">ここに文章を入力します</div>

・ステッチ風　角丸

<div style="display: inline-block; background: #EAFFEA; border: 2px dashed #43A047; border-radius: 5px; box-shadow: 0 0 0 10px #EAFFEA; padding: 10px;">ここに文章を入力します</div>

・メモ帳風 点線

<div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;">
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #A1A1A1;">文字が少ない行</div>
</div>

・わら半紙風アンダーライン実線

<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行</div>
</div>

・わら半紙風アンダーライン破線（太）

<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 2px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 2px #ECE1B9;">文字が少ない行</div>
</div>

・わら半紙風アンダーライン破線（細）

<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px;">
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: dashed 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: dashed 1px #ECE1B9;">文字が少ない行</div>
</div>

・わら半紙風枠付き二重線

<div style="display: inline-block; background: #FFF8DC; padding: 15px 15px 25px 15px; box-shadow: 0 0 0 5px #FFF8DC; border: double 3px #ECE1B9;">
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">一番文字の多い行の幅に自動で調節されます。</div>
<div style="border-bottom: solid 1px #ECE1B9; margin-bottom: 5px;">文字が少ない行</div>
<div style="border-bottom: solid 1px #ECE1B9;">文字が少ない行文字の</div>
</div>

今まで欲しくて無かった、メモ帳風がとてもいいです
今後の記事、飾れますねえ♪~♪ d(⌒o⌒)b♪~♪