アメブロの可愛い囲み枠の作り方

アメブロ

ブログの記事の中に、告知文などを入れたい場合には
囲み枠を使って記事と分けたり
より見やすくすることをお勧めしてます。

今後、こちらでどんどん発信していきたいと思いますので
とりあえず、今回はベーシックなタイプをご紹介させていただきますね。

– シンプル枠 –

ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。

ソースはこちら(コピー&ペーストでhtml表示に貼り付けてください。)
<div style=”background:#fff; padding:10px; border:2px solid #fdcdc9;”>ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。</div>

– 二重枠 –

ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。

ソースはこちら(コピー&ペーストでhtml表示に貼り付けてください。)
<div style=”margin: 2px; border: double 5px #fdcdc9; background-color: #ffffff; padding: 10px;  color: #000000;”>ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。</div>

– 点線枠 –

ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。

ソースはこちら(コピー&ペーストでhtml表示に貼り付けてください。
<div style=”margin: 2px; border: dotted 2px #fdcdc9; background-color: #ffffff; padding: 10px;”>ここに本文を入力する。enterで改行すると枠も2つになっちゃうのでshiftキー押しながらenterキーを押してください。</div>


色を変えたい場合は#に続くところがカラーコードになるので
そこをお好みの色のコードに変えていきましょう。

カラーコードもこれから記事にしていきたいと思いますので、
よろしくお願いします。

 

ピックアップ記事

関連記事一覧