こんにちは。ブランディングプロデューサーの櫻井圭子です。
誰かのアメブロの記事を見ていてすっごくかわいい記事を見つけたことはありませんか?
ピンクや水色などのパステルカラーで装飾されていたり、点線や破線で囲まれている枠があるおしゃれなアメブロ記事!
あれってきっとプロのデザイナーにお願いしないと作ることができないんだろうなと思いました?いえ、あれは実はHTMLタグを編集方法さえ理解できればwebに詳しくない人でも簡単に作ることができるんですよ。
HTMLタグと聞いて「あ、無理だ。」とアレルギー反応起こしちゃいましたか?確かにあの英数字の羅列は初心者にとっては呪文にしか見えないですよね(笑)
ですので、コピペするだけでとっても簡単!自分でも囲み枠を作ることができる方法をお教えしますね。この方法を知ればあなたのアメブロも今日からかわいいブログに大変身!おしゃれなアメブロに変身すると女性の心をガッチリと掴むことができますよ!
本日はおしゃれでかわいい囲み枠をアメブロ記事内で作る方法というテーマでお届けします。

アメブロ記事内におしゃれでかわいい囲み枠を作る方法

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

アメブロの記事内で囲み枠を使うとメリットが3つあります。

アメブロで囲み枠を使うメリットその①目立たせることができる

囲み枠を使うことの1番のメリットはとにかく目立つことです。ここ(囲み枠を使っている部分)は記事内の他の文章とは違いますよという事をアメブロ読者さんに教えてあげることができるのです。

【使うと効果的な部分】
・セミナーやお茶会などの募集中メニューの告知箇所
・お客様や友人などの他人のプロフィール紹介をする時
・生徒さんからいただいたご感想記事をアップする時

アメブロで囲み枠を使うメリットその②おしゃれでかわいいブログになる

女性はとにかくおしゃれでかわいいものが大好きです。ダサいものは絶対に買いません!!
商品の中身は良いのに、ブログやパンフレットなどのご自分をPRするものの見た目がイマイチおしゃれではないという理由で売れてない人を今までに沢山見てきました。
いいですか?大事なことなのでもう一度言います。
女性はおしゃれでかわいいものが大好きです!!

アメブロで囲み枠を使うメリットその③テーマカラーを使ったブランディングができる

この色を見るとあの人を思い出す。そんなことはありませんか?
色には多くの人が連想するイメージがあります。

【色が人に与えるイメージの例】
ピンク・・・かわいい、女性らしい
青・・・爽やか、クール
赤・・・情熱的
オレンジ・・・活発
緑・・・癒し
黒・・・高級感
グレー・・・おしゃれ

色の力を使ったブランディング方法を身につければ自分がお客様に思って欲しいイメージを自分で作ることもできるんです。
あなたはお客様にどんな人に見られたいですか?知的?おしゃれ?優しい?セレブ?かわいい?
テーマカラー=色を使ったブランディング方法で自分の理想に近づきましょう。

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

①マイページ→ブログ管理→ブログを書く
この時デフォルトは通常表示となります。
タブをクリックしてHTML表示にしてください。

②囲み枠一覧の中から、ご自分が好きなサンプルを選んでください。
HTML表示の記事の文章を入力する部分にコピぺしてください。

③通常表示に戻して、囲み枠の中に入れたい文章を入力してください。

※ポイント1
改行はShiftキー+Enterキーで進んでください。
(PCの機種によってはcommandキー+Enterキー)
Enterキーで改行しようとすると囲み枠が次々とできて段々になりますので要注意!

※ポイント2
囲み枠の下にカーソルが進めなくなってしまった場合は、HTMLタグを編集する方法で修正しましょう。
HTML表示画面にし、囲み枠のタグの下に<br>といれてください。
<br>は改行するという意味になります。

①HTML表示で<br>タグをいれる。

②通常表示に戻して確認。
チカチカ点滅していて文字が入力できる状態になっていることを確認。囲み枠の下に抜け出していますね。

※もう一度HTML表示に戻して確認して見ると、先ほど<br>タグを入れた部分が、<p>&nbsp;</p>になっていますが問題ありません。
<p>は段落の意味です。

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

基本のアメブロ囲み枠

 

【直線のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【二重線のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【破線のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【点線のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【かわいい角丸のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【かわいい角丸の二重線のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【かわいい角丸の破線のアメブロ囲み枠】

ミシンの縫い目(ステッチ)みたいでかわいい!

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【かわいい角丸の点線のアメブロ囲み枠】

角丸+点線でかわいいレベル2倍!

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

 【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 

中(背景色)が塗りつぶされてるアメブロ囲み枠

 

【直線四角形のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 


【角丸のアメブロ囲み枠】

 

【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

【黄色】本文を入力してください。
※改行はShift+Enter

 

 

タイトル(見出し)付きのアメブロ囲み枠

 

【定番のタイトル(見出し)付きのアメブロ囲み枠】

 

■ここにタイトルを入力してください
【オレンジ】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【ピンク】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【薄いピンク】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【ラベンダー】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【大人っぽいブルー】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【ブルー】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【ティファニーブルー】本文を入力してください。
※改行はShift+Enter

 

 

■ここにタイトルを入力してください
【黄色】本文を入力してください。
※改行はShift+Enter

 

 

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

上記の囲み枠一覧でサンプルとしてお配りしているタグをそのままコピペするだけでも囲み枠は使えます。
でも、もっと自分だけのオリジナリティのある囲み枠を使ってアメブロをおしゃれにしたくないですか?
自分だけの「かわいい」「おしゃれ」にこだわる方はHTMLタグを理解して、とことんこだわりましょう!

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

background:背景色
→基本の囲み枠の背景色は白です。塗りつぶしの囲み枠の色(背景色)を変えたい場合、ここのタグを変更するとご自分の好きな色で囲み枠を作ることができます。

padding:囲み枠と文字の間の隙間の幅
→囲み枠と文字の間がちょっと窮屈だなと感じたり、逆にもっと狭くしたいなと思った時にここのタグを変更します。
隙間は広めに作る方が、おしゃれな雰囲気、余裕があり堂々とした感じの囲み枠となります。ただし、あまり広くしすぎると間が抜けた感じになりますので要注意です。

border:線の太さ、種類、色を指定
→囲み枠の線の太さ、種類、色を指定する時にここのタグを変更します。

【線の種類】
solid…直線/double…二重線/dashed…破線/dotted…点線

color:色の指定
→囲み枠の背景色、線の色を指定することができます。
#fff(白)、#000(黒)、#ffa8d3(ピンク)など。
色を変更したい場合は、こちらのサイトを参考にしてください。
WEB色見本 原色大辞典-HTMLカラーコード

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

囲み枠カスタマイズポイント①HTMLタグは1文字たりとも消さない

HTMLタグは1文字でも消えてしまうときちんと表示されなくなってしまいます。逆に1文字でも余計な文字が入っていてもきちんと表示されません。
囲み枠の背景色、線の色や種類を変更した時に、あれ?囲み枠消えちゃったって時は、ここをチェックしてみましょう。

囲み枠がアメブロの記事内にきちんと表示されない時にチェックすること

・#が消えていませんか?逆に##のように2つけていませんか?
・カラーコードの英数字は#のあと6文字ありますか?(白#fff、黒#000は省略可能です)
・線の種類を変更した時に元の線の種類のタグを消すのを忘れていませんか?(solid doubleと2つタグが入っているなど)

囲み枠カスタマイズポイント②閉じタグを忘れない

・タグの最初と最後にある””は消してはいけません。
・背景色、隙間、線の種類など、それぞれのタグの途中に入っている;も消してはいけません。

もう、どこがおかしいのか分からないって時は1からやり直す方法に頭を切り替えましょう。(笑)
タグの閉じ忘れ、誤字を見つけられない時は無限ループにハマってしまいます。そんな時は最初からやり直した方が早いです。

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

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

かわいいアメブロにしたいからといって、欲張って色を沢山使いすぎてはいけません!
自分のブログだと気がつかないかもしれませんが、色や絵文字を多用しすぎてカラフルなアメブロって目がチカチカして疲れませんか?
かわいいアメブロにする簡単な方法は色は3色までに絞ることです!3色といっても、囲み枠だけで3色使って良いわけではありません。
記事内で使う文字の色もあわせて3色までです。
基本の文字色(黒、濃いグレーなど)+ポイントカラーで2色まで。このポイントカラーとなる色に囲み枠の色を合わせましょう。「色は3色まで」この簡単だけど大事な方法を守るとおしゃれになりますよ。

囲み枠おしゃれポイントその②記事内で告知をする時は目立たせること!

かわいいアメブロを自分で作る方法は、アメブロ全体のカラーを同色系統で合わせることです。
同色系統でまとめると初心者さんでも簡単におしゃれに作ることができます。
ただし!!告知記事についてはまた別の話となります。
メルマガ登録や、セミナー募集などの告知記事の最大の目的は登録してもらうことですよね?
同色系統で綺麗にまとまりすぎていると、アメブロの記事内にお申し込みのリンクがあっても気がつかずにスルーしちゃう可能性があります。
目に留めてもらいたい告知やお申し込みリンクはアメブロ記事の全体のカラーとは補色となる色を使って、「ここだけ何か違う」そんな感じを作るのがポイントです。

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

【補色の例】(補色とは反対色とほぼ同じ意味です)
・赤⇄シアン(緑っぽい青)
・マゼンタ(赤紫)⇄緑
・黄色⇄ネイビー(紺色)

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

まとめ

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

すごく上手に装飾されているアメブロを見ると思わず「おしゃれー!」「かわいいー!」と呟いてしまいますよね!
私もかわいいアメブロにしたい!そう思った方は是非こちらの記事内でご紹介させていただいた方法を使って囲み枠を作ることに挑戦してみてくださいね。コピペするだけで作ることができる簡単な方法なので大丈夫です!
というわけで、本日はおしゃれでかわいい囲み枠をアメブロ記事内で作る方法というテーマでお届けさせていただきました。

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