【コピペで使える】女性向けブログのための囲み枠デザイン集

記事内に商品プロモーションを含む場合があります

WordPressテーマに用意されている囲み枠、なんだかイメージに合わない…。

そんな方のために、コピー&ペーストですぐに使える、おしゃれな囲み枠デザインをご紹介します。

くすみカラーを使ったストライプ柄やドット柄など、女性向けサイトにぴったりの可愛らしいデザインを集めました。

テーマの標準デザインでは物足りない時や、サイトの雰囲気に合わせたオリジナリティが欲しい時に、ぜひ試してみてくださいね♪

女性向けブログのための囲み枠デザイン集

女性向けブログのための囲み枠デザイン集

シンプルなものから可愛いものまで、全部で12種類のデザインをご用意しました。

使い方は後半で詳しく解説していますので、まずは好みのデザインを探してみてくださいね。

1. くすみピンクのシンプルボックス

完成イメージ

優しい印象のくすみピンクを使用したシンプルなボックスです。
落ち着いた雰囲気で使いやすいデザインです。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dusty-pink-box {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: #fdfcfb;
    border: 1px solid #e0c4c4;
    border-radius: 8px;
    color: #6b5c5c;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dusty-pink-box">
    ここにテキストを入力
</div>

2. くすみピンクの二重フレームボックス

完成イメージ

二重の角丸フレームで、シンプルながら上品な印象のボックスデザイン。
内側のフレームの色を薄くすることで、繊細な印象に。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.frame-box {
    position: relative;
    margin: 2rem 0;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e8c4cf;
    border-radius: 12px;
}
.frame-box::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #e8c4cf;
    border-radius: 8px;
    opacity: 0.5;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="frame-box">
    ここにテキストを入力
</div>

3. くすみブルーの二重ボックス

完成イメージ

大人っぽい雰囲気のくすみブルーを使用した二重線ボックス。
重要な情報を上品に表示できます。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dusty-blue-box {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: #f7f9fc;
    border: 3px double #94a6b8;
    border-radius: 3px;
    color: #465468;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dusty-blue-box">
    ここにテキストを入力
</div>

4. くすみパープルのメモ風ボックス

完成イメージ

メモのような雰囲気を演出するくすみパープルのボックス。
補足情報やメモ書きを表示するのに最適です。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dusty-purple-memo {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 3.5rem;
    margin: 2rem 0;
    background: #f8f6fa;
    border-radius: 10px;
    color: #5d5464;
}
.dusty-purple-memo::before {
    content: '✎';
    position: absolute;
    left: 1.5rem;
    color: #9f90aa;
    font-size: 1.2em;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dusty-purple-memo">
    ここにテキストを入力
</div>

5. くすみグリーンの引用風ボックス

完成イメージ

落ち着いた印象のくすみグリーンを使用した引用風ボックス。
参考情報や引用文の表示に使えます。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dusty-green-quote {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: #f5f8f5;
    border-left: 4px solid #93a899;
    color: #4c5850;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dusty-green-quote">
    ここにテキストが入ります
</div>

6. くすみイエローの注意書きボックス

完成イメージ

温かみのあるくすみイエローを使用した注意書きボックス。
優しい印象を保ちながら注意を促せます。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dusty-yellow-note {
    position: relative;
    padding: 1.8rem 2rem;
    margin: 2rem 0;
    background: #fdfaf5;
    border: 1px solid #e3d5b8;
    border-radius: 8px;
    color: #6b614c;
}
.dusty-yellow-note::before {
    content: '!';
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: #e3d5b8;
    color: #fff;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dusty-yellow-note">
    ここにテキストを入力
</div>

7. ピンクのアクセントサイドボックス

完成イメージ

左側にアクセントカラーの記号エリアを配置した、
シンプルながら印象的なボックスデザイン。
記号は!や▼など、お好みのものに変更できます。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.side-heading-box {
    display: flex;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0c4c4;
    overflow: hidden;
}
.side-heading-box .side-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%;
    min-width: 40px;
    padding: 1rem 0.5rem;
    background: #e8c4cf;
    color: #fff;
    font-size: 1.2em;
}
.side-heading-box .content {
    flex: 1;
    padding: 1.5rem 2rem;
    color: #6b5c5c;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="side-heading-box">
    <div class="side-title">★</div>
    <div class="content">ここにテキストを入力</div>
</div>

8. ストライプ背景ボックス

完成イメージ

斜めストライプの背景が特徴的なボックスです。
内側に白い背景を重ねることで、読みやすさを確保しています。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.stripe-box {
    padding: 0.8rem;
    margin: 2rem 0;
    background: repeating-linear-gradient(
        -45deg,
        #f8e0e8,
        #f8e0e8 6px,
        #fff 6px,
        #fff 12px
    );
    border-radius: 8px;
    border: 1px solid #e8c4cf;
}
.stripe-box-inner {
    padding: 1rem 1.5rem;
    background: rgba(255,255,255,0.92);
    border-radius: 4px;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="stripe-box">
    <div class="stripe-box-inner">ここにテキストを入力</div>
</div>

9. くすみパープルのドット背景ボックス

完成イメージ

小さなドット模様の背景と、内側の白背景で優しい印象を演出したボックスデザイン。
影を加えることで、立体感も出しています。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.dot-box {
    padding: 1.2rem;
    margin: 2rem 0;
    background: 
        radial-gradient(#a292b3 1px, transparent 1px),
        #f3f0f6;
    background-size: 6px 6px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.dot-box-inner {
    padding: 1.5rem;
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="dot-box">
    <div class="dot-box-inner">ここにテキストを入力</div>
</div>

10. くすみブルーのステッチボックス

完成イメージ

破線と二重の枠線を組み合わせた、手作り感のあるボックスデザイン。
優しい印象を与えながら、存在感もあります。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.stitch-box {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border: 2px dashed #9cafd0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0 0 4px #fff, 2px 2px 10px rgba(0,0,0,0.05);
    outline: 2px solid #9cafd0;
    outline-offset: 4px;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="stitch-box">
    ここにテキストを入力
</div>

11. パステルグリーンの影付きボックス

完成イメージ

控えめな影と左側のアクセントカラーで、
モダンな印象を与えるボックスデザインです。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.pastel-box {
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.05);
    border-left: 5px solid #b2dfdb;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="pastel-box">
    ここにテキストを入力
</div>

12. ハート装飾付きボックス

完成イメージ

可愛らしいハートマークがアクセントの 女性らしいボックスデザインです。
▼ コードを表示する

CSSコード(カスタマイズ画面の追加CSSに貼り付け)

.heart-box {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: #fdf2f4;
    border-radius: 8px;
}
.heart-box:before {
    content: '♡';
    position: absolute;
    top: -15px;
    left: 15px;
    font-size: 1.5em;
    color: #ffb6c1;
   font-weight: bold;
}

HTMLコード(記事の編集画面でHTMLブロックに貼り付け)

<div class="heart-box">
    ここにテキストを入力
</div>

WordPressで囲み枠デザインを使う方法

1.CSSを設定する(最初の1回だけ)

CSSコードをコピーする

各デザインの「完成イメージ」の下にある「▼ コードを表示する」をクリックして、CSSコードをコピーします。

コードを表示
追加CSS画面を開く

管理画面から「外観」→「カスタマイズ」→「追加CSS」を開きます

外観→カスタマイズ
追加CSS
使いたいデザインのCSSを貼り付け

CSSコードをコピーして、「追加CSS」に貼り付け、「公開」ボタンを押します。

追加CSSに貼り付け

2.記事に囲み枠のHTMLコードを追加する

記事に「HTMLブロック」を追加

記事の編集画面で「+」をクリックして「HTMLブロック」を追加します

カスタムHTMLブロック
HTMLコードを貼り付け

使いたいデザインのHTMLコードをコピーして、HTMLブロック内に貼り付けます

カスタムHTMLブロックに貼り付け
テキストの書き換え

ここにテキストを入力の部分を、実際に表示したい文章に書き換えます。

テキストの書き換え

たったこれだけで使えます。

一度作ったカスタムHTMLブロックをパターンに登録しておけば、次回からはワンクリックで呼び出せて便利ですよ。

詳しくは、こちらの記事をご覧ください。

さいごに

シンプルなものから装飾的なものまで、全12種類の囲み枠デザインをご紹介しました。どれも簡単なコピペで使えるので、ぜひお気に入りのデザインを見つけてくださいね。

テーマ標準デザインとは一味違う、オリジナリティのある記事作りにお役立てください。

デザインの使い分けのコツ

  • シンプル・二重フレーム:基本的な情報をすっきりと表示したい時に
  • ストライプ・ドット背景:優しい印象を加えたい時に
  • アクセントサイド:見出しでポイントを示したい時に
  • ステッチ:手作り感を演出したい時に

もし、サイトのイメージに合わせて色を変更したい場合は、こちらの記事も参考にしてみてください。

PR