思わず二度見され、一瞬で心を奪う
アメブロ＆インスタ世界観のつくり方
自宅教室・サロンオーナー・ハンドメイド販売
はじめての女性の起業を
おしゃれに可愛くプロデュース♡
お稽古サロン「JouJouette」主宰
世界観をカタチにするwebデザインプロデューサー
豊田 純子
はじめましての方はこちら
ブログを書くときに気をつけたいのが
見やすさ。
だっていくら素晴らしい文章を書いていても
文字が多くて、行間も詰まっていて
読みにくかったら頭に入って来ないし、
むしろ読むのを途中で諦めちゃうよね。。
記事の見出しや強調したい場合に便利な
見出しデザインを女性が使いやすい
おしゃれなシリーズにしました
アメブロの基本カラー11色と
大人かわいいカラー10色を集めました
アメブロ基本カラーであれば
文字の色と合わせて統一感を持たせやすくなります
コピーして使えるので
ぜひ使ってみてくださいね。
アメブロで使える見出し枠まとめ
記事に追加する方法はこちらを見てね。
見出し一覧
1. シンプルな直線の見出し
ここに見出し
<p style="border-bottom: 2px solid black;">ここに見出し</p>
<p> </p>
2. 点線の見出し
ここに見出し
<p style="border-bottom: 4px dotted #FFBFDE; padding:5px; ">ここに見出し</p>
<p> </p>
3. 破線の見出し
ここに見出し
<p style="border-bottom: 3px dashed #4169e1; padding:5px;">ここに見出し</p>
<p> </p>
4. 二重線の見出し
ここに見出し
<p style=" border-bottom: 4px double #FF007D; padding: 5px;">ここに見出し</p>
<p> </p>
5. 上下ラインの見出し
ここに見出し
<p style="border-top: solid 2px #FF7F7F; border-bottom: solid 2px #FF7F7F; padding: 10px 5px;">ここに見出し</p>
<p> </p>
6. 二重線の上下ラインの見出し
ここに見出し
<p style="border-top: double 4px #7F7FFF; border-bottom: double 4px #7F7FFF; padding: 10px 5px;">ここに見出し</p>
<p> </p>
7. ドット線の上下ラインの見出し
ここに見出し
<p style="border-top: dotted 4px #BFEBFF; border-bottom: dotted 4px #BFEBFF; padding: 10px 5px; ">ここに見出し</p>
<p> </p>
8. 上下破線の見出し
ここに見出し
<p style="border-top:dashed 3px #FF7F7F;border-bottom:dashed 3px #FF7F7F; padding:5px;">ここに見出し</p>
<p> </p>
9. 背景色ありの見出し
ここに見出し
<p style="background:#FFFFE0; padding: 10px;">ここに見出し</p>
<p> </p>
10. 角丸背景色ありの見出し
ここに見出し
<p style="background: #E0EFFF; border-radius: 10px; padding: 10px;">ここに見出し</p>
<p> </p>
11. 背景色＋下線の見出し
ここに見出し
<p style="background: #FFEAFF; border-bottom: 3px solid #FF007D; padding: 10px;">ここに見出し</p>
<p> </p>
12. 背景色あり＋上下線の見出し
ここに見出し
<p style="border-top: solid 2px #FFB973; border-bottom: solid 2px #FFB973; background: #FFFFE0; padding: 10px;">ここに見出し</p>
<p> </p>
13. 横ラインの見出し
ここに見出し
<p style="border-left: solid 8px#FF007D ; padding: 5px 8px ; ">ここに見出し</p>
<p> </p>
14. 横ライン＋下線の見出し
<div style="border-left: solid 8px #FF007D; border-bottom: 2px solid #FF007D; padding: 5px 8px ;">ここに見出し</div>
<p> </p>
15. 横ライン＋背景色の見出し
ここに見出し
<p style="border-left: solid 8px #0000BF; background: #E0EFFF; padding: 5px 8px ;">ここに見出し</p>
<p> </p>
16. 横ライン＋背景色の見出し影付き
ここに見出し
<p style="border-left: solid 8px #7F7FFF; background: #EAEAFF; padding: 5px 8px ; box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.15);">ここに見出し</p>
<p> </p>
17. 吹き出しの見出し
ここに見出し
<p style="background: #FFEAFF; margin-bottom: 0px; border-radius: 5px; padding: 10px; ">ここに見出し</p>
<div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #FFEAFF transparent transparent transparent;margin-left:30px;margin-bottom:20px;"> </div>
<p> </p>
18. タグ風の見出し
● ここに見出し
<p style="background: #FF7FBE; padding: 8px; border: none; border-radius: 30px 0px 0px 30px;"><span style="color:#ffffff; font-weight:bold;">● ここに見出し</span></p>
<p> </p>
19. ドットの見出し
ここに見出し
<p style="background-color:#F2E5FF ; background-image: radial-gradient(rgb(255, 255, 255) 15%, transparent 18%), radial-gradient(rgb(255, 255, 255) 15%, transparent 18%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p> </p>
20. ドット（大きめ）の見出し
ここに見出し
<p style="background-color:#E0EFFF ; background-image: radial-gradient(rgb(255, 255, 255) 25%, transparent 30%), radial-gradient(rgb(255, 255, 255) 25%, transparent 30%); background-position: 0px 0px, 10px 10px; background-size: 20px 20px; padding: 10px;">ここに見出し</p>
<p> </p>
21. ステッチ風の見出し
ここに見出し
<p style="border: dashed 2px #BFBFBF ; background: #FFFFE0; box-shadow: #FFFFE0 0px 0px 0px 10px; padding: 8px;">ここに見出し</p>
<p> </p>
22. ステッチ風(白のステッチ)の見出し
ここに見出し
<p style="border: dashed 3px #FFFFFF ; background: #FFBFDE; box-shadow: #FFBFDE 0px 0px 0px 10px; padding: 8px;">ここに見出し</p>
<p> </p>
23. マーカー風の見出し（細め）
ここに見出し
<p><span style=" background: linear-gradient(transparent 70%, #a7d6ff 70%);">ここに見出し</span></p>
<p> </p>
24. マーカー風の見出し（太め）
ここに見出し
<p><span style=" background: linear-gradient(transparent 30%, #a7d6ff 100%);">ここに見出し</span></p>
<p> </p>
25. 帯（リボン）風
ここに見出し
<p style=" background: #E0EFFF; margin-bottom: 0px; padding: 15px;">ここに見出し</p>
<div style="width:0px; height:0px; border-bottom: solid 15px transparent; border-right: solid 20px #BFBFBF;"></div>
<p> </p>
26. グラデーションの見出し
ここに見出し
<p style="background: linear-gradient(to right, #FFBFDE, transparent); padding:10px;">ここに見出し</p>
<p> </p>
27. グラデーションのアンダーライン
ここに見出し
<p style=" background: -webkit-linear-gradient(to right, #7F7FFF, transparent); background: linear-gradient(to right, #7F7FFF, transparent); padding: 0px 0px 7px;"><span style="display: block; background: #ffffff;">ここに見出し</span></p>
<p> </p>
28. ストライプ下線の見出し
ここに見出し
<p style="background: repeating-linear-gradient(-45deg, #EAEAFF, #EAEAFF 2px, rgb(255, 255, 255) 2px, rgb(255, 255, 255) 4px); padding: 0px 0px 7px;"><span style="display: block; background: #ffffff; padding:5px;">ここに見出し</span></p>
<p> </p>
29. ストライプの見出し
見出しのテキスト
<p style="background: repeating-linear-gradient(-45deg, #E0EFFF, #E0EFFF 4px, #FFFFFF 4px, #FFFFFF 8px); padding: 5px 10px;">見出しのテキスト</p>
30. 横線＋ストライプの見出し
ここに見出し
<p style="border-left: 7px solid #7F7F7F; background: repeating-linear-gradient(-45deg, #F2E5FF, #F2E5FF 7px, #FFFFFF 7px, #FFFFFF 14px); padding: 0px 0px 0px 10px;">ここに見出し</p>
<p> </p>
『Instagramフォロワー１万人突破した秘訣７選』
すでに390名以上が受け取ってます！！
↓ ↓ ↓ ↓ ↓
タップしても表示されない方は@575jocdaでID検索してね
先週の人気記事TOP３
＼ママでも理想の働き方を手に入れた方法✨／
＼インスタはこちら♡Follow Me✨／
好き♡を大切に私らしくはたらいて輝く人生を手に入れる方法
＼思わず二度見され、心を奪う世界観のつくりかた／
デザインのヒントや Instagram＆アメブロの役立つ情報を発信♡
心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア教室
JouJouetteのブログがこちら♡
▶︎お問合せ（LINE@ID → @575jocda ）
▶︎Instagram ▶︎Facebook ▶︎HP
Thank you for Reading
JOUJOUNET
ジュジュネット