この記事では、アメブロに「申し込みフォーム」や「お問い合わせフォーム」を設置する方法を解説します。

もちろん全て無料でOK！

例えば、下記のような「お申し込みフォーム」をアメブロでも作成できます。（デモページはこちら）

「お問い合わせフォーム」も下記のように埋め込みできます。（デモページはこちら）

アメブロでビジネスをするなら、「申し込みフォーム」は収益UPに必須です。

「お問い合わせフォーム」を設置すればお仕事の依頼が来たり、読者とのコミュニケーションにも利用できます。

「おすすめの無料フォーム」や「設置のコツ・注意点」も紹介しているので、確認しておきましょう！

くますけ

「申し込みフォーム」の設置は難しそうだなあ・・・

あめっくま

作り方は簡単だから、早めに設置しよう。

ブログ向け無料の「申し込み・お問い合わせフォーム」

無料の「フォームサービス」は複数あるので、おすすめなものを紹介します。

選ぶ時の主なポイントは、下記の5項目です。

お問い合わせ・アンケート・資料請求・イベント受付など、複数のフォームを使い分けたい場合は設置可能なフォーム数に注意して下さい。

「お問い合わせフォーム」のみに利用するなら、1つのフォーム内に設置可能な項目数は少なくてもOK。

ただし「申し込みフォーム」に使う場合は、設置可能な項目数が多い方が電話番号や住所などの入力欄も作れます。

くますけ

使う目的によって、おすすめなフォームサービスが違うんだね。

あめっくま

続いて「おすすめの無料フォーム」サービス4社を紹介するね。

formrun（フォームラン）

「formrun（フォームラン）」は直観的操作で、とにかく簡単にフォームを作れるのが特徴。

便利なテンプレートが用意されていて、「お問い合わせフォーム」ならサクッと作れます。

例えば下記のフォームなら、1分程度で作成も可能。とにかく早い！

ただし無料プランで作成可能なフォームは1つのみ。複数のフォームを使うなら、有料プランが必須。

無料プランでは、「お申し込みフォーム」と「お問い合わせフォーム」を同時に作れません・・・

「お問い合わせフォーム」専用として使うなら、手軽なので便利です。

なお自動返信メールに「formrun」のロゴが入るのが、個人的にはデメリットです・・・

アメブロでの「formrun（フォームラン）」の使い方・埋め込み方法は、下記の記事で具体的に解説しています。

 実際に設置してみたよ！

【簡単】formrun（フォームラン）の使い方・埋め込み設置方法

この記事ではのformrun（フォームラン）の使い方・埋め込み方法・活用のコツ・注意点を紹介します。

nk-media.org

あめっくま

お問い合わせフォーム１つでいいなら、超簡単で便利です。

FormMailer（フォームメーラー）

フォームメーラーも簡単操作で、「お問い合わせフォーム」を作成しやすいです。

無料プランでも5つのフォームを作れます。

例えば下記のフォームなら、3～5分程度で作成可能。比較的早いですね。

ただし無料プランでは、1つのフォーム内に設置できる項目数が7項目までと少なめ。

「お申し込みフォーム」では項目数が多くなりやすいので、7個で足りるかがポイント。（上記の見本でギリ7項目）

無料版では決済機能を使えないので、支払いは別途メールなどでやり取りなどが必要となるので注意しましょう。

アメブロでのフォームメーラーの使い方・設置方法は、下記の記事で具体的に解説しています。

 実際に設置してみたよ！

アメブロでのフォームメーラーの使い方・設置方法

この記事ではアメブロでのフォームメーラーの使い方・設置する方法・活用方法・注意点を紹介します。

nk-media.org

あめっくま

シンプルなフォームを複数作る場合に便利です。

Googleフォーム

Googleフォームは設置が楽チン！Googleアカウントがあればサービスへの登録も不要なので、今すぐ利用できます。

さらに「作成できるフォーム数」「1フォームに設置可能な項目数」は無制限（Googleドライブの容量上限まで）

例えば下記のようなフォームなら、2～3分程度での作成も可能。とにかく早い！

ただし実際にお問い合わせが来た時に、返信するまでの流れが他のサービスとは違います。

お問い合わせが来れば、登録したあなたのメールアドレスに通知が来るのは同じ。

通常は内容が書かれているので、そのままメールで返信できます。

ただし「Googleフォーム」の場合は、通知メールの文面では問い合わせ内容が分かりません。

つまり「Googleフォーム」を立ち上げて内容確認してから、メールに戻って返信します。

くますけ

返信する時に、ひと手間あるということだね。

また決済機能を使えないので、支払いは別途メールなどでやり取りが必要となります。

作成できる数が無制限＋手軽に作れるので、フォームを多く作る人にはとても便利です。

あめっくま

アカウント登録も不要なので、利用している人が多いですよね。

formzu（フォームズ）

無料アカウントでも、フォーム数を無制限で作れるのが特徴。

無料プランでも決済機能（PayPalのみ）も利用可。フォーム上で決済できるので、支払いについてのやり取りが不要となりますね。

無料で使える機能も豊富で、本格的な「お申し込みフォーム」「お問い合わせフォーム」を作成できます。

例えば下記のようなフォームなら、10分程度で作成可能。

ただしシンプルな「お問い合わせフォーム」を設置するだけなら、他の3つの方が簡単に作成できます。

また毎週開催しているような教室・スクールなどの予約には、無料で使える予約フォームの方が明らかに便利です。

おすすめの予約フォームと比較してから判断しましょう。

あめっくま

「お申し込みフォーム」を検討している人なら、特におすすめです！

アメブロにお申し込み・お問い合わせフォームを設置

下記の3STEPで、アメブロにお問い合わせフォームを設置できます。

あめっくま

詳しく解説しますね。

STEP① フォームを作成

まずは、「お申し込みフォーム」または「お問い合わせフォーム」を作成しましょう。

それぞれの作成方法は、下記のリンク先で解説しています。（一部準備中）

今回は「formzu（フォームズ）」で作成したフォームをアメブロに設置します。

あめっくま

フォームサービスは用途に応じて選んで下さいね。

STEP② フォームのURLを取得

お問い合わせフォームを作成したら、URLを取得しましょう。

例えば「フォームズ」で作成すると、フォーム保存完了画面で下記のようにURLが表示されます。

このURLをアメブロにリンクとして設置するということですね。

なおアメブロでのリンクの貼り方・活用法は、下記の記事で解説してます。（ちなみに収益が伸びない人は、ほぼ100%リンクの活用法に問題があります・・・）

 収益UP方法あり！

【アメブロのリンクの貼り方】収益UPする10の活用方法と落とし穴

この記事ではアメブロのリンクやURLの貼り方・収益UPできる活用方法・逆効果なNG使用法・リンクを貼れない時の対処法を解説します。ホームページに記事同士をつなぐ内部リンクを貼り付け、売り上げに直結する申し込みページなどへのリンクを埋め込みするのは重要な手法です。早めに確認しておきましょう！

nk-media.org

あめっくま

フォームを作成したら、専用のURLが発行されますよ。

STEP③ アメブロに設置

最後にアメブロにお問い合わせフォームを埋め込みます。

リンク先をお申し込みフォームのURLにするだけ。

これで読者がクリックすれば、「お申し込みフォーム」や「お問い合わせフォーム」に飛んでくれますね。

あめっくま

ただし、テキストリンクでは読者からの申し込みは増えにくいです・・・記事後半の設置のコツを確認しておきましょう。

お申し込み・お問い合わせフォームの注意点

特に大事な注意点は下記の3つです。

あめっくま

順番に解説しますね。

①必ず記事内に設置する

最近ではブログをスマホで見る読者の方が多いですよね。

アメブロの場合にサイドバーやヘッダーメニューのみに設置するとスマホでは見れないので、フォームの意味がありません。

スマホの読者に知らせるには、アメブロでは記事本文に設置するのがベスト。

例えば記事本文の最後の方に設置するなど、工夫をしておきましょう。

あめっくま

サイドバーやヘッダーメニューだけに設置するのはNGです・・・

②自動返信メールを設定する

読者がフォームから送信した時に自動返信メールが届かないと、内容が届いたのか不安になりますよね。

事前に自動返信メールを設定しておきましょう。

自動返信メールに読者の記入内容を表示すると、送信内容も確認できるので親切ですね。

あめっくま

今回紹介している無料のフォームサービスは、全て自動返信メールの設定ができます。

③保存が必要ならダウンロードしておく

無料フォームサービスは、問い合わせ内容の保存期間や数に制限があります。

制限を超えると、過去の問い合わせ内容が見れなくなる点に注意して下さい。

保存が必要な場合には、必ずダウンロードしておきましょう。

あめっくま

スプレッドシートなどで管理しておけばOKですね。

お申し込みフォーム設置のコツ

単に「お申し込みフォーム」へのリンクを貼るだけでは、ハッキリ言って読者からの申し込みは増えません・・・

読者にクリックさせる工夫が欠かせませんよね。

あめっくま

収益UPのためには設置の仕方が重要です。

①画像リンクやボタンを利用する　

フォームの存在を分かりやすくするために、画像リンクやボタンを利用しましょう。

テキストリンクでも可能ですが、目立たないのが理由です・・・

くますけ

バナーやボタンを使うのは基本だよね。

例えば画像リンクなら、下記のようなバナーを用意してリンク先をフォームのURLにすればOK。（クリックするとデモ用のフォームに飛びます）

記事下やサイドバーなどに設置すると、かなり目立ちますね。読者からのコンタクトを増やせます。

なおアメブロでの画像リンク・バナーの設置方法や具体的な活用法は、下記の記事で紹介しています。

 超活用法あり！

【アメブロの画像リンク・バナーの貼り方】作り方と収益UPの方法

この記事ではアメブロ向けの画像リンクやバナーの貼り方・作成手順・クリック率や収益がUPする方法を解説します。PCの記事本文・サイドバー・スマホで方法が異なるので、全手法を解説！画像リンクやバナーで収益UPする貼り方をマスターしましょう。

nk-media.org

ボタンなら、当サイトで紹介しているアメブロ用の「申し込みボタン」「お問い合わせボタン」が便利。（クリックするとデモ用のフォームに飛びます）

お申し込みはこちら

お問い合わせはこちら

下記の記事で、素材を紹介しているので活用して下さいね。

 まだ使ってないの？

素材数No1！アメブロ用の申し込みボタンをコピペで簡単作成

この記事ではアメブロで使えるボタンリンクの素材を紹介します。コピペで簡単に設置できます。HTML・CSSなどのカスタマイズ知識は不要！かわいいボタン・おしゃれなボタン・電話ボタン・お問い合わせボタンなど、あなたのアメブロ記事でもすぐ作成できますよ。

nk-media.org

画像リンクやボタンを記事本文やサイドバーに配置して、リンク先をフォームに設定しましょう。

あめっくま

テキストリンクだけでは、チョット厳しいです・・・読者のクリック率を上げる工夫が欠かせませんね。

②吹き出しや囲み枠の中に入れる

アメブロでもアイコンつきの吹き出しが使えるようになったので、利用者が急増していますよね。

吹き出しは目立ちやすく、アイコン＋名前付きなので読者に覚えてもらえるのがメリット。

さらに会話する雰囲気が出るので、読者が目を留めやすいです。

下記のように、吹き出しの中に「申し込みフォーム」へのリンクを設置するとクリック率を伸ばせます。

アメブロでの吹き出しの使い方は、下記の記事で解説しています。

 効果絶大！

【コピペOK】アメブロ用の吹き出し素材42選（画像アイコン付き・会話風）

この記事ではアメブロで簡単に使える「アイコン画像つき吹き出し」を全42種類紹介します。吹き出しデザインと色を選んだら、コードが表示されるのでコピーしてアメブロに貼り付けるだけ。簡単にブログがおしゃれに生まれ変わりますね。

nk-media.org

古典的ですが、「囲み枠」の中に入れる手法もよく使われますよね。

「アメブロ用の囲み枠素材」は、下記の記事で紹介しているので活用して下さい。

 かわいい素材が豊富！

【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種

この記事ではアメブロ用の囲み枠・ボックス・フレーム枠のデザインを提供しています。素材は約300種類（色も選べる）・コピーして貼り付けるだけ（HTML・CSSの知識不要）シンプル・かわいい・かっこいいな囲み枠を用意しています。囲み枠を使っておしゃれなブログにしましょう。

nk-media.org

あめっくま

特に吹き出しの効果は絶大です！

③記入項目は最低限にする

お問い合わせフォームの場合、読者に記入してもらう項目は最低限にしておきましょう。

項目数が多ければ、申し込み・問い合わせを面倒に感じますよね。

単に問い合わせ用なら、個人情報の項目も最低限でOK。

ただし下記の3項目の入力欄は、入力必須項目にしておきましょう。

もちろん必要な項目は、ブログや用途によって違います。

「申し込みフォーム」「注文フォーム」なら、住所や電話番号など項目が増える場合もありますよね。

読者の立場に立って、本当に必要な項目を絞り込みましょう。

あめっくま

フォームの用途によっても項目数は変わりますね。

くますけ

今の時代は文字だけの記事では厳しいから、囲み枠を使って読みやすくしたいなあ・・・

あめっくま

読者の印象に残すためにも囲み枠は大事だよね。コピペで使えるデザインをたくさん用意したよ。

アメブロ用の囲み枠の使い方はHTMLやCSSを知らなくてもOK、コピペして貼り付けるだけ。

しかもスマホやアプリで記事を見る読者にも対応。

デザインと色を選ぶとコードが自動で表示されます。コピーしてアメブロ記事内のHTML表示に貼りつけましょう。

記事後半には「囲み枠の活用法」や「設置の手順」も解説しているので、必要に応じて確認して下さい。

あめっくま

「うまくいかない」など困った方は、遠慮なく記事下コメント欄から質問して下さいね。

①タイトル・タブ付きの囲み枠

人気のあるタイトル部分をつけた囲み枠を紹介します。要点まとめ・関連記事などの用途がありますね。

当サイトの囲み枠中身の文章は「ENTER」で改行できるので、iPhoneなどスマホでの記事作成時にも簡単に使えます。

各丸のタブ付きボックス（①－A）

<div style="display: inline-block; background: #4169e1; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #87cefa; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #59a136; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #d9333f; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #eb6ea5; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #fca60d; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="display: inline-block; background: #8b4513; border-radius: 6px 6px 0px 0px / 6px 6px 0px 0px; color: #ffffff; padding: 3px 15px 1px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="border: 2px solid #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ボックス内側にタブ付き（①－B）

<div style="border: 2px solid #4169e1;">
<div style="display: inline-block; background: #4169e1; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa;">
<div style="display: inline-block; background: #87cefa; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136;">
<div style="display: inline-block; background: #59a136; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f;">
<div style="display: inline-block; background: #d9333f; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5;">
<div style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d;">
<div style="display: inline-block; background: #fca60d; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513;">
<div style="display: inline-block; background: #8b4513; color: #ffffff; padding: 1px 15px 3px 17px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

内側タブ＋塗りつぶし（①－C）

<div style="background: #e0e7fa;">
<div style="display: inline-block; background: #4169e1; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #e7f5fe;">
<div style="display: inline-block; background: #87cefa; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #d6efbe;">
<div style="display: inline-block; background: #59a136; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #f5c7ca;">
<div style="display: inline-block; background: #d9333f; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #fbe4ee;">
<div style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #fee8c2;">
<div style="display: inline-block; background: #fca60d; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #f6d4bc;">
<div style="display: inline-block; background: #8b4513; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

内側タブ＋塗りつぶし＋影つき（①－D）

<div style="background: #e0e7fa; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #4169e1; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #e7f5fe; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #87cefa; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #d6efbe; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #59a136; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #f5c7ca; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #d9333f; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #eb6ea5; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #fee8c2; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #fca60d; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background: #f6d4bc; box-shadow: 3px 3px 6px -2px #555;">
<div style="display: inline-block; background: #8b4513; color: #ffffff; padding: 3px 15px 3px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

タイトル部分を広げたボックス（①－E）

<div style="border: 2px solid #4169e1; background: #ffffff;">
<div style="background: #4169e1; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #ffffff;">
<div style="background: #87cefa; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #ffffff;">
<div style="background: #59a136; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #ffffff;">
<div style="background: #d9333f; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #ffffff;">
<div style="background: #eb6ea5; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #ffffff;">
<div style="background: #fca60d; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #ffffff;">
<div style="background: #8b4513; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

タイトル部分を広げたボックス＋影つき（①－F）

<div style="border: 2px solid #4169e1; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #4169e1; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #87cefa; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #59a136; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #d9333f; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #eb6ea5; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #fca60d; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #ffffff; box-shadow:3px 3px 6px -2px #555;">
<div style="background: #8b4513; color: #ffffff; padding: 3px 15px 5px 15px;"><p>タイトル</p></div>
<div style="padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

タイトル部分が広い＋塗りつぶし（①－G）

<div style="background: #4169e1; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #87cefa; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #59a136; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d9333f; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #eb6ea5; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fca60d; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #8b4513; color: #ffffff; padding: 3px 15px; margin-bottom: 0;"><p>タイトル</p></div>
<div style="background: #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

タイトルつき枠線のボックス（①－H）

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

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

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

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

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

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

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

あめっくま

背景が白以外のテーマの人は、タイトル部分が白くなります。その場合はこの後の「fieldset」を使って下さい。（ただし利用は非推奨）

タイトルつき枠線のボックス（①－i）

背景が白以外の人は、こちらでキレイに表示されます。ただし「fieldset」「legend」は本来は別の目的で使うタグなので、利用は非推奨です。

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

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

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

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

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

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

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

あめっくま

「fieldset」「legend」ではなく、「div」を使いましょう。

タイトルつき角丸ボックス（①－J）

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

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

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

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

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

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

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

タイトル部分を塗りつぶしたボックス（①－K）

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

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

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

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

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

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

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

②シンプルな囲み枠（枠線・角丸・塗りつぶし・影つき）

「border」という枠線を表すコードでシンプルなボックスを作ります。

例えば「border: 2px solid #000000;」と書くと、太さ2px＋実線（solid）＋黒（#000000）の枠線を表現できます。

実線のボックス（②－A）

<div style="border: 2px solid #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

点線のボックス（②－B）

<div style="border: 2px dashed #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ドット線のボックス（②－C）

<div style="border: 3px dotted #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 3px dotted #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

2重線のボックス（②－D）

<div style="border: 5px double #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 5px double #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

各丸のボックス（②－E）

「border-radius」という四隅を丸くするコードを使って、各丸のボックスを作れます。

<div style="border: 2px solid #4169e1; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

うすい色で塗りつぶし（②－F）

背景を表す「background」で、塗りつぶしのボックスを作ります。

<div style="background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

うすい色で塗りつぶし＋各丸（②－G）

<div style="background: #e0e7fa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #e7f5fe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d6efbe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #f5c7ca; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fee8c2; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #f6d4bc; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

濃い色で塗りつぶし（②－H）

<div style="background: #4169e1; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #87cefa; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #59a136; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d9333f; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #eb6ea5; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fca60d; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #8b4513; color: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

濃い色で塗りつぶし＋各丸（②－i）

<div style="background: #4169e1; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #87cefa; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #59a136; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d9333f; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #eb6ea5; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fca60d; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #8b4513; color: #ffffff; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

実線の枠線＋うすい色で塗りつぶし（②－J）

枠線の「border」と背景の「background」を組み合わせました。

<div style="border: 2px solid #4169e1; background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

点線＋塗りつぶし（②－K）

<div style="border: 2px dashed #4169e1; background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #87cefa; background: #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #59a136; background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #d9333f; background: #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #eb6ea5; background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #fca60d; background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #8b4513; background: #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋塗りつぶし＋各丸（②－L）

<div style="border: 2px solid #4169e1; background: #e0e7fa; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #e7f5fe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #d6efbe; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #f5c7ca; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #fbe4ee; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #fee8c2; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #f6d4bc; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋影つき（②－M）

影を指示する「box-shadow」を使います。囲み枠が立体的に見えるので、かなり目立ちますね。

<div style="border: 2px solid #4169e1; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋各丸＋影つき（②－N）

<div style="border: 2px solid #4169e1; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; box-shadow: 3px 3px 6px -2px #555; border-radius: 10px; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

塗りつぶし＋影つき（②－O）

<div style="background: #4169e1; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #87cefa; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #59a136; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d9333f; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #eb6ea5; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fca60d; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #8b4513; color: #ffffff; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

塗りつぶし＋各丸＋影つき（②－P）

<div style="background: #4169e1; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #87cefa; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #59a136; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #d9333f; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #eb6ea5; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #fca60d; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="background: #8b4513; color: #ffffff; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋塗りつぶし＋影つき（②－Q）

<div style="border: 2px solid #4169e1; background: #e0e7fa; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #e7f5fe; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #d6efbe; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #f5c7ca; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #fbe4ee; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #fee8c2; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #f6d4bc; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋塗りつぶし＋各丸＋影つき（②－R）

<div style="border: 2px solid #4169e1; background: #e0e7fa; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: #e7f5fe; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: #d6efbe; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: #f5c7ca; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: #fbe4ee; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: #fee8c2; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: #f6d4bc; border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

③かわいい囲み枠（ふんわり・水玉・キルト風）

ふんわりぼかした囲み枠（③－A）

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

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

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

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

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

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

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

水玉模様（③－B）

<div style="border: 2px solid #4169e1; background-color: #e0e7fa; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background-color: #e7f5fe; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background-color: #d6efbe; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background-color: #f7cfd2; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background-color: #fbe4ee; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background-color: #fee8c2; 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>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background-color: #f6d4bc; 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>
<p>&nbsp;</p>

濃い色のキルト・布風（③－C）

<div style="border: 2px dashed #ffffff; background: #4169e1; color: #ffffff; box-shadow:0px 0px 0px 10px #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #87cefa; color: #ffffff; box-shadow:0px 0px 0px 10px #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #59a136; color: #ffffff; box-shadow:0px 0px 0px 10px #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #d9333f; color: #ffffff; box-shadow:0px 0px 0px 10px #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #eb6ea5; color: #ffffff; box-shadow:0px 0px 0px 10px #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #fca60d; color: #ffffff; box-shadow:0px 0px 0px 10px #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #8b4513; color: #ffffff; box-shadow:0px 0px 0px 10px #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

濃い色のキルト・布風＋各丸（③－D）

<div style="border: 2px dashed #ffffff; background: #4169e1; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #4169e1; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #87cefa; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #87cefa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #59a136; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #59a136; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #d9333f; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #d9333f; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #eb6ea5; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #eb6ea5; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #fca60d; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #fca60d; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #ffffff; background: #8b4513; border-radius: 10px; color: #ffffff; box-shadow:0px 0px 0px 10px #8b4513; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

うすい色のキルト・布風（③－E）

<div style="border: 2px dashed #4169e1; background: #e0e7fa; box-shadow:0px 0px 0px 10px #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #87cefa; background: #e7f5fe; box-shadow:0px 0px 0px 10px #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #59a136; background: #d6efbe; box-shadow:0px 0px 0px 10px #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #d9333f; background: #f5c7ca; box-shadow:0px 0px 0px 10px #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #eb6ea5; background: #fbe4ee; box-shadow:0px 0px 0px 10px #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #fca60d; background: #fee8c2; box-shadow:0px 0px 0px 10px #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #8b4513; background: #f6d4bc; box-shadow:0px 0px 0px 10px #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

うすい色のキルト・布風＋各丸（③－F）

<div style="border: 2px dashed #4169e1; background: #e0e7fa; border-radius: 10px; box-shadow:0px 0px 0px 10px #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #87cefa; background: #e7f5fe; border-radius: 10px; box-shadow:0px 0px 0px 10px #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #59a136; background: #d6efbe; border-radius: 10px; box-shadow:0px 0px 0px 10px #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #d9333f; background: #f5c7ca; border-radius: 10px; box-shadow:0px 0px 0px 10px #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #eb6ea5; background: #fbe4ee; border-radius: 10px; box-shadow:0px 0px 0px 10px #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #fca60d; background: #fee8c2; border-radius: 10px; box-shadow:0px 0px 0px 10px #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px dashed #8b4513; background: #f6d4bc; border-radius: 10px; box-shadow:0px 0px 0px 10px #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

④オシャレ・かっこいい囲み枠（ストライプ・ふせん・ゴールド・黒板）

オシャレ・かっこいい囲み枠を集めましたす。

ストライプのボックス（④－A）

ストライプ模様のボックスも作れます。

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

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

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

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

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

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

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

ストライプ＋各丸（④－B）

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

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

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

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

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

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

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

枠線＋ストライプ（④－C）

<div style="border: 2px solid #4169e1; background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: repeating-linear-gradient(-45deg, #e7f5fe, #e7f5fe 3px, #f0f9fe 3px, #f0f9fe 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

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

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

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

<div style="border: 2px solid #8b4513; background: repeating-linear-gradient(-45deg, #f6d4bc, #f6d4bc 3px, #f8dfce 3px, #f8dfce 7px); padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋各丸＋ストライプ（④－D）

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

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

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

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

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

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

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

枠線＋ストライプ＋影つき（④－E）

<div style="border: 2px solid #4169e1; background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: repeating-linear-gradient(-45deg, #e7f5fe, #e7f5fe 3px, #f0f9fe 3px, #f0f9fe 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: repeating-linear-gradient(-45deg, #f5c7ca, #f5c7ca 3px, #f7cfd2 3px, #f7cfd2 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: repeating-linear-gradient(-45deg, #f6d4bc, #f6d4bc 3px, #f8dfce 3px, #f8dfce 7px); box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

枠線＋各丸＋ストライプ＋影つき（④－F）

<div style="border: 2px solid #4169e1; background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #87cefa; background: repeating-linear-gradient(-45deg, #e7f5fe, #e7f5fe 3px, #f0f9fe 3px, #f0f9fe 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #59a136; background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #d9333f; background: repeating-linear-gradient(-45deg, #f5c7ca, #f5c7ca 3px, #f7cfd2 3px, #f7cfd2 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #fca60d; background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

<div style="border: 2px solid #8b4513; background: repeating-linear-gradient(-45deg, #f6d4bc, #f6d4bc 3px, #f8dfce 3px, #f8dfce 7px); border-radius: 10px; box-shadow: 3px 3px 6px -2px #555; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div>
<p>&nbsp;</p>

ストライプの枠（④－G）

枠線をストライプにしたボックスです。

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #4169e1 25%, #4169e1 50%, #ffffff 50%, #ffffff 75%, #4169e1 75%, #4169e1); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #87cefa 25%, #87cefa 50%, #ffffff 50%, #ffffff 75%, #87cefa 75%, #87cefa); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #59a136 25%, #59a136 50%, #ffffff 50%, #ffffff 75%, #59a136 75%, #59a136); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #d9333f 25%, #d9333f 50%, #ffffff 50%, #ffffff 75%, #d9333f 75%, #d9333f); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #fca60d 25%, #fca60d 50%, #ffffff 50%, #ffffff 75%, #fca60d 75%, #fca60d); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #8b4513 25%, #8b4513 50%, #ffffff 50%, #ffffff 75%, #8b4513 75%, #8b4513); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

ストライプの枠＋塗りつぶし（④－H）

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #4169e1 25%, #4169e1 50%, #ffffff 50%, #ffffff 75%, #4169e1 75%, #4169e1); padding: 6px;">
<div style="background: #e0e7fa; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #87cefa 25%, #87cefa 50%, #ffffff 50%, #ffffff 75%, #87cefa 75%, #87cefa); padding: 6px;">
<div style="background: #e7f5fe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #59a136 25%, #59a136 50%, #ffffff 50%, #ffffff 75%, #59a136 75%, #59a136); padding: 6px;">
<div style="background: #d6efbe; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #d9333f 25%, #d9333f 50%, #ffffff 50%, #ffffff 75%, #d9333f 75%, #d9333f); padding: 6px;">
<div style="background: #f5c7ca; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 6px;">
<div style="background: #fbe4ee; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #fca60d 25%, #fca60d 50%, #ffffff 50%, #ffffff 75%, #fca60d 75%, #fca60d); padding: 6px;">
<div style="background: #fee8c2; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

<div style="background-size: 4px 4px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #8b4513 25%, #8b4513 50%, #ffffff 50%, #ffffff 75%, #8b4513 75%, #8b4513); padding: 6px;">
<div style="background: #f6d4bc; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

ふせん（透明テープ）（④－i）

人気のふせん風の囲み枠です。4色用意しました。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

ふせん（マスキングテープ）（④－J）

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

<div style="background-color: #ffffff; background-image: linear-gradient(-45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(250,215,215,.5) 25%, transparent 25%, transparent 50%, rgba(250,215,215,.5) 50%, rgba(250,215,215,.5) 75%, transparent 75%, transparent 100%); background-size: 40px 40px; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

ふせん風の囲み枠素材は、以下の関連記事でさらに多く紹介しています。

【コピペで即使える】アメブロ向け付箋の飾り枠（HTML・CSS不要）

この記事ではアメブロで簡単に使える付箋風の飾り枠を紹介します。お好みのデザイン・色を選ぶと、HTMLコードが自動で表示されるので、コピーして貼り付けるだけ。あなたのアメブロが素敵に変身します。

nk-media.org

ゴールドの囲み枠（④－K）

<div style="background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); padding: 6px;">
<div style="background: #ffffff; padding: 15px;">
<p style="margin: 0;">ここに文章</p></div></div>
<p>&nbsp;</p>

黒板風のボックス（④－L）

<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>&nbsp;</p>

タイトル部分付きの黒板（④－M）

<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>&nbsp;</p>

黒板風の囲み枠素材は、以下の関連記事でさらに多く紹介しています。

【全27種】アメブロ向け黒板風の飾り枠デザイン（HTML・CSS不要）

この記事ではアメブロ向けの黒板風の飾り枠を紹介します。デザインと色を選んだら、コピーしてアメブロのHTML表示に貼り付けるだけ。黒板風の飾り枠は目立ち、読みやすいので効果が高いです。

nk-media.org

囲み枠の活用法

要点・まとめを書く

文章を書いただけの記事では、残念ながら読者の印象にはほとんど残りません。

アナリティクスでデータを見ると、読者に流し読みされる記事も多いことが分かりますよね。

そこで下記のように、記事の要点を囲み枠の中に書くのがおすすめ。

囲み枠で目立たせると、読者が「中身を読む」＋「要点を理解しやすい」などのメリットがあります。

くますけ

記事の途中で要点がまとまってると分かりやすいよね。

リンクを置く

下記のように囲み枠の中に誘導したい記事へのリンクを置いて、読者にブログ内を巡回してもらいましょう。

記事中にリンクを置くだけより、囲み枠の中にある方が目立ちますね。

あめっくま

基本事項ですが、リンクの文字色は青色以外を使わないで下さいね。

箇条書きを入れて使う

伝えたいポイントが複数ある時は、箇条書きを囲み枠の中に入れて使うと効果的です。

くますけ

囲み枠の中に箇条書きが入ると分かりやすいね！

囲み枠の設置手順

アメブロに囲み枠を貼り付ける手順を解説します。

デザインを選んで、HTMLコードをコピー

使いたい囲み枠のデザインと色を、この記事から選んで下さい。

色を選ぶと、囲み枠の下にコードが表示されるのでコピーします。

あめっくま

HTMLコードの意味は分からなくても大丈夫ですよ。

アメブロに貼り付けて中身を書く

アメブロ記事作成画面で「HTML表示」に切り替えて、コードを貼り付けます。

貼り付けたら、記事作成画面を「通常表示」に戻しましょう。

最後に囲み枠の中身を書きます。

これでアメブロにも囲み枠ができましたね。

ちなみに、当サイトで用意した囲み枠の中身は「ENTER」または「SHIFT＋ENTER」どちらでも改行可能です。

あめっくま

コピーしたら貼り付けて、囲み枠の中身を書くだけですね。

アメブロでも以下のような「会話形式の吹き出し」を使えたらいいと思いませんか？

くますけ

 

このようなアイコン画像つきの吹き出しのことだよ。会話調で読みやすく、印象にも残りやすいね。

⇒ 実際にアメブロで吹き出しを使った記事はこちら

文字だらけの記事は読者に途中離脱されるので、吹き出しなどで「読ませる工夫」「印象に残す工夫」が大事ですよね。

くますけ

アメブロで「吹き出し」を使う人が増えてるよね！

あめっくま

おしゃれなだけではなく、集客・収益UPにつながるからだね。

使い方は3STEPで簡単！

HTMLやCSSを知らなくてもOK、コピペして貼り付けるだけ。

しかも、スマホやアプリで記事を見る読者にも対応。（レスポンシブデザイン）　

さらにブログの雰囲気に合わせて、各デザイン7色（青・水色・緑・赤・ピンク・オレンジ・茶）から選べます。

あめっくま

アメブロでも吹き出しを使って、集客・収益UPを目指しましょう！

おしゃれな吹き出し

おしゃれな会話調の「吹き出し」で、7色・左右を自由に選べます。

かわいいLINE風の吹き出し

LINE風の「吹き出し」も人気が高いです。7色・左右を自由に選べます。

考えごと風の吹き出し

心の中の声を表現した、考えごと風の「吹き出し」です。7色・左右を自由に選べます。

効果的な活用方法

アイコン画像つきの吹き出しを上手に使うと、読者数UP・収益UPにもつながります。

読者に大事な内容を伝える

吹き出しの中に、読者に伝えたい内容を書いて印象に残すことができます。

「吹き出し」と「普通の文章」を比べてみましょう。

吹き出しに入れた方が、大事な内容が伝わりやすいですよね。

しかもあなたが話しかけているように見えるので、読者の共感も得やすいです。

くますけ

吹き出しの内容は印象に残るよね！

記事を読みやすくする

内容が良くても文字だらけの記事は読みづらく、読者に途中で離脱されます。

忙しい読者には流し読みされ、肝心の内容が伝わらないことも・・・

よくあるアメブロでの書き方を、吹き出しで修正してみます。（記事の途中の箇条書きをイメージ）

Beforeはアメブロでよく見る絵文字を用いた箇条書きで、あまり良い書き方ではありません。

Afterはボックス枠に箇条書きを入れ、さらに吹き出しで小まとめにしました。

同じ内容でも吹き出しなどを使うだけで、読みやすく・納得する読者も増えます。

あめっくま

読者のニーズに合う記事を書いて、カスタマイズで読者の印象に残すことが大事ですね。

【補足】囲み枠はタグに注意

なおアメブロの囲み枠で、デメリットの多い「fieldset」「legend」タグを使っている人が一部います。

スマホで見れない読者が出てくるので、使わないようにしましょう。（知らずに推奨する人がいるので、要注意）

下記の記事では、安心して利用できる「アメブロ用の囲み枠」のみを紹介しています。

 安全な囲み枠のみ紹介

【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種

この記事ではアメブロ用の囲み枠・ボックス・フレーム枠のデザインを提供しています。素材は約300種類（色も選べる）・コピーして貼り付けるだけ（HTML・CSSの知識不要）シンプル・かわいい・かっこいいな囲み枠を用意しています。囲み枠を使っておしゃれなブログにしましょう。

nk-media.org

申し込みフォームの前に置く

吹き出しを申込フォームの前に置くと、安心感を与え・申込者数を伸ばすことも可能です。

アメブロにありがちなデザインと比べてみましょう。（記事の最後にセッションやセミナー紹介をするイメージ）

Beforeはアメブロでよく見るデザインで、残念ながら申込者数のUPはあまり期待できません。

くますけ

これは古いデザインだね。さすがに厳しそう・・・

そこで以下のように修正して見ます。

Afterは事前に吹き出しを使い、読者に安心感を与えます。ボックス枠も他の人とは違うデザインを使いました。

リンクもクリック率が上がるボタンを併用しています。

あめっくま

同じ内容でも、見せ方を変えるだけで申込者数UPも狙えます。

 クリック率が上がる！

素材数No1！アメブロ用の申し込みボタンをコピペで簡単作成

この記事ではアメブロで使えるボタンリンクの素材を紹介します。コピペで簡単に設置できます。HTML・CSSなどのカスタマイズ知識は不要！かわいいボタン・おしゃれなボタン・電話ボタン・お問い合わせボタンなど、あなたのアメブロ記事でもすぐ作成できますよ。

nk-media.org

吹き出しの設置手順

吹き出しには画像が入るので、事前にアイコンを用意する作業があります。

具体的な流れを分かりやすく紹介しますね。

【事前準備】アイコン画像の準備（最初の1回だけ）

初めて吹き出しを使う人は、専用のアイコンを準備しましょう。（2回目以降は不要な作業です）

アイコン画像は横100px・縦100pxの円形に切り取った画像を使って下さい。

例として「Photo Scape」（無料で簡単に使える画像編集ソフト）を使ってアイコン画像を作成してみます。（アイコンに使う画像はご自身で用意して下さいね）

Photo Scapeのダウンロードはこちら

まずはアイコンに使う画像を「Photo Scape」上で表示します。

以下のように「円形にトリミング」機能を使い、円を作り・サイズ縦横100PXに調整します。

「トリミング」をクリックすると、次のように切り取られます。

画像とサイズを確認して保存して下さい。

作成したアイコン画像を、アメブロにアップロードしておきましょう。

くますけ

この作業は最初の1回目のみです。

STEP①専用コードをコピー

次に吹き出しデザイン・色を選んで下さい。

デザインは「おしゃれ」「LINE風」「考えごと風」の3種で、それぞれ7色を用意。

専用コードは、下記リンク先のページでライセンス公開しています。

お好きなデザイン・色を選んだら、ライセンスページ内にある専用のHTMLコードをコピーします。

下記の黒い部分ですね。

あめっくま

HTMLコードの意味は分からなくてもOKです。

STEP②アメブロに貼り付け

続いてアメブロの記事作成画面を、「HTML表示」に切り替えます。

そして吹き出しを挿入したい部分に、コピーしたコードを貼り付けます。

コードを貼り付けたら、アイコン画像を挿入します。

専用コードの「ここに画像」の文字をマウスで選択した状態で、事前にアップロードしたアイコン画像をクリックしましょう。

下記のように、アイコン画像のURLが入ります。

続いて、アイコン画像がクリックで拡大されないようにします。

アイコン画像を拡大する意味はないので、「<a ～>」「</a>」の両方のタグを消しておきましょう。（片方だけ消すのは表示崩れになるので厳禁）

画像を表す「<img ～>」タグがあればOKです。（拡大されてもいい人は消さなくてもOK）

STEP③吹き出しの中身を書く

最後に「通常表示」に戻して、吹き出しに名前と中身を書きましょう。

吹き出しの中身や名前は、「ENTER」または「SHIFT＋ENTER」のどちらでも改行可能です。

名前は5文字までならスマホでも1行表示されます。長い場合は改行して下さいね。

あめっくま

コピーしたら貼り付けて、吹き出しの中身を書くだけですね。

2回目以降簡単に貼り付ける方法

2回目以降は、簡単に吹き出しを貼り付けましょう。

「中身の文章の書き換え」だけにするのがポイント！サクッと使えるようになります。

2つの方法を紹介するので、お好みで選んで下さいね。

【方法①】作成したHTMLコードをコピーしておく

吹き出しにアイコン画像や名前を入れた状態で、HTMLコードをメモ帳や付箋などに貼り付ける方法です。

吹き出しをアメブロで使う時に、HTML表示に貼り付ければOK。

アイコン画像や名前は1度作ったら変わらないので、サクッと貼り付けできるようにておきます。

あめっくま

HTMLコードの状態でメモ帳などに保存して下さいね。

【方法②】記事の複製機能を使う

アメブロの記事複製機能を使う方法ですね。

吹き出しを使った記事を複製すれば、中身の文章を書き換えるだけなので簡単。

 効率UP！

【アメブロの記事複製・コピー】パソコン・スマホ両方OKなスゴ技！

アメブロの記事複製・コピーの方法について解説します。複製機能を使うと、過去記事をすぐにコピーして新記事を作成できます。一部分を繰り返し使う場合に便利！パソコン・スマホアプリのどちらでも利用可能ですよ。

nk-media.org

ちなみに同一エディタ内なら、通常表示でもコピペできます。

過去に使った吹き出しを記事複製で表示させて、下記のようにコピペして下さい。

すると下記のように、全く同じものが簡単に作成できますね。

記事複製⇒エディタ内でコピペの順です。

HTML表示に切り替えなくていいので、簡単ですね。

よくある質問・注意点

吹き出し作成でよくある質問・注意点を紹介します。

カバー画像を設定する

アメブロ記事でカバー画像を設定することで、記事一覧などでサムネイル画像として表示される機能がありますよね。

カバー画像を設定しない場合は、記事の一番上に置いた画像がサムネイル表示されます。

つまりカバー画像を設定せず・吹き出しの上に何も画像がないと、サムネイルにアイコン画像が出てしまいます。

アイコン画像ではなく、記事内容に合ったサムネイル画像があるとアクセス数が伸びやすいです。

カバー画像を必ず設定しておきましょう。

あめっくま

吹き出しのアイコン画像がサムネイルにならないよう、注意して下さいね。

効果絶大！アメブロのカバー画像・アイキャッチの設定と推奨サイズ

この記事ではアメブロにアイキャッチ画像・カバー画像を設定する方法と効果を解説します。カバー画像を設定すれば様々な場所で表示されるので、読者のクリック率が上がります。ブログ集客のポイントになるので、記事に入れておきましょう。

nk-media.org

画像に代替に代替テキストは入れるべき？

通常の画像には代替テキストを入れた方がアクセス数で有利です。

多くの人がアクセス数UPのために、画像に代替テキストを入れていますよね。

ただし今回のアイコン画像は記事内容に直接関係ないので、代替テキストは空白でOKです。

【重要】アメブロの画像での代替テキストの書き方と効果

アメブロ記事に載せる画像に代替テキスト（alt属性）を載せる方法を解説します。画像で分かりやすくするのは大事ですが、代替テキストを入れていないと、画像が見れない時に内容が伝わりません。仕組みや効果的な活用法を解説します。

nk-media.org

この記事では、アメブロに下記のような見出しタグを導入する方法を解説します。

くますけ

「見出し」がある記事は、読みやすいよね。

あめっくま

記事が分割されて、分かりやすくなるよね。読者に内容を理解されやすくなる、重要な技術だよ。

使い方はHTMLやCSSを知らなくてもOK、コピペして貼り付けるだけ。

しかもスマホアプリで記事を見る読者にも対応します。

デザインと色を選ぶとコードが自動で表示されます。コピーしてアメブロ記事内のHTML表示に貼りつけましょう。

素材以外に「見出しの基本知識」や「設置の手順」も解説しているので、ぜひ確認して下さいね。

あめっくま

見出しはSEOにも影響します。アメブロのアクセスUP手法の1つですね。ぜひ使いこなしましょう！

見出しの役割は読みやすさとSEO

見出しには、下記の2つの役割があります。

①の段落分けは分かりやすいですよね。

ダラダラ書くより、内容を区切って解説する方が読みやすくなります。

今何について書いているのか分かりやすくなり、文章のテンポもよくなりますね。

あめっくま

逆に見出しのない記事は読みづらく、内容が理解されにくいです・・・

さらに大事なのは、②の検索エンジンからの集客を狙うこと。

つまり見出しにはSEOの効果があるということですね。

検索エンジンで上位表示できれば、あなたのアメブロへのアクセス数が急速に伸びます。

検索エンジンが長期間・大量に集客してくれるので、過去に書いた記事が資産記事となり・効率よくアクセスを伸ばすことができますね。

ブログの最も基本的な集客手法となります。

あめっくま

アメブロは検索エンジンからの集客に強いので、見出しを取り入れて資産記事を狙う人も増えていますね。

検索エンジンは見出しを確認する

検索エンジンは特に記事のタイトルと見出しを優先的に見て、記事内容を確認しています。

そしてキーワード検索した読者に、答えとして最適な記事を上位表示する仕組み。

つまり記事タイトルと見出しにキーワードを入れると、アクセス数UPにつながるということですね。

過去記事が読まれ続けることが重要！

新しい記事を書くことは大事ですよね。

ですがそれ以上に、過去記事が長く読まれ続けることが重要！

新記事と過去記事の両方が読まれると、どんどんアクセスが増えるので・ブログが右肩上がりに成長します。

逆に過去記事が読まれないアメブロは、新記事を書かないとアクセスが減りますよね。

常に新記事を用意しないとアクセスが減ってしまう、ブログの自転車操業ですね。

苦しいブログ運営になりやすいので注意しましょう。

見出しを活用してSEO対策をすると、検索エンジンで過去記事が上位表示されますよね。

過去記事を「資産記事」にできると、長期間・大量のアクセスが来るのでアメブロが成功しやすいです。

アメブロの記事を資産化する具体的な書き方は、下記のnoteで紹介しています。　

 資産記事でアメブロ集客が安定！

アメブロ初心者を脱出！長期間アクセスが続く資産記事の基本的な作り方｜あめっくま先生

✅ あめっくまのnoteご購入者「1,000名突破」記念 この記事を購入された方向けに、キャンペーンを実施中！ 【特典】...

note.com

くますけ

「見出し」はアクセス面でも重要なんだね。

あめっくま

だから見出しにキーワードを入れて記事を作成するのが大事なんだよ。

①シンプルな罫線・枠線の見出し素材

最初にシンプルな見出し素材を紹介しますね。

なお実際にアメブロでシンプルな見出しを使った見本記事は、下記で確認できます。具体的なイメージをチェックして下さいね。

 アメブロ版でチェック！

『【アメブロ用シンプルな見出し】線・罫線・ラインタイプの素材を紹介！コピペで簡単利用』

この記事ではアメブロの記事で使える「シンプルな見出し」を紹介します。 完成イメージは下記の通り。 見出しの見本①見出しの...

ameblo.jp

下線の見出し（①－A）

<h2 style="border-bottom: 3px solid #4169e1;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #87cefa;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #59a136;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #d9333f;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #eb6ea5;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #fca60d;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px solid #8b4513;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

2色下線の見出し（①－B）

背景色が白色のブログ専用です。（背景に色がある場合は、白く塗りつぶされます）

<h2 style="background: linear-gradient(to right, #4169e1 0% 25%, #9aafef 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #87cefa 0% 25%, #d3edfd 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #59a136 0% 25%, #a0d685 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #d9333f 0% 25%, #eea5a9 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #eb6ea5 0% 25%, #f8c9dd 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #fca60d 0% 25%, #fed690 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

<h2 style="background: linear-gradient(to right, #8b4513 0% 25%, #ea9a62 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

点線の見出し（①－C）

<h2 style="border-bottom: 2px dashed #4169e1;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #87cefa;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #59a136;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #d9333f;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #eb6ea5;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #fca60d;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 2px dashed #8b4513;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

ドット線の見出し（①－D）

<h2 style="border-bottom: 3px dotted #4169e1;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #87cefa;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #59a136;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #d9333f;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #eb6ea5;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #fca60d;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 3px dotted #8b4513;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

2重線の見出し（①－E）

<h2 style="border-bottom: 5px double #4169e1;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #87cefa;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #59a136;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #d9333f;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #eb6ea5;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #fca60d;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-bottom: 5px double #8b4513;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

左線の見出し（①－F）

<h2 style="border-left: 5px solid #4169e1; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #87cefa; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #59a136; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #d9333f; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #eb6ea5; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #fca60d; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 5px solid #8b4513; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

左線＋下線の見出し（①－G）

<h2 style="border-left: 10px solid #4169e1; border-bottom: 2px solid #4169e1; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #87cefa; border-bottom: 2px solid #87cefa; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #59a136; border-bottom: 2px solid #59a136; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #d9333f; border-bottom: 2px solid #d9333f; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #eb6ea5; border-bottom: 2px solid #eb6ea5; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #fca60d; border-bottom: 2px solid #fca60d; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-left: 10px solid #8b4513; border-bottom: 2px solid #8b4513; padding: 0 0.3em;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

上下線の見出し（①－H）

<h2 style="border-top: 3px solid #4169e1; border-bottom: 3px solid #4169e1; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #87cefa; border-bottom: 3px solid #87cefa; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #59a136; border-bottom: 3px solid #59a136; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #d9333f; border-bottom: 3px solid #d9333f; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #eb6ea5; border-bottom: 3px solid #eb6ea5; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #fca60d; border-bottom: 3px solid #fca60d; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 3px solid #8b4513; border-bottom: 3px solid #8b4513; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

上下点線の見出し（①－i）

<h2 style="border-top: 2px dashed #4169e1; border-bottom: 2px dashed #4169e1; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #87cefa; border-bottom: 2px dashed #87cefa; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #59a136; border-bottom: 2px dashed #59a136; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #d9333f; border-bottom: 2px dashed #d9333f; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #eb6ea5; border-bottom: 2px dashed #eb6ea5; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #fca60d; border-bottom: 2px dashed #fca60d; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

<h2 style="border-top: 2px dashed #8b4513; border-bottom: 2px dashed #8b4513; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>

• 中見出し：最初と最後の「h2」を「h3」に変更
• 小見出し：最初と最後の「h2」を「h4」に変更

上下ドット線の見出し（①－J）

<h2 style="border-top: 3px dotted #4169e1; border-bottom: 3px dotted #4169e1; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p>&nbsp;</p>