こんにちは!

ブログデザインコンサル部の平岡みなこです流れ星

 

今日は、アメブロの記事に

超簡単!に枠線をつける方法をお教えします!

※旧エディタの方は新エディタに切り替えてお試しください。

 

 

◆やり方

たとえばこの枠線を使いたい時・・・

 

ここに本文を入力できます。
※改行は枠内で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>

 

 

 

 

クローバータイトルがはみ出た直線枠

■ここにタイトルを入力できます。 ここに本文を入力できます。
改行はShift+Enter

 

■このタグをコピペする

<fieldset style="border:2px solid #ff6699;"><legend><span style="font-weight:bold;">■ここにタイトルを入力できます。</span> </legend> ここに本文を入力できます。<br />改行はShift+Enter</fieldset>

 

 

 

クローバータイトルがはみ出てた二重線枠

■ここにタイトルを入力できます。 ここに本文を入力できます。
改行はShift+Enter

 

■このタグをコピペする

<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…ドット

 

 

うまく表示されない場合はコメントにてお知らせくださいねOK!