元CAバンビのずぼら日記

元国際線乗務員の情報発信ブログ。海外、旅行、料理、ワイン、美容のお話など。

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

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

 

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

 


↓↓下からコードだけをコピー

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

 

 

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

f:id:zuboraca:20180126222645p:plain

 

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

ほら!こんな風に♡

 

 

 

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

 

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

f:id:zuboraca:20180127090429p:plain

↓↓↓↓↓↓↓↓

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

 

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

f:id:zuboraca:20180127090508p:plain

↓↓↓↓↓↓↓↓

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

 

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

 

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

f:id:zuboraca:20180127092402p:plain

↓↓↓↓↓↓↓↓ 

こんな風にできます♪

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

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

 

 

小さくする

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

 

f:id:zuboraca:20180204111507p:plain

 

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

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

 

 

 

 

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

もう一つブログをやってます♪♪

Bambi's BLOG @ hatena

 

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


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

 

他にもいろいろ書いています♪♪
おヒマな時にぜひ覗いてみてくださいね♡

❤︎SITE MAP❤︎サイトマップ❤︎ - 元CAバンビのずぼら日記

 

はてなブログの方は、読者登録おまちしてます♪♪

 

記事を更新した際にはTwitterでお知らせしています。

Twitterをやっている方は、フォローよろしくです(^0^)
(主に更新お知らせ用です。皆様のスピードに付いていけずTwitter活動は余りできてないのでご了承下さいませ^^;)