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

当ページのコンテンツには広告を含む場合があります。
N子

アメブロを使っている皆さんは、記事本文の最後にメニューやお問合せ先、サロンへのアクセス情報等のリンク先を張り付けたり等、よくされてますよね。

T美

はい!書いてます、いろいろ…でも本文下に書くしかないんですよね。サイドバーに書いてもスマホには表示されないし、メッセージボードに沢山書きすぎるのもアレなんで…

N子

そうなりますよね。アメブロには、ワードプレスの様にウィジェット機能がありませんし、スマホの表示画面が全然違うからしょうがないですね。
お知らせをいろいろ書くのは悪くないですが、出来るだけ読者さんが見やすい様にすっきりさせたいものです。

ウィジェットとは?

固定の場所に特定の機能(記事一覧、プロフィール、ブログカテゴリー、リンク集、カレンダー、アーカイブ、広告、画像、SNSリンク等)を表示するパーツ

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

この記事の見どころ

各種囲み枠とその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>

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

手順1

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

手順2

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

手順3

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

最後に

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

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

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

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

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

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

N子

上記の囲み枠を使って、ブログを分かりやすく見やすく、尚且つすっきりお洒落に見せることが可能ですのでぜひ使ってみて下さいね。

こちらに記載したコードや使用方法に関するご質問にはお答え致し兼ねます。
使用は自己責任でお願いします。

この記事が気に入ったら
いいね または フォローしてね!

Please Share
この記事の見どころ