こんにちは!
ブログデザインコンサル部の平岡みなこです
今日は、アメブロの記事に
超簡単!に枠線をつける方法をお教えします!
※旧エディタの方は新エディタに切り替えてお試しください。
◆やり方
たとえばこの枠線を使いたい時・・・
※改行は枠内でShift+Enter
↑
①この記事内のこれを!そのままコピー!!
②そして記事の入力画面でペースト!(通常表示)
はい、終了・・・
以前はHTML表示、そう、タグの編集でしか枠線つけれなかったのですが、なんといつのまにか出来るように
あっ、でも枠線の色を変えたい方は、すこーしだけタグの編集も必要です。
【枠線の色の変え方】
①使いたい枠線のタグをHTML表示でコピペ!
②#fffなど、#~の部分が色なので、ここを変更!
#fff;←最後を[;]で閉じることをお忘れなく!
■タグ色変更箇所 例)
<div style="background:#fff; padding:10px; border:2px solid #ffdbff;">ここに本文を入力できます。<br />改行はShift+Enter</div>
原色大辞典
http://www.colordic.org/
色を変更したい場合は、こちらのサイトをご参考ください
やり方以上!
以下枠線色々どうぞ~~~
直線枠
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:2px solid #ffc0cb;">ここに本文を入力できます。<br />改行はShift+Enter</div>
直線太枠
改行はShift+Enter
■このタグをコピペする
<div style="border: 5px solid #fdd35c; padding: 10px;">ここに本文を入力できます。<br>改行はShift+Enter</div><br><br>
丸枠
改行はShift+Enter
■このタグをコピペする
<div style="padding: 10px; border: 2px solid #eddbff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力できます。<br />改行はShift+Enter</div>
点線枠
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:2px dashed #ffdbdb;">ここに本文を入力できます。<br />改行はShift+Enter</div>
ドット線枠
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:3px dotted #ff0000;">ここに本文を入力できます。<br />改行はShift+Enter</div>
二重線枠
改行はShift+Enter
■このタグをコピペする
<div style="background:#fff; padding:10px; border:3px double #ffb6c1;">ここに本文を入力できます。<br />改行はShift+Enter</div>
中が塗りつぶされた枠
改行はShift+Enter
■このタグをコピペする
<div style="background:#ffd6ea; padding:10px; border:none;">ここに本文を入力できます。 <br />改行はShift+Enter</div>
中が塗りつぶされた丸枠
改行はShift+Enter
■このタグをコピペする
<div style="background: #ffeaff; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力できます。<br />改行はShift+Enter</div>
見出し付き枠
改行はShift+Enter
■このタグをコピペする
<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">;">■ここにタイトルを入力できます。</span></div>
< div style="border: 1px solid #a0d8ef; padding: 10px;">ここに本文を入力できます。<br />改行はShift+Enter</div>
タイトルがはみ出た直線枠
■このタグをコピペする
<fieldset style="border:2px solid #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力できます。</span> </legend> ここに本文を入力できます。<br />改行はShift+Enter</fieldset>
タイトルがはみ出てた二重線枠
■このタグをコピペする
<fieldset style="border:3px double #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力できます。</span> </legend>ここに本文を入力できます。<br />改行はShift+Enter</fieldset>
おまけ
タグの解説
background:背景色
padding:枠と文字の間の隙間の大きさ
border:線の太さ、種類、色を指定
・線の種類
solid…直線/double…二重線/dashed…破線/dotted…ドット
うまく表示されない場合はコメントにてお知らせくださいね