MENU

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

2020 5/18
アメブロで使える女性起業家向けお洒落囲み枠
N子のアイコン画像N子
アメブロを使っている皆さんは、記事本文の最後にメニューやお問合せ先、サロンへのアクセス情報等のリンク先を張り付けたり等、よくされてますよね。
T美のアイコン画像T美
はい!書いてます、いろいろ…でも本文下に書くしかないんですよね。サイドバーに書いてもスマホには表示されないし、メッセージボードに沢山書きすぎるのもアレなんで…
N子のアイコン画像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表示」がありますので、
HTML表示」をクリックします。

その2

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

その3

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

最後に

記事の上や下に設置する以外にも、お客様の声や募集記事、その他メッセージボード等々

いろいろなパターンで使えますよ。

これらの囲み枠を使って、ブログを分かりやすく、見やすく、すっきりお洒落な表示にしてみて下さい。





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

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

この記事を書いた人

パソコンが苦手なアラフォー起業女性の為のブログxSNSを使った集客方法や、WEBサイトのカスタマイズ、オンライン会議、その他お役立ち情報を書いています。

もくじ
閉じる