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


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

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

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

随時開催『はじめてのメルカリ出品講座』

おうちに眠ってる、あんなものこんなもの。
とりあえず、メルカリに出してみませんか?
詳細はこちら

ブログの更新をメールでお知らせします。

ブログをメールでお知らせ

メールアドレスをご記入の上、登録ボタンを押して頂きますと、ブログの更新をメールで受信できます。

ブログの更新をお知らせします。
follow us in feedly
最後までお読みいただきありがとうございます。

ランキングに参加しております。
ポチっとしていただけると嬉しいです。

ブログランキング・にほんブログ村へ
にほんブログ村

パソコンのプライベートレッスン

お得なパック:16,000円/3時間
通常:6,000円/1時間

レシピのデータ化、アメブロ、Facebook、Skypeなど、
パソコン周りのお困り事、ご相談ください。

詳細はこちら。  

シェアする

  • このエントリーをはてなブックマークに追加