WordPressで使える、囲い枠のコード集

サイトに投稿する際に、可愛い囲い枠があると雰囲気良いですよね。

そんな可愛い囲い枠を使用するために、HTMLを埋め込むだけで使えるコードをご紹介します。

上側に例を貼り付けておきますので、気に行ったコードがございました下のコードをコピーして、投稿のHTMLブロックに貼り付けてご使用ください。

点線の枠

<div style=”border: 2px dotted #FF69B4; padding: 15px;”>
<p>ここにテキストを追加してください。</p>
</div>

水玉模様の背景と枠

<div style=”background: radial-gradient(circle, #FFB6C1 20%, transparent 21%);
background-size: 25px 25px; padding: 20px;”>
<p>ここにテキストを追加してください。</p>
</div>

斜め線が引かれた背景

<div style=”background: repeating-linear-gradient(45deg, #FFC0CB, #FFC0CB 10px, #FFFFFF 10px, #FFFFFF 20px);
padding: 20px;”>
<p>ここにテキストを追加してください。</p>
</div>

色は「＃」から始まる英文字を好きな色名に変えると変わります。

二重枠

<div style=”border: 3px solid #FF69B4; padding: 10px; border-radius: 10px;”>
<div style=”border: 3px dashed #8A2BE2; padding: 15px;”>
<p>ここにテキストを追加してください。</p>
</div>
</div>

影つきの枠

<div style=”box-shadow: 5px 5px 15px rgba(0,0,0,0.3); border: 2px solid #FFD700; padding: 15px;”>
<p>ここにテキストを追加してください。</p>
</div>

グラデーション枠

<div style=”border: 3px solid; border-image: linear-gradient(45deg, #FF69B4, #8A2BE2) 1; padding: 15px;”>
<p>ここにテキストを追加してください。</p>
</div>

ちょっと可愛い形の枠

<div style=”border: 5px solid #FF69B4; border-radius: 15px; padding: 15px; position: relative;”>
<p>ここにテキストを追加してください。</p>
<div style=”position: absolute; top: -15px; left: -15px; width: 30px; height: 30px; background-color: #FF69B4; border-radius: 50%;”></div>
<div style=”position: absolute; bottom: -15px; right: -15px; width: 30px; height: 30px; background-color: #FF69B4; border-radius: 50%;”></div>
</div>

それぞれ、色やサイズはカスタマイズして、良い感じに使って下さいね。