【動画付】アメブロ記事内でかわいいおしゃれな囲み枠線を作る方法

こんにちは。ブログコンサルタントの櫻井圭子です。

読みやすい、見やすい、かわいいアメブロと、そうでないアメブロの違いは何でしょう？

お金をかけてプロのデザイナーさんにお願いすればそれは勿論かわいくなりますが、自分でお金をかけずに読みやすくかわいくする事もできます！！

それは、囲み枠を使う事です！

囲み枠はHTMLタグと呼ばれる英数字をコピペする事で誰でも簡単に作ることができるんですよ。

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]この記事の中ではコピペするだけでとっても簡単に自分のアメブロの中で囲み枠を作る方法をお伝えさせていただきます！[/speech_bubble]

本日はコピペOK!かわいい!おしゃれ!アメブロ記事内で囲み枠を作る方法というテーマでお届けします。

アメブロの記事内で囲み枠を作る方法

[wp-svg-icons icon=”arrow-down” wrap=”span”]

[wp-svg-icons icon=”arrow-down” wrap=”span”]

アメブロの記事内で作る囲み枠一覧（コピペOK）

角丸二重線のアメブロ囲み枠線

グレーの枠線ver

【ピンク①】

<div style="background:#FCF3F3;padding: 10px; border: 5px double#DDDBDC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef;padding: 10px; border: 5px double#DDDBDC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe;padding: 10px; border: 5px double#DDDBDC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【ミント】

<div style="background:#effbfa;padding: 10px; border: 5px double#DDDBDC; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

白の枠線ver

【ピンク①】

<div style="background:#FCF3F3;padding: 10px; border: 5px double#fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef;padding: 10px; border: 5px double#fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【水色】

<div style="background:#eef4fb;padding: 10px; border: 5px double#fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br> ※改行はShift+Enter</div>

【ミント】

<div style="background:#ddf8f7;padding: 10px; border: 5px double#fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">本文を入力してください。<br><br> ※改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]グレーのラインはオシャレな感じに。
白ラインはグレーよりも甘めでかわいくなります！[/speech_bubble]

線付き囲み枠線

カラーの枠線ver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:2px solid #f0d6d5;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:2px solid #f8e1da;">本文を入力してください。<br>※改行はShift+Enter</div>

グレーの枠線ver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:2px solid #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:2px solid #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe; padding:10px; border:2px solid #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

ゴールドの枠線ver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:2px solid #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:2px solid #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

【クリーム】

<div style="background:#fffcf6; padding:10px; border:2px solid #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe; padding:10px; border:2px solid #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]カラーの線は同系色なので合わせやすいです。
グレーの線はスタイリッシュな感じに。
ゴールドの線は女性に人気の配色です！[/speech_bubble]

二重ラインの囲み枠線

グレーの枠線ver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:4px double #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:4px double #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe; padding:10px; border:4px double #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

ゴールドの枠線ver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:4px double #cec3a8;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:4px double #cec3a8;">本文を入力してください。<br>※改行はShift+Enter</div>

【クリーム】

<div style="background:#fffcf6; padding:10px; border:4px double #cec3a8;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe; padding:10px; border:4px double #cec3a8;">本文を入力してください。<br>※改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]二重線の囲み枠は、女性らしいデザインになります。[/speech_bubble]

水玉ラインがナチュラルでかわいい囲み枠線

グレーver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:4px dotted #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:4px dotted #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background:#f5fafe; padding:10px; border:4px dotted #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

【ミント】

<div style="background:#effbfa; padding:10px; border:4px dotted #DDDBDC;">本文を入力してください。<br>※改行はShift+Enter</div>

ゴールドver

【ピンク①】

<div style="background:#FCF3F3; padding:10px; border:4px dotted #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background:#fef2ef; padding:10px; border:4px dotted #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

【クリーム】

<div style="background:#fffcf6; padding:10px; border:4px dotted #dbd2bc;">本文を入力してください。<br>※改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]水玉の囲み枠は、線の太さで雰囲気が変わります。
細めだとチェーンのように見えて綺麗系。
太くすると水玉がはっきりと見えてカジュアルな感じのかわいい線になります。[/speech_bubble]

タイトル付きの囲み枠線

【ピンク①】

<div style="background: #FFEDED; border: 1px solid #FFEDED; padding: 10px;"><span style="color:#7f7f7f;"><span style="font-weight: bold;">■ここにタイトルを入力してください</span></span></div><div style="background:#fffdfd;border: 2px solid #FFEDED; padding: 10px;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク②】

<div style="background: #fef2ef; border: 1px solid #fef2ef; padding: 10px;"><span style="color:#7f7f7f;"><span style="font-weight: bold;">■ここにタイトルを入力してください</span></span></div><div style="background:#fff;border: 2px solid #fef2ef; padding: 10px;">本文を入力してください。<br>※改行はShift+Enter</div>

【ピンク③】

<div style="background: #FF8D99; border: 1px solid #FF8D99; padding: 10px;"><span style="color:#ffffff;"><span style="font-weight: bold;">■ここにタイトルを入力してください</span></span></div><div style="background:#fffcf6;border: 2px solid #FF8D99; padding: 10px;">本文を入力してください。<br>※改行はShift+Enter</div>

【水色】

<div style="background: #ecf3fb; border: 1px solid #ecf3fb; padding: 10px;"><span style="color:#7f7f7f;"><span style="font-weight: bold;">■ここにタイトルを入力してください</span></span></div><div style="background:#fefeff;border: 2px solid #ecf3fb; padding: 10px;">本文を入力してください。<br>※改行はShift+Enter</div>

【ミント】

<div style="background: #ddf8f7; border: 1px solid #ddf8f7; padding: 10px;"><span style="color:#7f7f7f;"><span style="font-weight: bold;">■ここにタイトルを入力してください</span></span></div><div style="background:#fff;border: 2px solid #ddf8f7; padding: 10px;">本文を入力してください。<br>※改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]告知や記事下の定型文を入れる時に人気のタイトル付きの囲み枠。
他の囲み枠より目立ちます。[/speech_bubble]

タイトルがはみ出てる囲み枠線

直線ver

【ピンク①】

<fieldset style="border:2px solid #fad7d7;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【ピンク②】

<fieldset style="border:2px solid #f5d4c9;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【水色】

<fieldset style="border:2px solid #d7e3f4;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【ミント】

<fieldset style="border:2px solid #94dce0;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

二重線ver

【ピンク①】

<fieldset style="border:4px double #fad7d7;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【ピンク②】

<fieldset style="border:4px double #f5d4c9;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【水色】

<fieldset style="border:4px double #d7e3f4;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

【ミント】

<fieldset style="border:4px double #94dce0;"><legend><span style="font-weight:bold;">■ここにタイトルを入力する</span> </legend> ここに本文を入力する。<br>改行はShift+Enter</fieldset>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]タイトルがはみ出でる囲み枠は、”合わせて読みたい関連記事”や、”こちらもオススメ”のような関連記事のリンクを貼るのに最適です。[/speech_bubble]

水彩画風のかわいい囲み枠線

【薄いピンクの花びら】

<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/01/keiko-design/03/b5/j/o0080008014538179013.jpg);border-radius:1px;"><div style="background:rgba(254,249,251,0.9);padding:5px;border-radius:1px;"><div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br>改行はshift+エンター</span></div></div></div>

【グレージュの水玉】

<div style="margin:10px 5px;padding:15px;word-break:break-all;color:#333;box-shadow:1px 1px 2px rgba(0,0,100,0.3);background:url(https://stat.ameba.jp/user_images/20190816/00/keiko-design/3c/9a/j/o0080008014538151878.jpg);border-radius:1px;"><div style="background:rgba(255,254,252,0.9);padding:5px;border-radius:1px;"><div style="border:4px double #cbb994;border-radius:1px;padding:10px"><span style="color:#7f7f7f;">ここに文字を入力。<br>改行はshift+エンター</span></div></div></div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]水彩画のイラストは1点1点手書きで書いた完全オリジナルです!
とてもかわいいので是非使ってくださいね。[/speech_bubble]

グラデーションの囲み枠線(影付き)

【パステルグラデーション】

<div style="background-image:linear-gradient(#e6e6fa,#ffe4e1);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>改行はShift+Enter</div>

【ブルー紫のグラデーション】

<div style="background-image:linear-gradient(62deg,#8EC5FC,#E0C3FC);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: none; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>改行はShift+Enter</div>

【ピンクラベンダーのグラデーション☆ゴールドの線付き】

<div style="background-image:linear-gradient(17deg,#FFE9F1,#F0E7FB);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #E0CA82;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>改行はShift+Enter</div>

【ブルーのグラデーション☆シルバーの線付き】

<div style="background-image:linear-gradient(#E0ECF5,#F6FAFD,#E0ECF5);background-color:#ffffff; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border:4px double #DCDDDD;border-radius:10px;padding:10px; box-shadow: 2px 2px 4px #dcdcdc;">ここに本文を入力する。<br>改行はShift+Enter</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]グラデーションの囲み枠線は綺麗なデザインが好きな方にオススメです。
線なしで自然な感じに。
線がある囲み枠線だとジュエリーのような雰囲気になります。[/speech_bubble]

ふんわりぼかしがオシャレな囲み枠線

【薄いオレンジピンク2】

<div style="padding:10px; margin: 15px; background: #fdeff2; box-shadow: #fdeff2 0 0 10px 10px;">ここに文字を入力。<br>改行はshift＋エンター</div>

【濃いめのピンク6】

<div style="padding:10px; margin: 15px; background: #fcdceb; box-shadow: #fcdceb 0 0 10px 10px;">ここに文字を入力。<br>改行はshift＋エンター</div>

【ピンクグレー】

<div style="padding:10px; margin: 15px; background: #f5ecf4; box-shadow: #f5ecf4 0 0 10px 10px;">ここに文字を入力。<br>改行はshift＋エンター</div>

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]ふんわりぼかした囲み枠線は主張が少なめです。
記事の先頭の毎回入れる短いプロフィール文章など、さりげなく主張するのにピッタリです。[/speech_bubble]

囲み枠を使って困った時の解決方法

囲み枠の中で改行する方法

改行はShiftキー＋Enterキーで進んでください。
（PCの機種によってはcommandキー＋Enterキー）

Enterキーで改行しようとすると囲み枠が次々とできて段々になりますので要注意！

囲み枠の下にカーソルが進めなくなってしまった時は・・・

囲み枠の下にカーソルが進めなくなってしまった場合は、HTMLタグを編集する方法で修正しましょう。

HTML表示画面にし、囲み枠のタグの下に<br>といれてください。

※<br>は改行するという意味になります。

[wp-svg-icons icon=”arrow-down” wrap=”span”]

アメブロの記事内の囲み枠の色や線の細さを自分でカスタマイズする方法

もっと自分だけのオリジナリティのある囲み枠を使ってアメブロをおしゃれにしたい方は、色や線の種類を自分で変更しましょう！

アメブロの囲み枠線を作るのに必要な基本のHTMLタグの解説

囲み枠を自分でカスタマイズする時に注意するポイント

ポイント①HTMLタグは1文字たりとも消さない

HTMLタグは1文字でも消えてしまうときちんと表示されなくなってしまいます。

逆に1文字でも余計な文字が入っていてもきちんと表示されません。

囲み枠の背景色、線の色や種類を変更した時に、「あれ？囲み枠消えちゃった」って時は、ここをチェックしてみましょう。

ポイント②閉じタグを忘れない

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]もう、どこがおかしいのか分からないって時は1からやり直す方法に頭を切り替えましょう。(笑)
タグの閉じ忘れ、誤字を見つけられない時は無限ループにハマってしまいます。そんな時は最初からやり直した方が早いです。[/speech_bubble]

囲み枠を使ってかわいいアメブロを作るポイント

囲み枠おしゃれポイントその①色を多用しすぎない！

かわいいアメブロにしたいからといって、欲張って色を沢山使いすぎてはいけません！

自分のブログだと気がつかないかもしれませんが、色や絵文字を多用しすぎてカラフルなアメブロって目がチカチカして疲れませんか？

かわいいアメブロにする簡単な方法は色は3色までに絞ることです！

3色といっても、囲み枠だけで3色使って良いわけではありません。

記事内で使う文字の色もあわせて3色までです。

基本の文字色（黒、濃いグレーなど）＋ポイントカラーで2色まで。このポイントカラーとなる色に囲み枠の色を合わせましょう。

「色は3色まで」この簡単だけど大事な方法を守るとおしゃれになりますよ。

囲み枠おしゃれポイントその②告知をする時は目立たせる！

かわいいアメブロを自分で作る方法は、アメブロ全体のカラーを同色系統で合わせることです。

同色系統でまとめると初心者さんでも簡単におしゃれに作ることができます。

ただし！！告知記事についてはまた別の話となります。

メルマガ登録やセミナー募集などの告知を書く目的は、告知リンクをクリック(スマホの場合はタップ)して、その先の告知記事を読んで登録や申し込みをしてもらうことですよね？

同色系統で綺麗にまとまりすぎていると、アメブロの記事内にお申し込みのリンクがあっても気がつかずにスルーしちゃう可能性があります。

目に留めてもらいたい告知やお申し込みリンクはアメブロ記事の全体のカラーとは補色となる色を使って、「ここだけ何か違う」そんな感じを作るのがポイントです。

補色を使い大事な部分を目立たせる方法

【補色の例】（補色とは反対色とほぼ同じ意味です）

• 赤⇄シアン（緑っぽい青）
• マゼンタ（赤紫）⇄緑
• 黄色⇄ネイビー（紺色）
  

色相環上で、反対の位置にある色を補色と呼びます。
反対の位置にあると相性が悪いのではないかと思われるかもしれませんが、真逆だからこそお互いが引き立つ良い関係なのです。

アメブロの記事内で囲み枠を使う3つのメリット

アメブロの記事内で囲み枠を使う3つのメリットを解説!!

メリット①目立たせることができる

囲み枠を使うことの1番のメリットは大事な部分を目立たせる事ができることです。

ここ（囲み枠を使っている部分）は「記事内の他の文章とは違いますよ」という事をアメブロ読者さんに教えてあげることができます。

メリット②おしゃれでかわいいブログになる

囲み枠を使うと、アメブロをオシャレでかわいくする事ができます。

アメブロはインターネットの中の自分の分身です。

女性はおしゃれでかわいいものが大好きです！！

女性のお客様がターゲットの方は、アメブロもオシャレでかわいくしましょう！

メリット③テーマカラーを使ったブランディングができる

この色を見るとあの人を思い出す。そんなことはありませんか？

色には多くの人が連想するイメージがあります。

あなたはお客様にどんな人に見られたいですか？

知的？おしゃれ？優しい？セレブ？かわいい？

テーマカラー＝色を使ったブランディング方法で自分の理想に近づきましょう。

まとめ

• 女性はかわいい、おしゃれなものが大好きです。アメブロでもしっかりと女性の好きな世界観を作るようにしましょう。（アメブロをお仕事に使っている起業女性は必須！）
• かわいいアメブロにするポイントは色を多用しすぎないことです。
• テーマカラーを決めてアメブロの中でもおしゃれな自分をブランディングしましょう。
• 囲み枠をカスタマイズする時は、HTMLタグを理解して閉じ忘れや間違えて消しちゃったということがないようにしましょう。

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”chat_keiko.jpg” name=”櫻井圭子”]コピペするだけで囲み枠が作れるのでとっても簡単！[/speech_bubble]

かわいいアメブロにしたい！そう思った方は是非こちらの記事内でご紹介させていただいた方法を使って囲み枠を作ることに挑戦してみてくださいね。

というわけで、本日はコピペOK!かわいい!おしゃれ!アメブロ記事内で囲み枠を作る方法というテーマでお届けさせていただきました。

本日も最後までお読みいただき、ありがとうございました。