ALL

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

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

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

- シンプル枠 -

ここに本文を入力する。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>


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

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

 

[clink url="https://preshine.jp/ameblo_frame_2/"]
  • この記事を書いた人

preshine

Preshine 有田絵梨 フリーランス女子のためのWEBコンサルタント ブランディングとWEBを軸に女性起業家さんたちのサポートを行っています。本サイト管理者。本サイトのライティングを行なっているブランディングコンサルタントを育成しています。

-ALL

Copyright© フリーランスの女性のためのメディアサイト , 2020 All Rights Reserved Powered by AFFINGER5.