アメブロ記事を飾るかわいい囲み枠～シンプル＆角丸～

◆アメブロ記事を飾るかわいい囲み枠～シンプル＆角丸～

こんにちは。

節約起業の専門家前田伊織です。

アメブロカスタマイズでよく聞かれること。

それは囲み枠について。

目立たせたい部分や、毎回表示させたいことなど、囲み枠で、もっと想いを伝えたいですよね。

お客さまの声や、お店の場所、ホームページへの誘導として・・・
この囲み枠の中に文字や文章を入れて使います。

例えば、こんな感じです↓

節約起業メルマガを毎朝無料でお届けしています♪

お申込みはこちら

いろんな種類のかわいい囲み枠をご紹介していきます♪

今回はシンプルな囲み枠と、角がまぁるい囲み枠。
線の太さを５種類、レインボーカラーで作ってみました。

ビギナーさんにも、変更や更新をしやすいデザインです＾＾

※ブラウザ（インターネットを閲覧するシステム…インターネットエクスプローラーやグーグルクローム、ファイヤーフォックスなど）によって、角丸に見えない場合もあります。

シンプルな線で囲まれた枠たち

シンプルな囲み枠１

シンプルな囲み枠２

シンプルな囲み枠３

シンプルな囲み枠４

シンプルな囲み枠５

「シンプルな囲み枠１」ならば・・・

<div style="padding:10px; border:1px solid #9900ff;">シンプルな囲み枠１<br>
</div>

↑これを記事のHTML表示に貼り付けるとできます。

角丸線で囲まれた枠たち

角がまぁるい囲み枠１

角がまぁるい囲み枠２

角がまぁるい囲み枠３

角がまぁるい囲み枠４

角がまぁるい囲み枠５

「角がまぁるい囲み枠１」ならば・・・

<div style="padding:10px; border:1px solid #9900ff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">角がまぁるい囲み枠１<br>
</div>

↑これを記事のHTML表示に貼り付けるとできます。

いかがでしょうか…

ちょっと難しいかもしれないけど、チャレンジする価値はあり！

がんばってみてくださいね～♪

もうちょっと冒険して・・・