このコーナーではスマホ(iPhone)用アメブロアプリの使い方について説明しています。
（Androidの方もほぼ使い方は一緒だと思うのぜひ参考にしてみてくださいね^^）
今回は、ブログでもよく見かける囲み枠のサンプルを紹介してみたいと思います。
囲み枠はこんなもの↓
これがあると、お店の案内や紹介など強調したいところを引き立たせることが出来るので、実際に利用してみるとスゴク便利ですよ。
種類と色に分けて紹介していきますので、気に入った種類がみつかったら、次は色を探してみくださいね。
まずはサンプルの使い方について説明していきます。
「使い方は分かるよ！」という方は、この下にあるテキストリンクから直接サンプルに飛んでお選びください^^
囲み枠の種類に飛ぶ >>
使い方
1.【「使い方」の次項目「囲み枠タイプ」の中から好きなタイプを選んで「色を選択する」を押す】
2.【好きな色を選んで、囲み枠の中に書いてあるコードをすべてコピーする】
3.【アメブロアプリの記事投稿画面を開いて、HTML編集からコードの貼り付けをおこなう】
分からない方は、「HTML編集の（コードを貼り付ける）やり方！」をチェックしてくださいね^^
4.【囲み枠が表示されていたら「ここにテキストを入れる」のところを消して、自分が書きたいものを書く】 ※ちなみに、ここではボックスがはみ出ていますが、閲覧用のブログ記事では正常に表示されていあるので心配しないでくださいね^^
囲み枠のタイプ
実線のみ
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border: solid 1px #74e574;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
実線で角が丸形
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border-radius: 6px; border: solid 1px #74e574;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
太い実線のみ
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border: solid 2px #f1c857;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
太い実線で角が丸形
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border-radius: 6px; border: solid 2px #f1c857;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色のある実線
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border: solid 2px #ea744b; background-color: #fff9f7;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色のある角が丸形の実線
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border-radius: 6px; border: solid 2px #ea744b; background-color: #fff9f7;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色のある点線
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #f8f9ff; border: dashed 2px #8299ea;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色のある角が丸形の点線
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #f8f9ff; border-radius: 6px; border: dashed 2px #8299ea;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色と影
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border: solid 2px #ea744b; background-color: #fff9f7; filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.2));”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
角が丸型で背景色と影
<div style=”width: 94%; margin: 10px 0px; padding: 10px; border-radius: 6px; border: solid 2px #ea744b; background-color: #fff9f7; filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.2));”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
上下に実線
<div style=”width: 98%; margin: 10px auto; padding: 10px; border-bottom: solid 4px #89a1ea; border-top: solid 4px #89a1ea;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
背景色と上下に実線
<div style=”width: 98%; margin: 10px auto; padding: 10px; background-color: #f7f9ff; border-bottom: solid 4px #89a1ea; border-top: solid 4px #89a1ea;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
上の実線と影
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #ffffff; border-top: solid 4px #8ee285; filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.2));”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
付箋風
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #fefff0; border-left: solid 10px #fde573;”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
付箋風と影
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #fefff0; border-left: solid 10px #fde573; filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.2));”><div style=”margin:0px;”>ここにテキストを入れる</div></div>
色を選択する >>
縫い物風
<div style=”width: 94%; margin: 10px 0px; padding: 10px; background-color: #f8f9ff; border-radius: 6px;”><p style=”border-radius: 6px; border: dashed 2px #a2afde; padding: 12px; margin-block-start: 0px; margin-block-end: 0px;”>ここにテキストを入れる</p></div>
色を選択する >>
縫い物風と影
<div style=”width: 98%; margin: 10px auto; padding: 10px; background-color: #f8f9ff; border-radius: 6px;filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.2));”><p style=”border-radius: 6px; border: dashed 2px #a2afde; padding: 12px; margin-block-start: 0px; margin-block-end: 0px;”>ここにテキストを入れる</p></div>
色を選択する >>
アメブロ初心者向け！スマホ アメブロアプリの便利使い方が写真で分かる一覧 >>
ブログ集客に悩んでいる人は要チェック！
ブログを集客に活用することは今では当たり前になってきましたよね。でもまだまだ間違った使い方（逆効果になる使い方）をしている方も多く「それ止めとけばいいのにな～惜しいな～」と思うことがよくあります。
なので、少しでもブログを集客に役立ててもらえるようにこんな記事を書いてみました。
知らないと大変！！ブログ集客するなら絶対に抑えておくべきポイント！
よかったらチェックしてみくださいね。
