ブログをより見やすくしてくれる
枠線・囲み枠をご紹介します
// Part1は青系をPick up！//
枠線の入れ方はコチラで解説してます！
▶︎「アメブロ枠線の入れ方」
よかったら、使ってください♡
1. タイトル帯＋テキストボックス
Title
ここに文章が入ります。
ここに文章が入ります。
ここに文章が入ります。
コードはコチラ▼
<div style="margin: 2em auto;background: #dcefff;">
<div class="box-title" style="font-size: 1.2em; background: rgb(95, 179, 245); padding: 4px; color: rgb(255, 255, 255); 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 style="padding: 0.5em 1em;margin: 2em auto;font-weight: bold;border: solid 3px #4169e1;">
<p style="margin: 0; padding: 0;">ここに文章が入ります。ただ実線で囲むだけでも可愛いし、わかりやすいですよね！シンプル好きの方にオススメです。</p></div>
3. 見出しにも使える！
上下で区切られてスッキリします。
見出しにも使えますね！
コードはコチラ▼
<p style="color: rgb(54, 78, 150); padding: 0.5em 0px; border-top: 3px solid rgb(54, 78, 150); border-bottom: 3px solid rgb(54, 78, 150); text-align: center;">上下で区切られてスッキリします。<br>
見出しにも使えますね！</p>
4. ボタンにも使える！
文章を入れてもいいし、BUTTONとしても可愛い！
コードはコチラ▼
<p style="text-align: center;"><a href="#" style=" display: inline-block;padding: 7px 20px;border-radius: 25px;text-decoration: none;color: #FFF;background-image: linear-gradient(to right, #56CCF2 0%, #2F80ED 51%, #56CCF2 100%);transition: .4s;">文章を入れてもいいし、BUTTONとしても可愛い！</a></p>
ボタンにしてリンクをつけたい方は、
<a href="#" style~~~~~>という文字列の#を削除して、
リンク先のURLを入れればOK!
Instagram
上のように私のインスタグラムに飛ばすボタンにするには
このように書きます。
↓
<p style="text-align: center;"><a href="https://www.instagram.com/design_purple1983/" style=" display: inline-block;padding: 7px 20px;border-radius: 25px;text-decoration: none;color: #FFF;background-image: linear-gradient(to right, #56CCF2 0%, #2F80ED 51%, #56CCF2 100%);transition: .4s;">Instagram</a></p>
5. 背景にグラデーションをつける！
好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！好きな背景の上に、文章を入れることができます！
コードはコチラ▼
<div style="background: linear-gradient(25deg, rgba(36, 198, 220, 0.5), rgba(81, 74, 74, 0.8)),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>
注意：コチラの背景の画像は、自分のブログにアップロードした画像のurlを入れています。
コレは、あなたが使いたい画像のurlを入れてくださいね！
↓
url(https://stat.ameba.jp/user_images/20190616/11/testnoguchi/b0/59/p/o0488031114466867509.png);
6. 点線の囲み枠
コードはコチラ▼
<ul style="color: #668ad8;/*文字色*/
border: dashed 2px #668ad8;/*破線 太さ 色*/
background: #f1f8ff; /*背景色*/
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 style="padding: 0.5em 1em;margin: 2em 0;background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);">
<p style="margin:0;padding:0;color:#668ad8;">ここに文章</p></div>
8. タイトル入り
Title
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
コードはコチラ▼
<div style="position: relative;margin: 2em 0;padding: 0.5em 1em;border: solid 3px #95ccff;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: #95ccff;font-weight: bold;">Title</span>
<p style="margin: 0;
padding: 1rem 0;">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p></div>
9. 見出し＋影
コードはコチラ▼
<div style="padding: 0.5em 1em;margin: 1em 0;background: #f4f4f4;border-left: solid 6px #00bfff;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: #6091d3;/*文字色*/background: #FFF;border: solid 3px #6091d3;/*線*/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 #668ad8;
border-left: solid 3px #668ad8;
color: #668ad8;
transition: .4s;">▶︎ こちらまで </a></p>
以上、アメブロの枠線Part1(青系)11選でした。
今後も随時追加していく予定です
皆さんもこんな枠線が欲しい！
というものがあったら、
コメントいただけたら嬉しいです💖
制作の励みになります👍☺️✨
次は、Part2（赤・ピンク系）製作中です！
お楽しみに〜♪
デザインはこちら
){kind=link}