アメブロの記事の中で使える囲み枠線の作り方（水玉）

 

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

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

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


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


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

②HTML表示して



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


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



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

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


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

 

（１）水玉の囲み枠線（RED）

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

 

■このタグをコピペする

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

 

 

 （２）水玉の囲み枠線（RED ORANGE）

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

 

■このタグをコピペする 

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

 

（３）水玉の囲み枠線（ORANGE）

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

 

■このタグをコピペする

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

 

 （４）水玉の囲み枠線（YELLOW）

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

 

■このタグをコピペする

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

 

 （５）水玉の囲み枠線（YELLOW GREEN）

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

 

■このタグをコピペする 

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

 

（６）水玉の囲み枠線（GREEN）

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

 

■このタグをコピペする

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

 

 （７）水玉の囲み枠線（BLUE GREEN）

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

 

■このタグをコピペする 

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

 

（８）水玉の囲み枠線（TURQUOISE）

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

 

■このタグをコピペする

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

 

 （９）水玉の囲み枠線（BLUE）

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

 

■このタグをコピペする 

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

 

（１０）水玉の囲み枠線（INDIGO）

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

 

■このタグをコピペする 

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

 

（１１）水玉の囲み枠線（PURPLE）

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

 

■このタグをコピペする 

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

 

（１２）水玉の囲み枠線（MAGENTA）

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

 

■このタグをコピペする 

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

 

うまく表示されない場合は

コメントにてお知らせください。

 

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

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