あなたのブログの個人秘書 あつみゆかりです。


※過去の記事を再アップしています。




告知記事や記事の下のお知らせなど

囲み枠を使うことが多いですよね。




タグ編集をしなくても

出来ている枠をそのままコピーして

使うことも出来ます。 

(行を増やしたい時は、

Shift+Enter 

で改行してくださいね。)





けど、気に入った枠を自由に作れるように、

タグ編集は出来た方がいいかなと思います。


基本の枠の作り方を載せています。










囲み枠の作り方


囲み枠を作りたい時は投稿エディタをHTML表示にして(もしくはタグ編集に切り替えて



<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>


で文章を囲みます。



 ここに文章をかく 
グレーの破線の枠ができます。




こんな感じです。



border:2px dotted #CCCCCC; は 
線の太さが2pxで、破線、線の色が#CCCCCC(グレー)

padding:10px; は枠と文章との余白という意味です。


枠内に色をつける


<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のように background-color:#F2F2F2;を付け加えると、

枠の内部に色を付けることができます。


こんな感じです。


ここに文章
グレーの破線枠で枠内もグレーです。



線の種類

  • solid (実線)
  • dotted (破線)
  • dashed (点線)
  • double (二重線、3px以上)

などです。



私が他によく使う枠はやっぱりピンク


  ピンクの実線の枠



<div style="border:2px solid #ffcccc; padding:10px;">  ピンクの実線の枠
</div>




  水色の実線の枠


<div style="border:2px solid #99cccc; padding:10px;">  水色の実線の枠
</div>






  茶色の二重線の枠



<br /><div style="border:2px double #660000; padding:10px;">  茶色の二重線の枠
</div>






色と線の種類を変更するだけなので、意外と簡単です。


カラーコード表はこちらから



よく使うものを作っておいてコピーして使うのが簡単かも。






 

 

sei事務・ブログ・SNSお役立ちまとめ集

 

「LINE@の友だちになるのはどんなとき?」

動画プレゼント中!

新情報や友達限定モニター募集など

気まぐれ配信中

友だち追加