ブログをより見やすく、
わかりやすくしてくれる枠線をご紹介します。
Part2は、
// 赤・ピンク系をPick up！//
ブルー・サックス系の囲み枠をお探しの方はこちらへ
▶︎【アメブロ】使える！おしゃれな枠線デザイン10選！Part 1（ブルー・サックス系）
枠線の入れ方はコチラで解説してます！
よかったら、使ってください♡
1. タイトル帯＋テキストボックス
ここに文章が入ります。
ここに文章が入ります。
ここに文章が入ります。
コードはコチラ▼
<div class="box29" style="margin: 2em auto;background: #f7dcdc;">
<div class="box-title" style="font-size: 1.2em; background:#efaaad; padding: 4px; color: #fff; font-weight: bold; letter-spacing: 0.05em; text-align: center;">Title</div>
<p style="padding: 15px 20px; margin: 0px; text-align: center;">ここに文章が入ります。<br>
ここに文章が入ります。<br>
ここに文章が入ります。</p></div>
2. 実線で囲むだけ
ただ実線で囲むだけでも可愛い！
シンプル好きの方にオススメです♡
コードはコチラ▼
<div class="box1" style="padding: 0.5em 1em;margin: 3em auto;font-weight: bold;border: 3px solid #fc8383;">
<p style="margin: 0px; padding: 0px; color:#fc8383; text-align: center;">ただ実線で囲むだけでも可愛い！</p>
<p style="margin: 0px; padding: 0px; color:#fc8383; text-align: center;">シンプル好きの方にオススメです♡</p></div>
3. 見出しにも使える！
上下で区切られてスッキリします。
見出しにも使えますね！
コードはコチラ▼
<p style="color:#c14979; padding: 0.5em 0px; border-top: 3px solid #c14979; border-bottom: 3px solid #c14979; text-align: center;">上下で区切られてスッキリします。<br>
見出しにも使えますね！</p>
4. ボタンにも使える！
コードはコチラ▼
<p style="text-align: center;"><a class="btn-gradient-radius" href="#" style=" display: inline-block;padding: 7px 20px;border-radius: 25px;text-decoration: none;color: #FFF;background-image: linear-gradient(-90deg, #DA3ECB, #D14600);transition: .4s;">文章を入れてもいいし、BUTTONとしても可愛い！</a></p>
5. 背景にグラデーションをつける！
コードはコチラ▼
<div id="sample" style="background: linear-gradient(25deg, rgba(255, 190, 44, 0.4), rgba(255, 44, 171, 0.7)),url(https://stat.ameba.jp/user_images/20190616/11/testnoguchi/b0/59/p/o0488031114466867509.png);
background-size:cover;
/*以下グラデーションとは関係のない部分*/
height: 200px;
text-align: center;padding:2rem;
color: #FFF;">好きな背景の上に、文章を入れることができます！</div>
){kind=link}
6. 点線の囲み枠
- サービス１
- サービス２
- サービス３
コードはコチラ▼
<ul style="color: #E60F48;/*文字色*/
border: dashed 2px #E60F48;/*破線 太さ 色*/
background: #FFFCFC; /*背景色*/
padding: 0.5em 0.5em 0.5em 2em;">
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス１</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス２</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス３</li>
</ul>
7. ストライプ
ここに文章
コードはコチラ▼
<div class="box16" style="padding: 0.5em 1em;
margin: 2em 0;
background: -webkit-repeating-linear-gradient(-45deg, #ffe0f5, #ffe0f5 3px,#fffcfe 3px, #fffcfe 7px);
background: repeating-linear-gradient(-45deg, #ffe0f5, #ffe0f5 3px,#fffcfe 3px, #fffcfe 7px);">
<p style="margin:0;padding:0;color:#ea70ca;">ここに文章</p></div>
8. タイトル入り
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
コードはコチラ▼
<div style=" position: relative;margin: 2em 0;padding: 0.5em 1em;
border: solid 3px #ff9ebb;border-radius: 8px;"><span class="box-title" style="position: absolute;
display: inline-block;top: -13px;left: 10px;
padding: 0 9px;line-height: 1;font-size: 19px;background: #FFF;color: #ff9ebb;font-weight: bold;">Title</span>
<p style="margin: 0; padding: 1rem 0;">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p></div>
9. 見出し＋影
ここに文章入ります！
コードはコチラ▼
<div class="box22" style="padding: 0.5em 1em;margin: 1em 0;background: #f4f4f4;border-left: solid 6px #ff7cd5;box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);">
<p style="margin: 0; padding: 0;">ここに文章入ります！</p></div>
10. 角丸
ここに文章が入ります！
ここに文章が入ります！
ここに文章が入ります！
コードはコチラ▼
<div class="box2" style="padding: 0.5em 1em;margin: 2em 0;font-weight: bold;color: #ffc9ed;/*文字色*/background: #FFF;border: solid 3px #ffc9ed;/*線*/border-radius: 10px;/*角の丸み*/">
<p style="margin: 0px; padding: 0px; text-align: center;">ここに文章が入ります！<br>
ここに文章が入ります！<br>
ここに文章が入ります！</p></div>
11.角っこ
コードはコチラ▼
<p style="text-align: center;"><a href="#" style="position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
border-bottom: solid 3px #f74c0e;
border-left: solid 3px #f74c0e;
color: #f74c0e;
transition: .4s;">▶︎ こちらまで </a></p>
以上、アメブロの枠線Part2(赤・ピンク系)11選でした。
こう見ると、
ふわっとしたピンクや、パキッと鮮やかなピンク。
赤でも、子供っぽい赤だったり、艶っぽい赤。
色々なイメージがありますね！
一言で「赤・ピンク」と言っても、奥が深いです。
また今後随時追加していく予定です😃📝
皆さんもこんな枠線が欲しい！
というものがあったら、
コメントいただけたら嬉しいです💖
制作の励みになります👍☺️✨
次は、Part3（グリーン系）製作中です！
お楽しみに〜♪