こだわりの色でかわいい囲み枠の作り方_アメブロ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>


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

色のコードが分かる場合は、カラーコード変換ツールが便利です。

他の種類の囲み枠は、、、
↓こちらのサイトがすごく分かりやすいです。
シンプルな影付きの枠も♪
いろいろ試したい。