キレイデザイン学インストラクター

にしたにゆかりです。

 

キレイデザイン学の12色のブランドカラーで

囲み枠を作りたいときに使える

お役立ち情報をお届けします(*^-^)♪

 

□ シンプルな囲み枠線一覧ページはこちら

 

アメブロの記事の中での囲み枠線の使い方

①ブログを書くをクリック
 
②HTML表示して
 
③使用したい枠色のサンプルを選んでコピペ
 
④通常表示に戻して、本文を入力する
 
※改行はShift+Enterで枠内で改行ができます。
(PCの機種によってはcommand+Enter)
 

※枠の下に入力カーソルが進めない場合

HTML表示画面で、枠のタグの下に<br>といれてください。

<br>・・・改行

 

 

 

12色の囲み枠サンプル一覧

 

(1)シンプルな影付きの囲み枠線(RED)

ここに本文を入力する。
改行はShift+Enter


■このタグをコピペする

<div style="border: 1px #E94829 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(2)シンプルな影付きの囲み枠線(RED ORANGE)

ここに本文を入力する。
改行はShift+Enter


■このタグをコピペする

<div style="border: 1px #ED6D1F solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>
 

 

(3)シンプルな影付きの囲み枠線(ORANGE)

ここに本文を入力する。
改行はShift+Enter


■このタグをコピペする

<div style="border: 1px #F08300 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(4)シンプルな影付きの囲み枠線(YELLOW)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #FABE00 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(5)シンプルな影付きの囲み枠線(YELLOW GREEN)

ここに本文を入力する。
改行はShift+Enter


■このタグをコピペする

<div style="border: 1px #9DC815 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(6)シンプルな影付きの囲み枠線(GREEN)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #00A95F solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(7)シンプルな影付きの囲み枠線(BLUE GREEN)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #2EB6AA solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(8)シンプルな影付きの囲み枠線(TURQUOISE)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #5DC2D0 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(9)シンプルな影付きの囲み枠線(BLUE)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #0075C2 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(10)シンプルな影付きの囲み枠線(INDIGO)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #004471 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(11)シンプルな影付きの囲み枠線(PURPLE)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #B84C97 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

 

(12)シンプルな影付きの囲み枠線(MAGENTA)

ここに本文を入力する。
改行はShift+Enter

 

■このタグをコピペする

<div style="border: 1px #EB6EA5 solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br>
改行はShift+Enter</div>

 

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

 

キレイデザイン学のイベント、診断

お申込み受付中です(*^-^)♪