アメブロで使える女性起業家向けお洒落囲み枠

というわけで、今回はアメブロの本文下の案内表示等に使えるおしゃれな囲み枠とその使い方について解説します。

各種囲み枠とそのHTML

外枠細線

ペールトーンピンク

以下のコードをコピペで使用して下さい。

<div class="articleText">
<div style="background: #fadce9 none repeat scroll 0% 0%; padding: 40px; border: 4px double #ffffff; border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div>
</div>
</div>

ペールトーンブルー

以下のコードをコピペで使用して下さい。

<div class="articleText">
<div style="background: #d3def1 none repeat scroll 0% 0%; padding: 40px; border: 4px double #ffffff; border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div>
</div>
</div>

ペールトーンイエロー

以下のコードをコピペで使用して下さい。

<div class="articleText">
<div style="background: #feecd2 none repeat scroll 0% 0%; padding: 40px; border: 4px double #ffffff; border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div>
</div>
</div>

ペールトーンパープル

以下のコードをコピペで使用して下さい。

<div class="articleText">
<div style="background: #e7d5e8 none repeat scroll 0% 0%; padding: 40px; border: 4px double #ffffff; border-radius: 10px;">
<div style="text-align: left;"><span style="font-size: 1em;">本文</span></div>
</div>
</div>

点線角丸枠

ピンク

以下のコードをコピペで使用して下さい。

<div style="padding: 10px; border-radius: 20px; border: 3px dotted #FFC0CB;">本文<br>・〇〇○○〇<br>・〇〇〇〇〇</div>

ブルー

以下のコードをコピペで使用して下さい。

<div style="padding: 10px; border-radius: 20px; border: 3px dotted #87ceeb;">本文<br>・〇〇○○〇<br>・〇〇〇〇〇</div>

パープル

以下のコードをコピペで使用して下さい。

<div style="padding: 10px; border-radius: 20px; border: 3px dotted #ba55d3;">本文<br>・〇〇○○〇<br>・〇〇〇〇〇</div>

イエロー

以下のコードをコピペで使用して下さい。

<div style="padding: 10px; border-radius: 20px; border: 3px dotted #ffd700;">本文<br>・〇〇○○〇<br>・〇〇〇〇〇</div>

影付き四角枠

ピンク

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #ffe4e1; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #ffe4e1 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

ブルー

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #add8e6; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #add8e6 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

グリーン

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #2e8b57; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #2e8b57 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

イエロー

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #f0e68c; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #f0e68c 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

オレンジ

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #ffa500; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #ffa500 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

パープル

以下のコードをコピペで使用して下さい。

<div style="border: 2px solid #ed8eed; padding: 6px; background-color: #ffffff; margin: 5px; box-shadow: #ed8eed 5px 5px 5px;">本文<br>・〇〇〇<br>・〇〇〇</div>

アメブロ内での囲み枠使用方法

手順１

ブログ記事投稿画面を開け、下の方へスクロールさせると「通常表示」と「HTML表示」の２つのタブがあるので、「HTML表示」をクリックします。

手順２

「HTML表示」の白い枠内に使用したい枠のコードをコピペします。

手順３

もう一度「通常表示」をクリックして元の画面に戻ると、下の画像の様に枠線が中の文字入りで表示されますので、枠内の文字を好きな文言に変更して下さい。

最後に

記事の上や下に設置する以外にも、お客様の声や募集記事、その他メッセージボード等々いろいろなパターンで使えます。

記事の最後をスッキリさせるのは見た目の問題だけではなくて、読者を迷わせないためだったりもします。

結局そんなに沢山のことを書いても見られてません。

一番良いのは、常に１つのアクションを促すことです。

そう！リンクは１つに絞るのが良いのです。

結局何をして欲しいか？！何に向かって記事を書いているのかを明確にして、常に１つのリンクに誘導するのがおススメです。