【コピペOK！】HTMLのみで作るボックスデザイン（囲み枠）ワードプレスの記事作成もコピペで簡単♪

素材

2022年04月12日

HTMLに装飾を加えるCSSは、通常HTMLとは別ファイルを用意して記述する方法が一般的ですが、ワードプレスなどで記事を作成する場合、装飾の度にCSSファイルを開いて追加するのがちょっと面倒な事もありますよね。

そこで、CSSファイルを一切触らずに、ワードプレスのカスタムHTMLにコピペで利用できる囲み枠をいくつかご紹介します。

シンプル囲み枠デザイン

1本線

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #4d4740 solid 1px; padding: 20px;"> ここに本文を書いてね</div>

1本線+背景色

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; border: #4d4740 solid 1px; padding: 20px;">ここに本文を書いてね</div>

２本線

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #4d4740 5px double; padding: 20px;">ここに本文を書いてね</div>

２本線＋背景色

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; border: #4d4740 5px double; padding: 20px;">ここに本文を書いてね</div>

太い線

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #4d4740 solid 3px; padding: 20px;">ここに本文を書いてね</div>

角丸

ここに本文を書いてね

HTMLはこちら↓

<div style="border-radius: 10px; border: #4d4740 solid 1px; padding: 20px;">ここに本文を書いてね</div>

点線

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #4d4740 3px dotted; padding: 20px;">ここに本文を書いてね</div>

破線

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #4d4740 2px dashed; padding: 20px;">ここに本文を書いてね</div>

背景ぼかし

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; box-shadow: #ede4d8 0 0 10px 10px; margin:10px; padding: 20px;">ここに本文を書いてね</div>

影付き

ここに本文を書いてね

HTMLはこちら↓

<div style="background:　#ede4d8; border:　#4d4740　1px solid; box-shadow: 0 2px 4px 0 #4d4740; padding: 20px;">ここに本文を書いてね</div>

アレンジしてみよう！

内側に1本線①

ここに本文を書いてね

HTMLはこちら↓

<div style="border: #ede4d8 5px solid; padding: 2px;">
<div style="background: #ede4d8; padding: 20px;">ここに本文を書いてね</div>
</div>

内側に1本線②

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #4d4740; border: #fffdfa 5px double; border-radius: 10px; padding: 20px;">
<p style="color: #fffdfa;">ここに本文を書いてね</p>
</div>

ステッチ風①

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; border: #4d4740 2px dashed; box-shadow: 0 0 0 5px #ede4d8; padding: 20px;">ここに本文を書いてね</div>

ステッチ風②

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #4d4740; border: #ffffff 2px dashed; border-radius: 10px; box-shadow: 0 0 0 5px #4d4740, 0 2px 3px 5px #4d4740; padding: 20px;">
<p style="color: #fffdfa;">ここに本文を書いてね</p>
</div>

水玉①

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; background-image: radial-gradient(#fffdfa 10%, transparent 20%), radial-gradient(#fffdfa 10%, transparent 20%); background-size: 20px 20px;  background-position: 0 0, 10px 10px; padding: 20px;">ここに本文を書いてね</div>

水玉②

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; background-image: radial-gradient(#fffdfa 10%, transparent 20%), radial-gradient(#fffdfa 10%, transparent 20%); background-size: 10px 10px;  background-position: 0 0, 5px 5px; border-radius: 10px; padding: 20px;">ここに本文を書いてね</div>

ストライプ①

ここに本文を書いてね

HTMLはこちら↓

<div style="background: linear-gradient( -45deg, #ede4d8 25%,  #fffdfa 25%, #fffdfa 50%, #ede4d8 50%, #ede4d8 75%, #fffdfa 75%, #fffdfa );
background-size: 10px 10px; padding: 20px;">ここに本文を書いてね</div>

ストライプ②

ここに本文を書いてね

HTMLはこちら↓

<div style="background: linear-gradient( -45deg, #d9ccb4 25%,  #fffdfa 25%, #fffdfa 50%, #d9ccb4 50%, #d9ccb4 75%, #fffdfa 75%, #fffdfa );
background-size: 5px 5px; border-radius: 10px; padding: 20px;">ここに本文を書いてね</div>

付箋風

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; border-left: solid 15px #4d4740; padding: 20px;">ここに本文を書いてね</div>

上に太い線

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #ede4d8; border-top: solid 20px #4d4740; box-shadow: 0 2px 4px 0 #4d4740; padding: 20px;">ここに本文を書いてね</div>

タイトル付き①

タイトルここに本文を書いてね

HTMLはこちら↓

<fieldset style="border: 3px solid #4d4740; border-radius: 10px; padding: 20px;">
<legend>タイトル</legend>ここに本文を書いてね</fieldset>

タイトル付き②

タイトル

ここに本文を書いてね

HTMLはこちら↓

<div style="display:inline-block; vertical-align: bottom; padding:0 15px; height:25px; background:#4d4740; font-weight:bold; text-align:center; color:#ffffff; border-radius:5px 5px 0 0;">タイトル</div>
<div style="border:solid 3px #4d4740; border-radius:0 5px 5px; padding:20px;">ここに本文を書いてね</div>

タイトル付き③

タイトル

ここに本文を書いてね

HTMLはこちら↓

<div style="background: #4d4740; border: 3px solid #4d4740; font-weight:bold; text-align:center; color:#ffffff;">タイトル</div>
<div style="border: 3px solid #4d4740; padding: 20px;">ここに本文を書いてね</div>

吹き出し①

ここに本文を書いてね

HTMLはこちら↓

<div style="position: relative; border-radius: 15px; background: #ede4d8; color: #4d4740; padding: 20px;">ここに本文を書いてね<span style="position: absolute; top: 50%; left: -30px; margin-top: -20px;  border: 20px solid transparent;  border-right: 20px solid #ede4d8;"></span></div>

吹き出し②

ここに本文を書いてね

HTMLはこちら↓

<div style="position: relative; border-radius: 15px; background: #ede4d8; color: #4d4740; padding: 20px;">ここに本文を書いてね<span style="position: absolute; top: 85%; left: 20px; border: 20px solid transparent;  border-top: 20px solid #ede4d8;"></span></div>

吹き出し③

ここに本文を書いてね

HTMLはこちら↓

<div style="position: relative;  margin: 20px 40px; background: #ede4d8; border-radius: 30px; padding: 20px;"><span style="position: absolute; left: -40px; width: 15px; height: 15px; bottom: 0; background: #ede4d8; border-radius: 50%; "></span><span style=" position: absolute; left: -20px; width: 20px; height: 20px;  bottom: 3px; background: #ede4d8; border-radius: 50%;"></span><p>ここに本文を書いてね</p></div>