ブログをより見やすく、
わかりやすくしてくれる枠線をご紹介します。
Part3は、
// グリーン系をPick up!//
カラー別にまとめてますので、こちらも参考にしてください♪
▶︎【アメブロ】使える!おしゃれな枠線(ブルー・サックス系)
枠線の入れ方はコチラで解説してます!
よかったら、使ってください♡
1. タイトル帯+テキストボックス
ここに文章が入ります。
ここに文章が入ります。
ここに文章が入ります。
コードはコチラ▼
<div style="margin: 2em auto;background: #cff7d0;">
<div class="box-title" style="font-size: 1.2em; background:#92dd94; 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 #0ecc4a">
<p style="margin: 0px; padding: 0px; color:#0ecc4a; text-align: center;">ただ実線で囲むだけでも可愛い!</p>
<p style="margin: 0px; padding: 0px; color:#0ecc4a; text-align: center;">シンプル好きの方にオススメです♡</p></div>
3. 見出しにも使える!渋めグリーン!
上下で区切られてスッキリします。
見出しにも使えますね!
コードはコチラ▼
<p style="color:#627449; padding: 0.5em 0px; border-top: 3px solid #627449; border-bottom: 3px solid #627449; 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, #9BF74A, #00D1A7);transition: .4s;">文章を入れてもいいし、BUTTONとしても可愛い!</a></p>
5. 背景にグラデーションをつける!
コードはコチラ▼
<div style="background: linear-gradient(25deg, rgba(79, 202, 64, 0.4), rgba(161, 255, 68, 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>
6. 点線の囲み枠
- サービス1
- サービス2
- サービス3
コードはコチラ▼
<ul style="color: #145107;/*文字色*/
border: dashed 2px #145107;/*破線 太さ 色*/
background: #f7fffa; /*背景色*/
padding: 0.5em 0.5em 0.5em 2em;">
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス1</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス2</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス3</li>
</ul>
7. ストライプ
ここに文章
コードはコチラ▼
<div style="padding: 0.5em 1em;
margin: 2em 0;
background: -webkit-repeating-linear-gradient(-45deg, #BAF1AF, #BAF1AF 3px,#fffcfe 3px, #fffcfe 7px);
background: repeating-linear-gradient(-45deg, #BAF1AF, #BAF1AF 3px,#fffcfe 3px, #fffcfe 7px);">
<p style="margin:0;padding:0;color:#579B49;">ここに文章</p></div>
8. タイトル入り
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
コードはコチラ▼
<div style="position: relative;margin: 2em 0;
padding: 0.5em 1em;border: solid 3px #84edb7;
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: #84edb7;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 #7ef213;box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);">
<p style="margin: 0; padding: 0;">ここに文章入ります!</p></div>
10. 角丸
ここに文章が入ります!
ここに文章が入ります!
ここに文章が入ります!
コードはコチラ▼
<div style="padding: 0.5em 1em;margin: 2em 0;font-weight: bold;color: #bee316;/*文字色*/background: #FFF;border: solid 3px #bee316;/*線*/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 #009107;
border-left: solid 3px #009107;
color: #009107;
transition: .4s;">▶︎ こちらまで </a></p>
以上、アメブロの枠線Part3(グリーン系)11選でした。
また今後も随時追加していく予定です😃📝
皆さんもこんな枠線が欲しい!
というものがあったら、
コメントいただけたら嬉しいです💖
制作の励みになります👍☺️✨
次は、Part4(イエロー・オレンジ系)製作中です!
お楽しみに〜♪