アメブロの記事で囲み枠をつくる方法

こんばんわ。
ＭＯＭＯです

今回は記事の中で使えるアメブロ囲み枠のつくり方をご紹介します。

囲み枠はメニューやセミナー告知を書きたいときなどに使えるので、とってもオススメです

コピペのかんたんバージョンと、コードを貼りつけるバージョンの２種類ご紹介させていただきますね


まず、一番かんたんな方法
新エディタの画面で、以下の枠をそのままコピーして、貼ってみてね。

赤

ここに文章を入れてね♪

ピンク

ここに文章を入れてね♪

オレンジ

ここに文章を入れてね♪

ブルー

ここに文章を入れてね♪

ピンク（丸枠）

ここに文章を入れてね♪

ピンク（丸枠点線）

ここに文章を入れてね♪

その他の方法
ＨＴＭＬ表示の方に、以下のコードをコピーして貼ってみてね。

点線の囲み枠

ここに文章を入れてね♪

＊コード＊
<div style="background:#f7f7f7; padding:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div><br>


見出しつきの囲み枠

◆ここにタイトル

ここは文章･･･

＊コード＊
<fieldset><legend><strong><font color="#ff0000">◆ここにタイトル</font></strong></legend>ここは文章･･･<br></fieldset><br>

二重線の囲み枠

本文１

＊コード＊
<div style="border: #ff0099 3px double; padding: 6px; background-color: #ffffff; margin: 5px; color: #000000; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p>
<span style="line-height: 1.5;">本文１</span></p></div><br>

いかがでしたか？

カラーコード（「#ff0099」とか）をご自分の好きな色に変えれば、
オリジナルの囲みわくを作れちゃいますよ～

お役に立てたら「いいね！」かコメントして頂けたら嬉しいです

アメブロカスタマイズのお手伝いも受付中
詳細はこちら


あるときはアメブロカスタマイズ専門家（笑）の
ＭＯＭＯでした