キレイデザイン学インストラクター
にしたにゆかりです。

キレイデザイン学の12色のブランドカラーで
囲み枠を作りたいときに使える
お役立ち情報をお届けします(*^-^)♪

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


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

①ブログを書くをクリック


②HTML表示して



③使用したい枠色のサンプルを選んでコピペ

④通常表示に戻して、本文を入力する



※改行はShift+Enterで枠内で改行ができます。
(PCの機種によってはcommand+Enter)

※枠の下に入力カーソルが進めない場合
HTML表示画面で、枠のタグの下に<br>といれてください。
<br>・・・改行
 

 

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

 

(1)直線の囲み枠線(RED)

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

 

■このタグをコピペする 

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

 

 

(2)直線の囲み枠線(RED ORANGE)

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

 

■このタグをコピペする

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

 

 

 (3)直線の囲み枠線(ORANGE)

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

 

■このタグをコピペする

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

 

 

 (4)直線の囲み枠線(YELLOW)

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

 

■このタグをコピペする

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

 

 

 (5)直線の囲み枠線(YELLOW GREEN)

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

 

■このタグをコピペする 

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

 

 

(6)直線の囲み枠線(GREEN)

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

 

■このタグをコピペする 

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

 

 

(7)直線の囲み枠線(BLUE GREEN)

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

 

■このタグをコピペする 

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

 

 

(8)直線の囲み枠線(TURQUOISE)

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

 

■このタグをコピペする 

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

 

 

(9)直線の囲み枠線(BLUE)

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

 

■このタグをコピペする 

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

 

 

(10)直線の囲み枠線(INDIGO)

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

 

■このタグをコピペする 

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

 

 

(11)直線の囲み枠線(PURPLE)

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

 

■このタグをコピペする 

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

 

 

(12)直線の囲み枠線(MAGENTA)

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

 

■このタグをコピペする

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

 

 

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

 

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

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