こだわりの色でかわいい囲み枠の作り方_アメブロWordPress

こだわりの色でかわいい囲み枠を作る方法

私が好きな色をまとめてみました。

ティファニー風　#81d8d0

文字：白　#ffffff

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #81d8d0; border: 1px solid #81d8d0; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #81d8d0; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

エルメス風　#ff5a06

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #ff5a06; border: 1px solid #ff5a06; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #ff5a06; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

IKEA風

紺　#003399

黄色　#e1cc00

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #003399; border: 1px solid #003399; padding-left: 10px;”><span style=”color: #e1cc00; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #003399; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

無印風　#7b0018

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #7b0018; border: 1px solid #7b0018; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #7b0018; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

ピンク　#ff7fbf

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #ff7fbf; border: 1px solid #ff7fbf; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #ff7fbf; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

薄いグレー　#dcdcdc
文字　#a9a9a9

■枠の作り方

一行目
二行目
改行はShift+Enter

◆このタグをコピペ◆

<div style=”background: #dcdcdc; border: 1px solid #dcdcdc; padding-left: 10px;”><span style=”color: #696969; font-weight: bold;”>■枠の作り方</span></div>
<div style=”border: 1px solid #dcdcdc; padding: 10px;”>一行目
二行目
改行はShift+Enter</div>

色は、こちらのサイトから選んだり。

WEB色見本原色大辞典 – HTMLカラーコード