ブログの中に枠を表示したい時★コピペでOK！

皆様、こんにちは！元CAのバンビですバンビです(^-^)
「超初心者シリーズ」です。（大放出！絶賛！下書き断捨離中〜♡）

このような枠を表示したい場合

❶↓↓下からコードだけをコピー（枠を入れないように）

<div style="border: 1px solid #cccccc; padding: 10px;">
<p>ここに本文を入れる</p>
</div>

❷「HTML編集」にして、❶でコピーしたものをペーストする。

❸あとは見たまま編集に戻って枠の中の文字を編集するだけ。

ほら！こんな風に♡

ココから更にいろいろバリエーション

★「border: 1px」の数字を変えると枠の太さを変えられる。

↓↓↓↓↓↓↓↓

〜　この枠は border: 10px の場合　〜

 ★「#cccccc」を変えると枠の色が変えられる。 

↓↓↓↓↓↓↓↓

〜　色を #e95388 に指定した時　〜

カラーコードのリンクを貼っておきます！（ココから色を選んでね♪♪）

★さらに文字の色、角を丸く、枠の中の背景を指定 

↓↓↓↓↓↓↓↓ 

こんな風にできます♪

同じように↓↓をコピペすればできます♡

<div style="color: #fff; border-radius: 10px; background: #e95388; padding: 5px;">
<center>
<span style="font-size: 150%;">
<strong>こちらもコピペで使えます〜</strong> 
</span>
</center>
</div>

小さくする

↑このように枠を小さくしたい場合は下記のように「width: ○○%;」と入れます。必ず「"~~"」の中に入れること。（「"~~"」は絵文字じゃないですよ！笑） 
「;」を最後に入れるのを忘れずに！ちなみに上の枠は60%に設定してます。

こちらも↓↓コードだけでデキるよ♪♪

-------------
bambi.red
----(^-^)❤--︎

※※「はてなブログ」でコードを書く方法を説明しているブログ。
そのまま「見たまま編集」で書くとコピペした時にうまくできない。