【オシャレ囲み枠38選】WPもはてなブログもコピペで使える

ブログ記事を読みやすくするために必須となっている【囲み枠】をサクッと使いたいですか？

ブログのカラーに合わせて【囲み枠】を上手に使うと文章が読みやすくなるだけでなく記事全体のバランスも良くなります。

この記事では、コピーして【HTML編集】に貼り付けれるだけでOKの囲み枠を14個追加して38個ご用意しました。

色の変更箇所を載せていいますのでジャンジャン使ってくださいませ。

■無料メルマガでしか話せない事があります■

【オシャレ囲み枠38選】WPもはてなブログもコピペで使える
【オシャレ囲み枠24選】WPもはてなブログもコピペで使えるまとめ

- スポンサーリンク -

可愛いというよりは、クールなタイプの【囲み枠】を24種類用意していました。

この度、可愛いものや変わったモノを追加して38種類のご紹介となります。

ご注意

記事掲載コードをコピペ利用する手順

【囲み枠】内に記載のコードを【コピー】
【メモ帳】に貼り付ける
【記事投稿HTML】に貼り付ける

＊そのまま貼り付けると不要な情報まで貼付けられる

Webカラー

こちらでカラーコードをコピーしてね

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

新囲み枠追加14個

１．囲み枠ふんわりA　ffe6ea：薄ピンク（外枠と内側）

<div style="background: #ffe6ea; box-shadow: #ffe6ea 0 0 10px 10px; border-radius: 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p>
</div>

２．囲み枠ふんわりB　ffe6ea：薄ピンク（外枠）ffccd5：濃ピンク（内側）

<div style="background: #ffe6ea; box-shadow: #ffccd5 0 0 10px 10px; border-radius: 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p>
</div>

３．囲み枠ふんわりC　ffccd5：濃ピンク（外側）　ffe6ea：薄ピンク（内枠）

<div style="background: #ffccd5; box-shadow: #ffe6ea 0 0 10px 10px; border-radius: 10px; padding: 10px; margin: 10px;">
<p style="margin: 0;">ここに文章</p>
</div>

４．水玉A　ffccd5：濃ピンク（外枠）　ffe6ea：薄ピンク・ffffff：白（内側）

<div style="border: 2px solid #ffccd5; background-color: #ffe6ea; background-image: radial-gradient(#ffffff 12%, transparent 15%), radial-gradient(#ffffff 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

５．水玉B　ffccd5：濃ピンク（外側）　ffe6ea：薄ピンク・ffffff：白（内側）

<div style="border: 2px solid #ffccd5; background-color: #ffffff; background-image: radial-gradient(#ffe6ea 12%, transparent 15%), radial-gradient(#ffe6ea 12%, transparent 15%); background-position: 0 0, 12px 12px; background-size: 24px 24px; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

６．ストライプ　ffffff：白・f5ecdc ：薄茶（ストライプ）

<div style="background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #f5ecdc 3px, #f5ecdc 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

７．ストライプ角丸　ffffff：白・f5ecdc ：薄茶（ストライプ）

<div style="background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #f5ecdc 3px, #f5ecdc 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

８．ストライプ囲み線有り　add8e6：水色（外枠）ffffff：白・cfdfe6 ：水色（ストライプ内枠）

<div style="border: 2px solid #add8e6; background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #cfdfe6 3px, #cfdfe6 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

９．ストライプ囲み線有り角丸　add8e6：水色（外枠）ffffff：白・cfdfe6 ：水色（ストライプ内枠）

<div style="border: 2px solid #add8e6; background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #cfdfe6 3px, #cfdfe6 7px); border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>

10.枠無タイトル付　8fbc8f：緑（枠と文字）

タイトル

<fieldset style="border: 2px solid #8fbc8f; padding: 15px;"><legend style="color: #8fbc8f; padding: 0 10px;">タイトル</legend>
<p style="margin: 0;">ここに文章</p>
</fieldset>
<p> </p>

11.枠無タイトル付き角丸　8fbc8f：緑（枠と文字）　ffffff：白（背景）

タイトル

<div style="position: relative; border: 2px solid #8fbc8f; border-radius: 7px; padding: 20px 15px 15px 15px;">
<div style="position: absolute; top: -0.8em; left: 8px; background: #ffffff; color: #8fbc8f; padding: 0 0.5em;">タイトル</div>
<p style="margin: 0;">ここに文章</p>
</div>
<p> </p>

12.付箋テープ半透明　ccccbb：グレー（テープ）　e0ffff：水色（紙）

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"> </div>

<div style="background: #e0ffff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p>
</div>
<p> </p>

13.黒板

<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<p style="margin: 0;">ここに文章</p>
</div>
<p> </p>

14.黒板タイトル付き

タイトル

<div style="border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル</span></div>
<p style="margin: 0;">ここに文章</p>
</div>
<p> </p>

囲み枠見出し付き５選

１.【内見出し付】5ab9af：緑（枠とタイトル部）　ffffff：白（背景色）

タイトル

２．【外見出し付】ffffff：白（タイトル文字色）

タイトル

３．【上横いっぱい】実際は離れていません

見出しタイトル

<div style="padding: 2px 10px; border: 1px solid #FF99CC; background: #FF99CC;"><span style="color: #ffffff; font-weight: bold;">見出しタイトル</span></div>
<div style="border: 1px solid #FF99CC; padding: 10px;">ここに文章を記入してください。</div>

４．【横いっぱい角丸】実際は離れていません

見出しタイトル

<div style="padding: 5px 15px; font-weight: bold; border-radius: 10px 10px 0 0; color: #fff; background: #8fbc8f;">見出しタイトル</div>
<div style="padding: 5px 15px; border-radius: 0 0 10px 10px; background: #fff; border: 2px solid #8fbc8f;">ここに文章を記入してください。</div>

５．【見出し飛び出し】

見出しタイトル

<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #4682b4;">見出しタイトル</span></div>
<div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #4682b4;">ここに文章を記入してください。</div>

- スポンサーリンク -

囲み枠影付き５選

１．【シンプル】外枠：ブルー1a66ff

<div style="background: #ffffff; border: 1px solid #1a66ff; padding: 0.5em 1em; margin: 2em 0; color: #ffffff; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.50);">ここに文章を入れます
</div>

２．【角丸シンプル】背景色：水色cce6ff　改行:【Shift】＋【Enter】

<div style="background: #cce6ff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); word-break: break-all;">
ここに文章を入れます
</div>

３．【薄っすら影付き】

<div style="padding: .5em 1em; margin: 2em 0; background: #ffffff; box-shadow: 0px 0px 10px 0px #cacaca;"> <p style=" margin: 0; padding: 0; ">ここに文章を入れます</p></div><p></p>

４．【影濃い目】背景色：F7F7F7

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに文章を入力します</div>

５．【影濃い目角丸】

<div style="background: #F7F7F7; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに文章を入力します</div>

▼はてなブログ★カスタマイズ承ります▼

coconala.com

囲み枠外枠一重ライン3選

１．【グラデュエ―ション】

<div style="background: #ffffff; padding: 15px; border: 4px inset #d89fe3; border-radius: 10px; word-break: break-all;">ここに文章を入れます</div>

２．【細線シンプル】

<div style="background: #ffffff; padding: 15px; border: 1px solid #b22222; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

３．【太線シンプル】線の太さ調整：padding: 15px（数字を変える）

<div style="background: #ffffff; padding: 15px; border: 1px solid #b22222; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

▼ブログアドバイス致します▼

coconala.com

囲み枠二重線枠３選

１・【外枠二重】文字色：ffffff（白）

<div style="background: #696969; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;">
<p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p>
</div>

２．【内が二重】背景色：F7F7F7　線色：A1A1A1

<div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div>

３．【２の色違い】

<div style="background: #DCDCDC; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #DCDCDC; padding: 10px;">ここに文章を入力します</div>

囲み枠破線枠3選

１．【外端破線】

<div style="background: #ffffff; padding: 10px; border: dotted 3px #ff1493; border-radius: 10px; word-break: break-all;">
文章を入れます
</div>

２．【内破線】背景色：f5dbc4　破線：ff8c00

<div style="background: #f5dbc4; border: 2px dashed #ff8c00; box-shadow: 0 0 0 10px #f5dbc4; padding: 10px;">ここに文章を入力します</div>

３．【内破線角丸】

<div style="background: #FFFFEA; border: 2px dashed #FFBF7F; border-radius: 5px; box-shadow: 0 0 0 10px #FFFFEA; padding: 10px;">ここに文章を入力します</div>

囲み枠トップのみライン１選

１．【上だけライン影付き】上のバー：（茶色）00ccff

<div style="background: #ffffff; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #4d260b; solid 5px #00ccff; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">
文章を入れます
</div>