ブログの中に枠を表示したい時★コピペで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
----(^-^)❤--︎

★ブログ運営に関することはこちら↓↓★

もう一つブログをやってます♪♪
ブログの収益化やカスタマイズの方法など色々初心者〜マニアックなことまで書いてますので、ぜひ見てね(^-^)

Bambi's BLOG @ hatena

2018/10/27-素人の私が「はてなブログ」を10ヶ月間やってみた結果＆今後の目標 
2018/11/08-はてなブログは稼げるのか？10ヶ月間の運営報告から考察 

↓↓アクセスを増やす方法シリーズ↓↓
（こちらはバンビの別ブログで解説してます♡）
アクセスを増やす方法（１）検索順位を上げよう
アクセスを増やす方法（２）見出しや強調文字を上手く使おう
アクセスを増やす方法（３）内部リンクとブログネタに困らない方法