囲み枠 | アメブロメーカー https://nk-media.org Mon, 21 Feb 2022 03:39:47 +0000 ja hourly 1 https://wordpress.org/?v=6.3.8 https://nk-media.org/wp-content/uploads/2023/04/cropped-amekuma01-32x32.png 囲み枠 | アメブロメーカー https://nk-media.org 32 32 182339089 【素材数No.1】アメブロ用の囲み枠・ボックス厳選300種 https://nk-media.org/box/ https://nk-media.org/box/#respond Tue, 05 Jan 2021 06:08:41 +0000 https://nk-media.org/?p=208 この記事の特徴

重要度 5.0
難易度 2.0
備考 アメブロ記事で囲み枠・ボックスを使うと、読者に大事な内容を伝えやすくなります。最近では多くのブログで使われるため、必須の内容と言えますね。
くますけ
今の時代は文字だけの記事では厳しいから、囲み枠を使って読みやすくしたいなあ・・・
あめっくま
読者の印象に残すためにも囲み枠は大事だよね。コピペで使えるデザインをたくさん用意したよ。

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

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

アメブロの囲み枠の作り方

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

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

あめっくま
「うまくいかない」など困った方は、遠慮なく記事下コメント欄から質問して下さいね。
  1. ①タイトル・タブ付きの囲み枠
    1. 各丸のタブ付きボックス（①－A）
    2. ボックス内側にタブ付き（①－B）
    3. 内側タブ＋塗りつぶし（①－C）
    4. 内側タブ＋塗りつぶし＋影つき（①－D）
    5. タイトル部分を広げたボックス（①－E）
    6. タイトル部分を広げたボックス＋影つき（①－F）
    7. タイトル部分が広い＋塗りつぶし（①－G）
    8. タイトルつき枠線のボックス（①－H）
    9. タイトルつき枠線のボックス（①－i）
    10. タイトルつき角丸ボックス（①－J）
    11. タイトル部分を塗りつぶしたボックス（①－K）
  2. ②シンプルな囲み枠（枠線・角丸・塗りつぶし・影つき）
    1. 実線のボックス（②－A）
    2. 点線のボックス（②－B）
    3. ドット線のボックス（②－C）
    4. 2重線のボックス（②－D）
    5. 各丸のボックス（②－E）
    6. うすい色で塗りつぶし（②－F）
    7. うすい色で塗りつぶし＋各丸（②－G）
    8. 濃い色で塗りつぶし（②－H）
    9. 濃い色で塗りつぶし＋各丸（②－i）
    10. 実線の枠線＋うすい色で塗りつぶし（②－J）
    11. 点線＋塗りつぶし（②－K）
    12. 枠線＋塗りつぶし＋各丸（②－L）
    13. 枠線＋影つき（②－M）
    14. 枠線＋各丸＋影つき（②－N）
    15. 塗りつぶし＋影つき（②－O）
    16. 塗りつぶし＋各丸＋影つき（②－P）
    17. 枠線＋塗りつぶし＋影つき（②－Q）
    18. 枠線＋塗りつぶし＋各丸＋影つき（②－R）
  3. ③かわいい囲み枠（ふんわり・水玉・キルト風）
    1. ふんわりぼかした囲み枠（③－A）
    2. 水玉模様（③－B）
    3. 濃い色のキルト・布風（③－C）
    4. 濃い色のキルト・布風＋各丸（③－D）
    5. うすい色のキルト・布風（③－E）
    6. うすい色のキルト・布風＋各丸（③－F）
  4. ④オシャレ・かっこいい囲み枠（ストライプ・ふせん・ゴールド・黒板）
    1. ストライプのボックス（④－A）
    2. ストライプ＋各丸（④－B）
    3. 枠線＋ストライプ（④－C）
    4. 枠線＋各丸＋ストライプ（④－D）
    5. 枠線＋ストライプ＋影つき（④－E）
    6. 枠線＋各丸＋ストライプ＋影つき（④－F）
    7. ストライプの枠（④－G）
    8. ストライプの枠＋塗りつぶし（④－H）
    9. ふせん（透明テープ）（④－i）
    10. ふせん（マスキングテープ）（④－J）
    11. ゴールドの囲み枠（④－K）
    12. 黒板風のボックス（④－L）
    13. タイトル部分付きの黒板（④－M）
  5. 囲み枠の活用法
    1. 要点・まとめを書く
    2. リンクを置く
    3. 箇条書きを入れて使う
  6. 囲み枠の設置手順
    1. デザインを選んで、HTMLコードをコピー
    2. アメブロに貼り付けて中身を書く

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

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

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

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

ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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>
ここにタイトル

よく見かけるタイトル部分付きのボックスです。まとめや関連記事など様々な用途で使えますね。タイトルが長いとスマホで2行になって、デザインが崩れる点に注意。

<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」は本来は別の目的で使うタグなので、利用は非推奨です。

ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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>
ここにタイトル

左上にタイトルを入れたボックスです。1つ前の「div」で作る方が安心です。

<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）

ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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>
ここにタイトル

「border-radius: 10px;」の数字で丸みを調整できます。

<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）

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

ボックスで囲むと記事が読みやすくなります。強調したい部分を囲むことで、内容を伝えやすくできますね。「solid」は実線を表します。

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

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

点線にしたパターンです。実線の「solid」から点線の「dashed」に変えています。

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

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

点線に似たドット線にしています。ドット線を表す「dotted」に変え、太さを3pxにしています。（3px以上推奨）

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

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

2重線を表す「double」に変えて、太さを5pxにしています。（5px以上推奨）

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

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

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

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

「border-radius: 10px;」の数字が大きくなると、丸みが強くなります。「solid」で実線・「dashed」で点線・「dotted」でドット線・「double」で2重線に変更可。

<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）

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

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

うすい色で塗りつぶして、四隅を丸くしたボックスです。「border-radius: 10px;」の数字で丸みを調整できます。

<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）

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

枠線を点線の「dashed」に変更しました。

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

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

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

「border-radius: 10px;」の数字で丸みを調整できます。

<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）

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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>

四隅を丸くする「border-radius」を入れると、角丸のボックスにもできます。

<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）

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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>

四隅を丸くする「border-radius」を使い、各丸にしました。

<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）

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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>

枠線の「border」、背景の「background」、影の「box-shadow」を使っています。

<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）

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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>

四隅を丸くする「border-radius」を使った各丸ボックスも可能です。

<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）

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

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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>

同系統のうすい2色を使ってストライプ模様にしてます。

<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）

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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）

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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）

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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>

「border-radius: 10px;」の数字で丸みを調整できます。

<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コードの意味は分からなくても大丈夫ですよ。

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

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

HTML表示に切り替え

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

通常表示に戻す

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

アメブロの囲み枠の中身を書く

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

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

あめっくま
コピーしたら貼り付けて、囲み枠の中身を書くだけですね。
]]> https://nk-media.org/box/feed/ 0 208 【簡単】アメブロで画像やボックスを中央・センター寄せする方法を解説 https://nk-media.org/img-center/ https://nk-media.org/img-center/#respond Sat, 12 Sep 2020 09:43:21 +0000 https://nk-media.org/?p=877 この記事の特徴

重要度 3.0
難易度 1.0

この記事ではアメブロで記事内で「画像」または「ボックス」を、真ん中に配置する方法を解説します。

「画像・写真」と「囲み枠などのボックス」では、センタリングの方法が違うので確認しておきましょう。

くますけ
中央に配置したい時ってあるよね。どうするんだろ・・・
あめっくま
とても簡単にできるよ。サクッと配置しよう。

写真や画像を中央寄せ

写真や画像を真ん中に寄せるのは簡単です。

センターに配置したい画像をクリックします。

画像をクリック

サイズ・貼り付け位置・代替テキストを設定できるボックスが出るので、「中央寄せ」のアイコンをクリックして下さい。

画像の中央寄せをクリック

すると下記のように、写真が真ん中に配置されます。

画像を中央寄せできた

「左寄せ」のアイコンをクリックすれば、元通り左側に配置されます。

くますけ
画像の中央寄せは簡単だね。

なお写真やイラストなどの画像を使う時は、「画像の軽量化」と「代替テキスト」の入力を必ず行いましょう。

検索エンジンからのアクセス数に影響が出るので、画像を使用する時は必須の設定ですね。

あめっくま
画像を使う時は軽量化と、代替テキストを忘れずに！
関連記事

ボックスを中央寄せ

ブログ記事でボックス枠を使うのは、「読者の途中離脱を防ぐ」・「申込者数を増やす」ために大事の手法ですよね。

ボックスの幅を100%から狭くした場合に、中央寄せしたいというケースもあります。

あめっくま
ボックスの場合は、画像と方法が異なります。

実例で紹介

例えば下記のような、幅を狭くしたボックスを真ん中に配置します。

例えばこのようなボックスをセンター配置してみます。

ちなみにこのボックスを使う時のコードは以下のとおりです。（コードの意味は分からなくても大丈夫）

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

中央寄せする時は、「margin: 0 auto;」というコードをコピペするだけ。

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

赤線が追加したコードです。加えると、下記のように中央に移動します。

例えばこのようなボックスをセンター配置してみます。

くますけ
コードを加えるだけでいいんだね。

例えば下のような「黒板風のボックス」も中央寄せが可能です。

ボックス枠のメリット
  • 記事が読みやすくなる
  • 読者の印象に残りやすい
  • サイトの素人感が減る

ちなみにこのボックスのコードは以下のとおりです。（コードの意味は分からなくても大丈夫）

<div style="max-width: 280px; border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
    <li style="margin-bottom: 1em;">箇条書き1</li>
    <li style="margin-bottom: 1em;">箇条書き2</li>
    <li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>

「margin: 0 auto;」のコードを追加すると、下記のように中央に寄りますね。

囲み枠のメリット
  • 記事が読みやすくなる
  • 読者の印象に残りやすい
  • サイトの素人感が減る

真ん中に配置した時のコードは下記のとおりです。

<div style="max-width: 280px; border: 8px solid #aa6600; background: #104300; color: #ffffff; box-shadow: 2px 2px 4px #999999, 2px 2px 2px #002200 inset; padding: 15px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 0.5em;"><span style="border-bottom: 1px solid white;">タイトル部分</span></div>
<ul style="margin-left: 20px; padding-left: 0px;">
    <li style="margin-bottom: 1em;">箇条書き1</li>
    <li style="margin-bottom: 1em;">箇条書き2</li>
    <li style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div>

赤線が追加したコードで、方法は同じです。

幅を調整したボックスは、中央寄せする方が見やすい場合があります。ちょっとした工夫が大事ですね。

あめっくま
コードが複雑なボックスは「うまくいかない」場合もあるかもしれません。困ったら記事下コメント欄から質問して下さいね。

当サイトではアメブロ向けのボックスを、数多く用意しています。

全てコピペでだけで簡単に使えるので、「読みやすい記事」・「印象に残る記事」にするために使いましょう。

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

]]> https://nk-media.org/img-center/feed/ 0 877 【コピペで即使える】アメブロ向け付箋の飾り枠（HTML・CSS不要） https://nk-media.org/postit/ https://nk-media.org/postit/#respond Sat, 12 Sep 2020 03:24:38 +0000 https://nk-media.org/?p=472 この記事の特徴

重要度 3.0
難易度 2.0
備考 アメブロ記事で使える付箋風の飾り枠です。見やすいので読者に伝わりやすく、オリジナル感もあります。

この記事では、以下のようなアメブロで使える付箋風の飾り枠を紹介します。

 
付箋風飾り枠のメリット
  • 記事が読みやすくなる（離脱防止）
  • 目立つので、読者の印象に残りやすい（収益UP）
  • サイトの素人感が減る（信頼感UP）

　　

くますけ
くますけ

アメブロで付箋のボックスを使うと、分かりやすくていいよね。

あめっくま
あめっくま

印象に残りやすいから、記事のポイントを伝えるのに便利だよ。

　　

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

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

アメブロで付箋の飾り枠の作り方

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

記事後半では「設置方法」も解説しているので、必要に応じて確認して下さいね。

　　

あめっくま
あめっくま

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

アメブロ用の付箋デザイン一覧

人気のふせん風ボックスを画像を使わずに、コピペで簡単に作れます。

透明のテープ付き

ふせんをテープで貼り付けしています。テープを半透明で斜めに配置し、付箋の紙には影をつけてリアル感を出しています。

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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>
  • 赤の「ここに文章」が付箋の中身

　　

マスキングテープつき

テープをピンク色のマスキングテープ風にアレンジしました。女性向けブログに使いやすいデザインとなっています。

<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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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 class="l-border l-p-t l-p-r l-p-b l-p-l" 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>
  • 赤の「ここに文章」が付箋の中身

　　

左側で貼り付けたふせん

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>

左側に貼り付け部分がある付箋です。補足やメモ書きなどにも使えるデザインですね。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<p style="margin: 0;">ここに文章</p></div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「ここに文章」が付箋の中身

　　

　　

付箋の中に箇条書きを入れる

付箋の中に箇条書きを入れることも可能です。

アメブロの箇条書きは行間がつまって見づらいので、見やすく調整もしています。

　　

箇条書き＋透明テープ付き付箋

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

数字箇条書き＋透明テープ付き付箋

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div><!-- ここまで付箋テープ -->
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

箇条書き＋マスキングテープの付箋

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

数字箇条書き＋マスキングテープの付箋

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #ffffcc; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #fff0f0; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #e6f2ff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<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 class="l-border l-p-t l-p-r l-p-b l-p-l" style="background: #dbffdb; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

箇条書き＋左側で貼り付けたふせん

  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 箇条書き1
  • 箇条書き2
  • 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ul style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ul>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

箇条書き＋左側で貼り付けたふせん

  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(60, 100%, 90%, 1), hsla(60, 100%, 90%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(0, 100%, 97%, 1), hsla(0, 100%, 97%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(211, 100%, 95%, 1), hsla(211, 100%, 95%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="background-image: linear-gradient(90deg, hsla(0, 0%, 45%, .1) 1rem, hsla(0, 100%, 100%, 0) 2rem), linear-gradient(90deg, hsla(120, 100%, 93%, 1), hsla(120, 100%, 93%, 1)); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 15px 15px 15px 30px;">
<ol style="margin-left: 20px; padding-left: 0px;">
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き1</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き2</li>
    <li class="l-m-b" style="margin-bottom: 1em;">箇条書き3</li>
</ol>
</div><!-- ここまで付箋 -->
<p>&nbsp;</p>
  • 赤の「箇条書き」が付箋の中身
  • 箇条書きを増やす ⇒ 通常表示にして箇条書き部分でエンター

　　

　　

使い方の手順

アメブロに付箋風の飾り枠を貼り付ける手順を解説します。

　　

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

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

付箋のHTMLコードをコピーする

色を選ぶと、付箋の下（グレーのボックス部分）にコードが表示されるのでコピーします。

　　

あめっくま
あめっくま

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

　　

　　

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

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

HTML表示に切り替え

　　

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

貼り付けたら通常表示に戻す

　　

最後に付箋の中身を書きます。

アメブロの付箋の中身を書く

　　

「ここに文章」の部分をお好みに変えて下さい。これでアメブロにも付箋ができましたね。

ちなみに当サイトの付箋飾り枠の中身は「ENTER」「SHIFT＋ENTER」のどちらでも改行できます。

　　

あめっくま
あめっくま

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

]]> https://nk-media.org/postit/feed/ 0 472