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

アメブロ

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

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

– シンプル枠 –

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


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

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

 

ピックアップ記事

関連記事一覧

About Me

 

ERI

熊本市出身 東京都世田谷区在住
2019年11月より熊本へ転居
熊本県立第一高等学校 卒
青山学院大学 経営学部 卒

 

会社員時代

アパレルとウェディング業界で従事。専業主婦からフリーのデザイナーとなり、コンサル業もスタート

 

実績

 

新卒入社して半年後に会社最高額をご契約

2年目で銀座のフラッグ店副店長へ

アパレルでは未経験の業種でしたが

1年目で月売全国トップ

2年目で店長

3年目でエリアマネージャーとなる。

 

これらの経験時に自身が考え結果を出したことなどを元にコンサルの軸を作り上げた。フリーランスの起業であっても大切な「お客様による、わたしブランディング」をテーマに各業種の女性起業家様へコンサルティングサービスを提供中。

 

講演・セミナー依頼は下記ページよりお願いします。
Contact