【保存版】コピペで使える囲み枠デザイン♪

今日のアメブロカスタマイズは

記事を書くときにコピペだけで使えるdivの囲み枠のデザインをご紹介します！

目立たせたい場所や見出し、お知らせ、サイドバーなどにお使いください。

どのテンプレートをご使用中でも使えます。

以下サンプルから使用したい囲み枠を選んで
HTML編集囲み枠コードをコピーしてお使いください。

初心者　Tips!-----------------------

コピペする場合は必ずブログ記事を
『HTML表示』編集

にして貼り付けてくださいね。

-----------------------------------------

アメブロカスタマイズ　囲み枠

シンプル影付き囲み枠

囲み枠デザインカスタマイズ１

■HTML編集囲み枠コード

<div style="border: 1px #ccc solid; padding: 20px; box-shadow: 0 2px 3px 0 #ddd; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ１
</div>

角丸背景色つき囲み枠（文字白）

囲み枠デザインカスタマイズ２-１

■HTML編集囲み枠コード

<div style="color: #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ff7fbf; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ２-１
</div>

角丸薄い背景色つき囲み枠（文字デフォルト色）

囲み枠デザインカスタマイズ２-２

■HTML編集囲み枠コード

<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: #ffdbed; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ２-２
</div>

角丸グラデーション囲み枠

囲み枠デザインカスタマイズ３

■HTML編集囲み枠コード

<div style="padding: 20px; background: #ffe5e9; background: linear-gradient(to bottom, #fff, #ffc0cb); -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ffc0cb)); -moz-linear-gradient(top, #fff, #ffc0cb); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFffc0cb'); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffc0cb',GradientType=0 ); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 2px 1px rgba(0,0,0,0.1); font-size: 90%;">
囲み枠デザインカスタマイズ３
</div>

付箋風デザイン囲み枠

囲み枠デザインカスタマイズ４

■HTML編集囲み枠コード

<div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ４
</div>

ボタン風デザイン囲み枠

囲み枠デザインカスタマイズ５

■HTML編集囲み枠コード

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #ddd inset; -moz-box-shadow: 0 0 50px #ddd inset; box-shadow: 0 0 50px #ddd inset; font-size: 90%;">
囲み枠デザインカスタマイズ５
</div>

角丸影あり点線デザイン囲み枠

囲み枠デザインカスタマイズ６

■HTML編集囲み枠コード

<div style="color: #fff; background: #3cb371; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); font-size: 90%;">
囲み枠デザインカスタマイズ６
</div>

シンプル点線デザイン囲み枠

囲み枠デザインカスタマイズ７

■HTML編集囲み枠コード

<div style="color: #fff; background: #f08080; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #f08080; -moz-box-shadow: 0 0 0 5px #f08080; -webkit-box-shadow: 0 0 0 5px #f08080;; font-size: 90%;">
囲み枠デザインカスタマイズ７
</div>

点線デザイン囲み枠

囲み枠デザインカスタマイズ８

■HTML編集囲み枠コード

<div style="color: #fff; background: #3cb371; padding: 20px; border: 2px dashed rgba(255,255,255,0.5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 0<div style="border: #ff7f92 dashed 1px; padding: 20px; background: #fff; font-size: 90%;">
囲み枠デザインカスタマイズ８
</div>

紙を重ねた風デザイン囲み枠

囲み枠デザインカスタマイズ９

■HTML編集囲み枠コード

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; font-size: 90%;">
囲み枠デザインカスタマイズ９
</div>

ふわっとぼかす囲み枠

囲み枠デザインカスタマイズ１０

■HTML編集囲み枠コード

<div style="padding: 10px 20px; margin: 10px; background: #ffe4e1; box-shadow: #ffe4e1 0 0 10px 10px; -webkit-box-shadow: #ffe4e1 0 0 10px 10px; -moz-box-shadow: #ffe4e1 0 0 10px 10px; font-size: 90%;">
囲み枠デザインカスタマイズ１０
</div>

シンプル角丸ボーダー囲み枠（背景なし）

囲み枠デザインカスタマイズ１１

■HTML編集囲み枠コード

<div style="border: #ffd201 solid 3px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">
囲み枠デザインカスタマイズ１１
</div>

囲み枠の色を変えたい！　囲み枠中級編

上記サンプル以外の色にデザインをカスタマイズしたい！

と、いう方

コードの中の

#ffffff（省略型#fff）

のような箇所をお好みの色に修正することで色の変更ができます。

例えば

背景色（白）・・・background: #ffffff;

文字色（赤）・・・color: #ff0000;

そもそも#ff0000←これなんなの？という方

WEBカラーコードです。

以下サイトで好みの色コードを見つけて＃以下をコピペしてください。

➡WEB色見本

（※別ウィンドウで開きます。）

アメブロカスタマイズ　囲み枠上級編

いつも同じ囲い枠デザインを使いたい場合や、毎回HTML編集囲み枠コード書くのが面倒だ！ という方。

カスタムテンプレートでcss編集が可能なテンプレートをご使用の方は

よく使うコードに好きなクラス名をつけて

簡単に囲み枠のデザインを保存して呼び出すことができます。

シンプル影付き囲み枠【css編集編】

仮に以下の枠のデザインにwakuという名前（クラス名）をつけたとしましょう。

以下css編集コードをcss編集画面でコピペで追加しておけば

HTML編集画面では以下を書くだけで

カスタマイズした囲み枠のデザインになります！

よく使う囲み枠のデザインはcss編集で保存しておくと便利ですよ♪

囲み枠の中は自由に書いてくださいね

■css編集コード

<!--囲み枠デザイン -->
.waku{  
border: 1px #ccc solid;
padding: 20px;
box-shadow: 0 2px 3px 0 #ddd;
background: #fff;
font-size: 90%;
}

■HTML編集囲み枠コード

<div class="waku">
囲み枠の中は自由に書いてくださいね
</div>

cssだけでデザインできるおしゃれなdivの囲み枠は沢山ありますので、

またどんどん紹介していきたいと思います！