はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

おしゃれな囲み枠 その4 ふんわり系

今回はふんわりした雰囲気の囲み枠を使ってみたいと思います。

参考にした記事はこちら!

0forest.com

 

白い線のステッチ風

<div style="border:2px dashed #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>

 

このコードをHTML編集画面に貼り付けるとこうなります。↓

テキストを入力

 

背景の色をふんわり系にして、枠の線を白にすると全体にふんわりする感じかな?

色を変えてやってみます。

 

緑系

<div style="border: 2px dashed #ffffff; background-color: #d6e9ca; box-shadow: 0 0 0 6px #d6e9ca; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

水色系
<div style="border: 2px dashed #ffffff; background-color: #eaf4fc; box-shadow: 0 0 0 6px #eaf4fc; padding: 16px; margin: 20px;">テキストを入力</div>
 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

紫系
<div style="border: 2px dashed #ffffff; background-color: #dbd0e6; box-shadow: 0 0 0 6px #dbd0e6; padding: 16px; margin: 20px;">テキストを入力</div>
 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

ふんわりした色を探すのがなかなか難しいですね!

 

 

実線のタイトル風

<div style="border:3px solid #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>

 

このコードをHTML編集画面に貼り付けるとこうなります。↓

テキストを入力

 

色を変えて作ってみます。

パステルカラーを使ってみました。

 

緑系

<div style="border: 3px solid #ffffff; background-color: #f2ffe5; box-shadow: 0 0 0 6px #f2ffe5; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

水色系
<div style="border: 3px solid #ffffff; background-color: #e5ffff; box-shadow: 0 0 0 6px #e5ffff; padding: 16px; margin: 20px;">テキストを入力</div>
 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

紫系

<div style="border: 3px solid #ffffff; background-color: #f2e5ff; box-shadow: 0 0 0 6px #f2e5ff; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

爽やかな感じになりますね!

 

2重線でおしゃれ風

<div style="border:5px double #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります。↓
テキストを入力

 

色を変えて作ってみます。

 

緑系

<div style="border: 5px double #ffffff; background-color: #f0f6da; box-shadow: 0 0 0 6px #f0f6da; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

青系

<div style="border: 5px double #ffffff; background-color: #bccddb; box-shadow: 0 0 0 6px #bccddb; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

 

紫系

<div style="border: 5px double #ffffff; background-color: #dbd0e6; box-shadow: 0 0 0 6px #dbd0e6; padding: 16px; margin: 20px;">テキストを入力</div>

 
このコードをHTML編集画面に貼り付けるとこうなります↓
テキストを入力

 

ふんわりというよりちょっと渋めになったような?

色探しはなかなかハードルが高いです!