アメブロ記事内でシンプルお洒落な飾り枠を作成する方法

今回は私も記事内で随所使っている
「飾り枠」を作成する方法をご案内します。

これですね。強調したいコトや、記事にメリハリを出したり。

では早速説明をします！ 「記事投稿画面」にて、「通常表示」ではなく「HTML表示」にします。
以下のタグを貼り付けます。

【点線の飾り枠】

<div style="padding:20px; border:dashed 1px #c0c0c0; border-radius: 10px;">
この中にテキストを記載します。
</div>

各、設定の説明です♪
padding:枠の中の余白です数値は適宜変更を。ここが10pxと小さいと古い印象がでます。
border:　枠線の装飾。　「dashedは点線、solidにすると1本線になります」
border:　1pxは線の太さ。　
border:　#色指定。#色タグを指定。こちらのサイトでチェック出来ます≫
border-radius:カーブの数値、適宜変更を。
※paddingやbrderやblorder-radiusの設定の後には；で区切りを入れます。

【背景色アリの飾り枠】

<div style="padding:30px; background:#ffffff;; border-radius: 20px;">
この中にテキストを記載します。
</div>

設定の説明です♪
background:背景色です。#6ケタの英数字でカラーコードを指定します。
※それぞれの設定を組み合わせて使用するコトができますよ～。

【影のある飾り枠】

<div style="padding:30px;background:#ffffff; border-radius: 10px; box-shadow: 0 10px 6px -6px #dcdcdc">
この中にテキストを記載します。
</div>

設定の説明です♪
box-shadow:影の設定になります。ちょっと複雑になるので、割愛します。
（あくまでも、HTMLがあまり分からなくても出来る、カスタマイズというのが前提にあります）

第4回「アメブロ記事内でシンプルお洒落な飾り枠を作成する方法」でした

*　- - - - - - - - - - - - - - - - - - - - - - - - - - - - - *　

話は変わりますが、6月上旬より、
Wixで作る！　女性起業家さん向け1DAY　ホームページ制作講座　サービスを開始します
若干名のモニターさま募集しますヾ(*’-‘*)