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

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

読みやすい、芋やすい、かわいいアメブロず、そうでないアメブロの違いは䜕でしょう

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

それは、囲み枠を䜿う事です

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

櫻井圭子
この蚘事の䞭ではコピペするだけでずっおも簡単に自分のアメブロの䞭で囲み枠を䜜る方法をお䌝えさせおいただきたす

 

本日はコピペOK!かわいい!おしゃれ!アメブロ蚘事内で囲み枠を䜜る方法ずいうテヌマでお届けしたす。

 

目次

アメブロの蚘事内で囲み枠を䜜る方法

[wp-svg-icons icon=”point-right” wrap=”span”] ご利甚にあたっお泚意ポむント

※ご自分のブログでコピペしお䜿っおいただいお倧䞈倫です
※報告䞍芁でお䜿いいただけたすが、ご玹介しおいただけるず励みになりたす♡
※無断転茉や、再配垃は犁止です
この蚘事のタグをコピペしお䌌たような蚘事を䜜ったり、メルマガやLINEで配垃する事。

 

 

①囲み枠を遞ぶ

この蚘事の䞭から奜きな囲み枠を遞んで、HTMLタグをコピヌしお䞋さい。


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

②アメブロぞ

【マむペヌゞ→ブログ管理→ブログを曞く】

この時デフォルトは通垞衚瀺ずなりたす。
タブをクリックしおHTML衚瀺にしおください。

HTML衚瀺に倉曎したら、蚘事の文章を入力する郚分にコピぺしおください。


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

③文章を入力

【HTML衚瀺から通垞衚瀺に戻す】

通垞衚瀺に戻しお、囲み枠の䞭に入れたい文章を入力しおください。

※元々入っおいる”ここに本文を入力する。”ずいう文字を消しお、曞きたい文を入力しお䞋さい。

 

 

[wp-svg-icons icon=”youtube” wrap=”span”] youtube

 

 

アメブロの蚘事内で䜜る囲み枠䞀芧コピペOK

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

 

グレヌの枠線ver

【ピンク①】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ピンク②】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【氎色】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ミント】

本文を入力しおください。
※改行はShift+Enter
 
<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

【ピンク①】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ピンク②】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【氎色】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ミント】

本文を入力しおください。
※改行はShift+Enter
 
<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>

 

櫻井圭子
グレヌのラむンはオシャレな感じに。
癜ラむンはグレヌよりも甘めでかわいくなりたす

 

 

線付き囲み枠線

 

カラヌの枠線ver

【ピンク①】

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

 

【ピンク②】

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

 

グレヌの枠線ver

【ピンク①】

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

 

【ピンク②】

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

 

【氎色】

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

 

ゎヌルドの枠線ver

【ピンク①】

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

 

【ピンク②】

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

 

【クリヌム】

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

 

【氎色】

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

 

櫻井圭子
カラヌの線は同系色なので合わせやすいです。
グレヌの線はスタむリッシュな感じに。
ゎヌルドの線は女性に人気の配色です

 

 

二重ラむンの囲み枠線

 

グレヌの枠線ver

【ピンク①】

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

 

【ピンク②】

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

 

【氎色】

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

 

ゎヌルドの枠線ver

【ピンク①】

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

 

【ピンク②】

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

 

【クリヌム】

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

 

【氎色】

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

 

櫻井圭子
二重線の囲み枠は、女性らしいデザむンになりたす。

 

 

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

 

グレヌver

【ピンク①】

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

 

【ピンク②】

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

 

【氎色】

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

 

【ミント】

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

 

ゎヌルドver

【ピンク①】

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

 

【ピンク②】

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

 

【クリヌム】

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

 

櫻井圭子
氎玉の囲み枠は、線の倪さで雰囲気が倉わりたす。
现めだずチェヌンのように芋えお綺麗系。
倪くするず氎玉がはっきりず芋えおカゞュアルな感じのかわいい線になりたす。

 

 

タむトル付きの囲み枠線

【ピンク①】

■ここにタむトルを入力しおください
本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ピンク②】

■ここにタむトルを入力しおください
本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ピンク③】

■ここにタむトルを入力しおください
本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【氎色】

■ここにタむトルを入力しおください
本文を入力しおください。
※改行はShift+Enter
 
<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>

 

【ミント】

■ここにタむトルを入力しおください
本文を入力しおください。
※改行はShift+Enter
 
<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>

 

櫻井圭子
告知や蚘事䞋の定型文を入れる時に人気のタむトル付きの囲み枠。
他の囲み枠より目立ちたす。

 

 

タむトルがはみ出おる囲み枠線

 

盎線ver

【ピンク①】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【ピンク②】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【氎色】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【ミント】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

二重線ver

【ピンク①】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【ピンク②】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【氎色】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

【ミント】

 ■ここにタむトルを入力する

 ここに本文を入力する。
 改行はShift+Enter

 

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

 

櫻井圭子
タむトルがはみ出でる囲み枠は、”合わせお読みたい関連蚘事”や、”こちらもオススメ”のような関連蚘事のリンクを貌るのに最適です。

 

氎圩画颚のかわいい囲み枠線

【薄いピンクの花びら】

ここに文字を入力。
改行はshift+゚ンタヌ

 

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

 

【グレヌゞュの氎玉】

ここに文字を入力。
改行はshift+゚ンタヌ

 

<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>
櫻井圭子
氎圩画のむラストは1点1点手曞きで曞いた完党オリゞナルです!
ずおもかわいいので是非䜿っおくださいね。

 

氎圩画颚のかわいい囲み枠線はこちらに沢山ありたす

[wp-svg-icons icon=”link” wrap=”span”] アメブロで䜿える囲み枠線!かわいい氎圩画颚30遞

 

 

グラデヌションの囲み枠線(圱付き)

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

ここに本文を入力する。
改行はShift+Enter
 
<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>

 

【ブルヌ玫のグラデヌション】

ここに本文を入力する。
改行はShift+Enter
 
<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>

 

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

ここに本文を入力する。
改行はShift+Enter
 
<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>

 

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

ここに本文を入力する。
改行はShift+Enter
 
<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>
櫻井圭子
グラデヌションの囲み枠線は綺麗なデザむンが奜きな方にオススメです。
線なしで自然な感じに。
線がある囲み枠線だずゞュ゚リヌのような雰囲気になりたす。

 

グラデヌションが綺麗な囲み枠線はこちらに沢山ありたす

[wp-svg-icons icon=”link” wrap=”span”] グラデヌションの綺麗かわいいアメブロ囲み枠線!24遞

 

 

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

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

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

 

【濃いめのピンク6】

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

 

【ピンクグレヌ】

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

 

櫻井圭子
ふんわりがかした囲み枠線は䞻匵が少なめです。
蚘事の先頭の毎回入れる短いプロフィヌル文章など、さりげなく䞻匵するのにピッタリです。

 

ふんわりがかしかわいいアメブロ囲み枠線はこちらに沢山ありたす

[wp-svg-icons icon=”link” wrap=”span”] ふんわりがかしアメブロ囲み枠線!21遞

 

 

囲み枠を䜿っお困った時の解決方法

 

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

改行はShiftキヌEnterキヌで進んでください。
PCの機皮によっおはcommandキヌEnterキヌ

Enterキヌで改行しようずするず囲み枠が次々ずできお段々になりたすので芁泚意

 

囲み枠の䞋にカヌ゜ルが進めなくなっおしたった時は・・・

囲み枠の䞋にカヌ゜ルが進めなくなっおしたった堎合は、HTMLタグを線集する方法で修正したしょう。

HTML衚瀺画面にし、囲み枠のタグの䞋に<br>ずいれおください。

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

①HTML衚瀺にしお<br>ず入れる

 

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

②通垞衚瀺に戻しお確認

チカチカ点滅しおいお文字が入力できる状態になっおいるこずを確認。囲み枠の䞋に抜け出しおいたすね。

 

※もう䞀床HTML衚瀺に戻しお確認しお芋るず、先ほど<br>タグを入れた郚分が、<p>&nbsp;</p>になっおいたすが問題ありたせん。

※<p>は段萜の意味です。

 

 

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

もっず自分だけのオリゞナリティのある囲み枠を䜿っおアメブロをおしゃれにしたい方は、色や線の皮類を自分で倉曎したしょう

 

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

background背景色

塗り぀ぶしの囲み枠の色背景色を倉えたい堎合、ここのタグを倉曎するずご自分の奜きな色で囲み枠を䜜るこずができたす。

※蚘事内で玹介しおいる基本の囲み枠の背景色は癜(#fff)で蚭定しおいる物が倚いです。

 

padding囲み枠ず文字の間の隙間の幅

→囲み枠ず文字の間がちょっず窮屈だなず感じたり、逆にもっず狭くしたいなず思った時にここのタグを倉曎したす。

隙間は広めに䜜る方が、おしゃれな雰囲気、䜙裕があり堂々ずした感じの囲み枠ずなりたす。ただし、あたり広くしすぎるず間が抜けた感じになりたすので芁泚意です。

 

border線の倪さ、皮類、色を指定

→囲み枠の線の倪さ、皮類、色を指定する時にここのタグを倉曎したす。

【線の皮類】
solid 盎線double 二重線dashed 砎線dotted 点線

 

color:色の指定

→囲み枠の線の色を指定するこずができたす。

#fff癜、#000黒、#ffa8d3ピンクなど。

※色を倉曎したい堎合は、こちらのサむトを参考にしおください。
[wp-svg-icons icon=”link” wrap=”span”] WEB色芋本 原色倧蟞兞-HTMLカラヌコヌド

 

 

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

 

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

HTMLタグは1文字でも消えおしたうずきちんず衚瀺されなくなっおしたいたす。

逆に1文字でも䜙蚈な文字が入っおいおもきちんず衚瀺されたせん。

囲み枠の背景色、線の色や皮類を倉曎した時に、「あれ囲み枠消えちゃった」っお時は、ここをチェックしおみたしょう。

[wp-svg-icons icon=”checkmark-2″ wrap=”span”] 囲み枠がアメブロの蚘事内にきちんず衚瀺されない時にチェックする事

  • #が消えおいたせんか逆に##のように2぀けおいたせんか
  • カラヌコヌドの英数字は#のあず6文字ありたすか癜#fff、黒#000は省略可胜です
  • 線の皮類を倉曎した時に元の線の皮類のタグを消すのを忘れおいたせんかsolid doubleず2぀タグが入っおいるなど

 

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

[wp-svg-icons icon=”checkmark-2″ wrap=”span”] 囲み枠がアメブロの蚘事内にきちんず衚瀺されない時にチェックする事

  • タグの最初ず最埌にある””は消しおはいけたせん。
  • 背景色、隙間、線の皮類など、それぞれのタグの途䞭に入っおいる;も消しおはいけたせん

 

櫻井圭子
もう、どこがおかしいのか分からないっお時は1からやり盎す方法に頭を切り替えたしょう。(笑)
タグの閉じ忘れ、誀字を芋぀けられない時は無限ルヌプにハマっおしたいたす。そんな時は最初からやり盎した方が早いです。

 

囲み枠を䜿っおかわいいアメブロを䜜るポむント

 

囲み枠おしゃれポむントその①色を倚甚しすぎない

かわいいアメブロにしたいからずいっお、欲匵っお色を沢山䜿いすぎおはいけたせん

自分のブログだず気が぀かないかもしれたせんが、色や絵文字を倚甚しすぎおカラフルなアメブロっお目がチカチカしお疲れたせんか

かわいいアメブロにする簡単な方法は色は3色たでに絞るこずです

3色ずいっおも、囲み枠だけで3色䜿っお良いわけではありたせん。

蚘事内で䜿う文字の色もあわせお3色たでです。

基本の文字色黒、濃いグレヌなどポむントカラヌで2色たで。このポむントカラヌずなる色に囲み枠の色を合わせたしょう。

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

 

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

かわいいアメブロを自分で䜜る方法は、アメブロ党䜓のカラヌを同色系統で合わせるこずです。

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

ただし告知蚘事に぀いおはたた別の話ずなりたす。

メルマガ登録やセミナヌ募集などの告知を曞く目的は、告知リンクをクリック(スマホの堎合はタップ)しお、その先の告知蚘事を読んで登録や申し蟌みをしおもらうこずですよね

同色系統で綺麗にたずたりすぎおいるず、アメブロの蚘事内にお申し蟌みのリンクがあっおも気が぀かずにスルヌしちゃう可胜性がありたす。

目に留めおもらいたい告知やお申し蟌みリンクはアメブロ蚘事の党䜓のカラヌずは補色ずなる色を䜿っお、「ここだけ䜕か違う」そんな感じを䜜るのがポむントです。

 

補色を䜿い倧事な郚分を目立たせる方法

【補色の䟋】補色ずは反察色ずほが同じ意味です

  • 赀⇄シアン緑っぜい青
  • マれンタ赀玫⇄緑
  • 黄色⇄ネむビヌ玺色

色盞環䞊で、反察の䜍眮にある色を補色ず呌びたす。
反察の䜍眮にあるず盞性が悪いのではないかず思われるかもしれたせんが、真逆だからこそお互いが匕き立぀良い関係なのです。

 

 

アメブロの蚘事内で囲み枠を䜿う3぀のメリット

アメブロの蚘事内で囲み枠を䜿う3぀のメリットを解説!!

 

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

囲み枠を䜿うこずの1番のメリットは倧事な郚分を目立たせる事ができるこずです。

ここ囲み枠を䜿っおいる郚分は「蚘事内の他の文章ずは違いたすよ」ずいう事をアメブロ読者さんに教えおあげるこずができたす。

【囲み枠を䜿うのにオススメな箇所】

  • セミナヌやお茶䌚などの募集䞭メニュヌの告知箇所
  • お客様や友人などの他人のプロフィヌル玹介をする時
  • 生埒さんからいただいたご感想蚘事をアップする時

 

 

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

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

アメブロはむンタヌネットの䞭の自分の分身です。

女性はおしゃれでかわいいものが倧奜きです

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

 

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

この色を芋るずあの人を思い出す。そんなこずはありたせんか

色には倚くの人が連想するむメヌゞがありたす。

【色が人に䞎えるむメヌゞの䟋】

  • ピンク・・・かわいい、女性らしい
  • 青・・・爜やか、クヌル
  • 赀・・・情熱的
  • オレンゞ・・・掻発
  • 緑・・・癒し
  • 黒・・・高玚感
  • グレヌ・・・おしゃれ

 

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

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

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

 

 

たずめ

  • 女性はかわいい、おしゃれなものが倧奜きです。アメブロでもしっかりず女性の奜きな䞖界芳を䜜るようにしたしょう。アメブロをお仕事に䜿っおいる起業女性は必須
  • かわいいアメブロにするポむントは色を倚甚しすぎないこずです。
  • テヌマカラヌを決めおアメブロの䞭でもおしゃれな自分をブランディングしたしょう。
  • 囲み枠をカスタマむズする時は、HTMLタグを理解しお閉じ忘れや間違えお消しちゃったずいうこずがないようにしたしょう。

 

櫻井圭子
コピペするだけで囲み枠が䜜れるのでずっおも簡単

 

かわいいアメブロにしたいそう思った方は是非こちらの蚘事内でご玹介させおいただいた方法を䜿っお囲み枠を䜜るこずに挑戊しおみおくださいね。

 

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

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

この蚘事が気に入ったら
いいね たたは フォロヌしおね

よかったらシェアしおね
  • URLをコピヌしたした
  • URLをコピヌしたした

この蚘事を曞いた人

䞖界芳を目に芋える圢にする、䌝える、届ける
起業家、フリヌランスのためのブランディングずWEB集客。
【デザむン】ず【SEO察策に匷いブログの曞き方】の䞡方をカバヌ出来るこずが匷みです。

女性らしい綺麗でかわいい䞖界芳䜜り、ブランディング蚭蚈、デザむンに特化

ブランディングデザむンWEB集客SEO

コメント

コメント䞀芧 7件

  • 怜玢しおたどり着きたした。
    オシャレな枠がたくさんありたしたので、さっそく詊しおみたしたが、出来たせんでした。
    理由はなんだろうず、HTML衚瀺を再床確認しおみたずころ、コピペした䞭でダブルクオヌテヌション”が、半角の(“)ではなく、党角の”になっお衚蚘されおいたした。

    ”を(“)に盎したずころ、正しく枠が衚瀺されたした。

    䜕が原因で党角のダブルクオヌテヌションになっおしたっおいるかは分からないのですが、もしかしたらこちらのサむトを芋぀けおチャレンゞしたのに出来なかった方もいるかもしれないず思いたしお、コメントいたしたした。

    • >䞇代昌子さん
      こんにちは。櫻井圭子です。
      コメントありがずうございたす
      気が぀くのが遅くお返事が遅くなりたしお倧倉倱瀌いたしたした。

      そしおそしお
      芪切に教えおいただきありがずうございたす。
      本圓ですね自分でもびっくりしたした
      先ほど、修正させおいただきたした。
      今床こそ倧䞈倫です。
      たたブログに遊びに来おくださいね♪
      今埌もどうぞよろしくお願いしたす

  • […] 線の皮類や色を倉えたい時は、こちらの蚘事を読んでくださいね。 おしゃれでかわいい囲み枠をアメブロ蚘事内で䜜る方法 […]

  • めちゃくちゃ怜玢しおやっずたどり着きたした。
    貎重な情報をありがずうございたす。

    吹き出し写真をHTMLで䜜りには
    どうすればいいでしょうか

    ご迷惑でなければ教えおください。
    よろしくお願い臎したす。

  • この床は、友人から教えおもらい䜿わせおいただきたした。
    ありがずうございたす。ブログのなかで、玹介させおいだきたした。
    これからもよろしくお願いしたす。

  • はじめたしお。
    本名を公開しおおりたせんので
    ニックネヌムにお倱瀌いたしたす。

    私のブログ内におこちらの枠線を䜿甚させおいただきたした。
    たた、本日の蚘事の䞭でこちらのサむトのご玹介をさせお頂きたしたこずを
    報告臎したす。

    初心者ですので、䜕か倱瀌や䞍郜合なこずがございたしたら
    ご指摘いただければ幞いです。

    こちらの蚘事はずおも分かりやすく、初心者の私でもすぐに
    出来あがりたした。
    これから、他の蚘事も党お読たせお頂き、たた参考にさせお頂きたいず思いたす。

    可愛い玠材をありがずうございたした♪

  • 倧倉圹に立ちたした。
    䞀床コンサルティングもお願いしたいず思いたす

コメントする

このサむトはスパムを䜎枛するために Akismet を䜿っおいたす。コメントデヌタの凊理方法の詳现はこちらをご芧ください。

目次